ajouter du texte dans le formulaire à un endroit précis

Version imprimable

Bonjour,
j'ai un formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
 
<center>
	<table>
	<tr>
             <td>
	     <table>
	     <tr>
                  <td><p class="text">Titre 1 :</p></td>
	          <td><p class="text"><b>Titre 2 :</p></td>
	     </tr>
             <tr>
                   <td><p class="text"><br> Pas de selection.</p>
	     </tr>
	     <tr><td><form method="post" action="ajout.php" name="ajout">
 
	     <?php
                echo "<select name='ajout1'>"; 
                echo "<option selected value='0'>--- liste1 ---";                 
                //requête pour les éléments de la liste 1
                echo '</select>'; 
                                                
                echo " <select name='ajout2'>"; 
                echo "<option selected value='0'>--- liste2 ---";
                                                  
                //requête pour les éléments de la liste 2
                echo '</select>';
              ?>						
 
		<input type="button" name="Ajouter" value="Ajouter" id="envoyer">
	        </form>
		</td>
		</tr>
		</table>
		</td></tr>
                </table>
</center>

et lorsque je selectionne des valeurs dans les listes déroulantes et que je clique sur "Ajouter", j'aimerais que les valeurs s'affichent à la place du texte "pas de selection" et qu'un script php soit éxécuté en même temps.
Puis si je fais une autre selection et que j'appuie de nouveau sur Ajouter, j'aimerais que les valeurs se positionnent en dessous des précédentes et ainsi de suite (toujours avec execution du script)...
Donc je dois avoir à la fin une liste de selections au dessus de mes listes déroulantes

Quelqu'un aurait-il une solution?

16/06/2008, 12h06
Er3van

Il te faut pour cela un langage dynamique côté client pour afficher les valeurs associées à ton premier select. JavaScript est la solution la plus simple à ton problème à mon avis, mais AJAX offre de nombreuses possibilités et s'adapte parfaitement à du code PHP.
16/06/2008, 21h50
devdebutante

je connais javascript (et pas du tout ajax) mais je ne vois pas comment ajouter mes selections dans le formulaire avant le bouton de validation de l'ajout.

Une partie de code,
a toi de le terminer a ta façon pour qu'il te convienne.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajout</title>
<script language="javascript" type="text/javascript">
function $(element) {
	var worth = document.getElementById(element);
	return worth;
}
 
function liste(objet1,objet2) {
 
 
var sel1 = $(objet1).options[$(objet1).selectedIndex].value;
var sel2 = $(objet2).options[$(objet2).selectedIndex].value;
 
var actuel = $('selection').innerHTML ;
 
$('selection').innerHTML = actuel+'<p>'+sel1+'</p>'+sel2+'</p>';
}
 
 
</script>
<style type="text/css">
<!--
body,td,th {
	color: #000000;
	width:150px;
	margin-left:auto;
	margin-right:auto;
}
-->
</style></head>
 
<body>
 
	<table>
 
	     <tr>
            <td><p class="text">Titre 1 :</p></td>
	        <td><p class="text"> Titre 2 :</p></td>
	     </tr>
 
 
         <tr>
            <td colspan="2" id="selection"><p>Pas de selection.</p></td>
	     </tr>
 
 
	     <tr>
         <td colspan="2">
         <form method="post" action="ajout.php" name="ajout">
 
            <select id="ajout1" name='ajout1'>
            <option selected value='0'>--- liste1 ---</option>
            <option value='1'>-- liste1-2 --</option>
            </select>
 
			<select name='ajout2' id="ajout2">
            <option selected value='3'>--- liste2 ---</option>
            <option value='4'>-- liste2-1 --</option>
            </select>					
 
		<input type="button" name="Ajouter" value="Ajouter" onclick="liste('ajout1','ajout2')" id="envoyer">
	    </form>
		</td>
		</tr>
 
		</table>
 
</body>
</html>

Pour l'exécution du fichier .. tu veu faire quoi exactement?

Ca peut aider

17/06/2008, 09h44
devdebutante

Bon, je m'explique plus en détail.
En fait, je veux faire une liste de compétences(initialement vide) avec à coté de chaque compétence un select avec plusieurs valeurs possibles et un bouton "retirer".
En dessous de cette liste , j'ai mes deux select l'un à coté de l'autre et un bouton "ajouter" à coté.
Ce que j'aimerais, c'est que quand je clique sur "ajouter", mes deux selections soient ajoutées dans une base de données mysql puis affichées à la fin de la liste de compétences. Si je clique sur le bouton "retirer", la compétence et son select disparaissent de la liste et de la base. Et si dans la liste des compétences, je change la valeur du select, je voudrais que le changement soit effectué dans la base.
Mon premier problème que tu as résolu est l'affichage des compétences mais maintenant, il faut que je réussisses à faire cet affichage à partir de la base de données or mes requêtes sont en php et je ne vois pas comment récuperer les résultats en javascript.
J'espère que c'est clair, et que quelqu'un pourra m'aider.
En esperant que je sois dans le bon forum
17/06/2008, 13h51
mimagyc

C'est peu etre parce que je susi fatigué , mais j'ai pas compris,
tu pourrais nous faire une mise en page html avec en commentaire mettre ce que tu voudrais faire ?
17/06/2008, 13h53
tusssss

Oui tu es à priori au bon endroit, mais il va te falloir pour tout ca utiliser AJAX à priori, puisque tu veux aller communiquer avec ton serveur sur des évènements du type onclick...
23/06/2008, 12h11
devdebutante

1 pièce(s) jointe(s)

Salut, désolé de répondre si tard mais j'ai eu d'autres trucs à faire en parallèle.
Voici une idée de ce que je veux obtenir en pièce jointe :

Pièce jointe 32430

Quand je clique sur "ajouter", en dessous de "Compétences requises, je veux afficher ce que j'aurais selectionné dans "competence" et "niveau" (sachant que les 2 selections sont obligatoires)
Et j'aimerais que les selections suivantes s'affichent en dessous des autres.
Il faut savoir que les options des select sont récupérées avec des requêtes mysql et que le bouton "ajouter" sert aussi à ajouter dans ma base de données les deux selections.

J'ai regerdé si je pouvais faire ça avec XAJAX mais comme je ne connais pas trop(d'ailleurs, si vous avez un site à me conseiller, nhésitez pas), je ne sais pas comment je peux gérer les requêtes mysql.
Voilà, j'espère que c'est plus clair cette fois-ci et encore désolé de répondre si tard.
23/06/2008, 13h47
tusssss

Si tu gères déja la base de données, tu n'as pas besoin d'AJAX, si il faut juste réécrire des informations de la page, ailleurs dans la page.

Par exemple, aller lire les infos dans les select et les réécrire ailleurs dans un champ texte est "passablement" aisé.
23/06/2008, 14h42
devdebutante

Ok, dans ce cas, je suppose qu'il suffit d'utiliser innerHTML mais si je ne me trompe pas, ça sert à remplacer la valeur d'une balise par une autre valeur donc si je l'utilise, je vais sans cesse réecrire par dessus ma valeur précédente et je n'aurais pas de liste.
Dis moi si je dis n'importe quoi?
23/06/2008, 14h45
Bovino

Non, pas avec innerHTML +=
23/06/2008, 15h03
devdebutante

Merci beaucoup, après quelques bêtises enlevées de mon prog, ça fonctionne tout simplement avec innerHTML!!!!!!!!!:mouarf:

Et aussi merci pour les cours et tutoriels JavaScript : http://javascript.developpez.com/cours/ :bravo: