Discussion :

[Little_flower]

Bonjour,

J'ai créé une fonction qui mêle javascript et jquery afin d'obtenir le résultat que je souhaitais.

J'y suis arrivée mais, lorsque je veux insérer ce code dans ma page finale, il ne fonctionne plus.

Je vous montre les fonction qui nous interressent :

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
<script type="text/javascript">
 
var i = 0;
 
function writeChamp(b){
	var s = '';
 
	s += '<div id="tonChamp_' + b + '">';
	s += '	   <select name="monSelect[]">';
 
	<?php
        
        //Création du remplissage du select :
                
        $sql = mysql_query("SELECT * FROM tab_contact ORDER BY nom ASC") or die(mysql_error());
        
        while ($recup = mysql_fetch_row($sql)) {
        
                $nom = $recup->nom;
                $idcontact = $recup[0];
                
                echo "s += '<option value=\"$idcontact\">coucou</option>';";
        
        }
        
        ?> 
	s += '       </select><input name=supprimer" type="button" id="supprimer" value="Supprimer le champ" onClick="removeChamp('+ b +'); return false; />';
	s += '	 </div>';
 
	return s;
}
 
function removeChamp(b){
	$("#tonChamp_" + b).remove();
}
 
$(document).ready(function(){
	// Clique sur le bouton Ajouter
	$("#boutonAjouter").click(function() {
		$("#form1").append(writeChamp(i));
		i++;
	});
});
 
</script>

Et voici maintenant le bout de code que je dois placer :

Code :

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

1
2
3
4
<form id="form1" name="form1" method="POST" action="">
                       <input name="boutonAjouter" type="button" id="boutonAjouter" value="Ajouter un champ" />
 			<div id="tonChamps"></div>
</form>

Ce script me permet d'ajouter et/ou de supprimer des select de manière automatique.

Ce script fonctionne correctement si il n'est placé dans aucune balise.
Or je dois le placer dans une balise table et dès qu'il s'y trouve, il ne fonctionne plus...

Commençant à peine le javascript, je m'en remet à vous pour m'aider !!

Merci d'avance

[Sacha999]

2 constats

1/ Ce code ne fonctionne pas sur FireFox mais fonctionne sur IE (donc je suppose que tu utilises FF et c'est le cas auquel tu es confronté)

Code :

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

1
2
3
4
5
6
7
 
<table>
	<form id="form1" name="form1" method="POST" action="">
			                     <input name="boutonAjouter" type="button" id="boutonAjouter" value="Ajouter un champ" />
			 	<div id="tonChamps"></div>
	</form>
</table>

Ce code fonctionne bien sur FireFox et IE

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<table>
	<tr>
		<td>
			<form id="form1" name="form1" method="POST" action="">
			                       <input name="boutonAjouter" type="button" id="boutonAjouter" value="Ajouter un champ" />
			 			<div id="tonChamps"></div>
			</form>
		<td>
	</tr>
</table>

2/ Regarde bien dans ton "input" il manque 1 guillemets ouvrante et 1 guillemet fermante (ce qui fait que ca fonctionne sur FF et pas IE en mode sans_table)

[Little_flower]

Merci pour votre réponse.

Mon code fonctionne effectivement dans un tableau. Mais, malheureusement, et je sais que la structure n'est pas formidable, ce tableau est lui même inséré dans un menu...

Voici la structure de mon menu :

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
<dl id="menu">
<dt onclick="javascript:montre('smenu2');">Ajouter</dt>
	<dd id="smenu2">
	<ul>
         <table>
            <tr>
              <li>
              <td>Date d'entrée :</td>
              <td><input type="text" name="dateentree"/></td>
              </li>
            </tr>
            <tr>
               <li>
               <td>Métier :</td>
               <td><input type="text" name="metier"/></td>
               </li>
            </tr>
            <tr>
                <li>
		<td><input name="boutonAjouter" type="button" id="boutonAjouter" value="Ajouter un champ" />			 					<div id="tonChamps"></div>
		</form>
		<td>
                </li>
	    </tr>

Les balises <dt> me permettent de définir une "tête de chapitre", les balises <li> me permettent d'afficher mes données correctement.

Mon code d'ajout doit se placer dans ce menu or dès que je l'y insère, il ne détecte plus rien.

Je vous joint une image du "menu" (le code inséré correspond au input nommé : "Ajouter un champ" )

http://www.servimg.com/image_preview...=26&u=12052199

Si vous voyez une erreur ou si vous avez des conseils ou solutions n'hésitez pas.
Merci d'avance

[Sacha999]

Yop

Une table doit suivre cette logique <table><tr><td> --ici tout ce ke tu veux </td>, hors toi tu place des <li> hors <td>
De plus ou est la balise ouvrante <form id="form1"> ? Malgres qu'il y ai la balise fermante </form>

[Little_flower]

Heu je n'ai pas mis tout le code ^^.

La balise ouvrante du form est définie plus haut.

Je t'explique pour ce qui est des balises de la table dans mon menu.
J'ai un menu en javascript qui utilise les balises <li>. Je voudrais garder le même affichage que mon menu. Ce qui revient à écrire le nom du champ et le champ de saisie dans une balise <li>. Or, si je les laisse tel quel, l'affichage n'est pas nickel et je passe par un tableau pour structurer mes données...

Je ne sais pas si tu comprend bien...?

Mon soucis est donc que mon code n'est pas traité... Si tu veux plus de précisions...

[Sacha999]

Tu ne peux pas enchevetrer dans balises l'un dans l'autre

ca non:
<form> <td></form></td>

ca oui:
<form> <td></td></form>

ce ne sont que des exemples pour comprendre, leur synthaxe est fausse

[Little_flower]

D'accord je comprend pour ce qui est de l'enchevêtrement des balises.

Je vais retravailler ce bout de code en remettant dans l'ordre les balises.
En espérant que ça fonctionne.

Merci de ton aide.

[Little_flower]

Ça fonctionne très bien maintenant.

Merci de m'avoir aidé à résoudre cette erreur !