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

**devdebutante** · 16/06/2008, 11h54

Bonjour,
j'ai un formulaire :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

**Er3van** · 16/06/2008, 12h06

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.

**devdebutante** · 16/06/2008, 21h50

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.

**mimagyc** · 16/06/2008, 23h53

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**devdebutante** · 17/06/2008, 09h44

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

**mimagyc** · 17/06/2008, 13h51

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 ?

**tusssss** · 17/06/2008, 13h53

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...

**devdebutante** · 23/06/2008, 12h11

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 :

Nom : testPage.png
Affichages : 119
Taille : 4,9 Ko

Nom : testPage.png
Affichages : 119
Taille : 4,9 Ko

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.

**tusssss** · 23/06/2008, 13h47

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é.

**devdebutante** · 23/06/2008, 14h42

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?