Formulaire et champ dynamique

Bonjour tout le monde,

Je fais face à une petite difficulté et j’aimerais avoir votre avis.

Sur une page Web, je propose un formulaire. Sur cette page, une combobox est proposée mais l’utilisateur a la possibilité de créer un autre item de cette combobox, lui permettant de choisir plusieurs valeurs.
Pour être plus clair, disons que on a:

  • une combobox (avec par exemple une liste de couleurs)
  • un bouton “Choisir une autre couleur” ; si on clique dessus, une autre combobox (identique à la première) apparaît
<table id="table_selection_couleur" name="table_selection_couleur" border="0">
  <tr>
    <td><select name="list_couleurs[]">
         <option value="" SELECTED>Please Select</option>
         <option value="29">Bleu</option>
         <option value="30">Rouge</option>
         <option value="31">Vert</option>
        </select>
   </td>
  </tr>
</table>

La fonction javascript qui ajoute un item de la combobox


function addColor() {
    var tbodyElem = document.getElementById("table_selection_couleur");
	var trElem, tdElem, txtNode;
	
	trElem = tbodyElem.insertRow(tbodyElem.rows.length);
	tdElem = trElem.insertCell(trElem.cells.length);
	var text = '<select name="list_couleurs[]"><option value="" SELECTED>Please Select</option><option value="29">Bleu</option><option value="30">Rouge</option><option value="31">Vert</option></select>';
	tdElem.innerHTML = text;
	
  }

Le problème est que quand je soumets le formulaire, je ne récupère la valeur que de l’item initialement présent sur la page et pas des items générés dynamiquement.
J’ai fait le test avec plusieurs combobox posées dès le départ et ça marche correctement c’est-à-dire que (je peux parcourir le tableau de valeurs via $HTTP_POST_VARS[‘list_couleurs’].

Quelqu’un aurait-il une idée ?

Personne n’a une idée ?

Normal. Un élément ne permet de choisir qu’un ou plusieurs éléments. Ce sont ces éléments qui sont envoyé au serveur.

Pour ce que tu veux faire, le mieux, c’est d’afficher une liste de valeurs mais avec des cases à cocher cochées par défaut genre :

[x] Bleu

Et le code suivant :

<input type="checkbox" value="#0000FF" name="list_couleurs[]" checked="checked" /> Bleu

Là, tu auras le moins de problème (autre solution: tu ajoute l’attribut multiple=“multiple” sur ton champ , et tu sélectionnes tes couleurs …)

Salut,

Je pense que le problème vient de ta façon de nommer les éléments. Si tu passes plusieurs fois “list_couleurs[ ]” dans une url, tu auras effectivement un tableau (list_couleurs) contenant tes valeurs.
Par contre, je ne suis pas sûr que tu puisse soumettre plusieurs “list_couleurs[ ]”…

Je pense que si tu met la clé à chaque fois ça marchera : list_couleurs[1], list_couleurs[2]…

Si. Tu peux. C’est juste à PHP de le gérer.

Comment expliquer que si j’écris dès le départ les deux select (donc non créés dynamiquement par javascript), ça marche ? Dans ce cas, je récupère bien un tableau de valeurs via $HTTP_POST_VARS[‘list_couleurs’].

Par exemple :

<table id="table_selection_couleur" name="table_selection_couleur" border="0">
 <tr>
 <td><select name="list_couleurs[]">
 <option value="" >Please Select</option>
 <option value="29" SELECTED>Bleu</option>
 <option value="30">Rouge</option>
 <option value="31">Vert</option>
 </select>
 </td>
 </tr>
 <tr>
 <td><select name="list_couleurs[]">
 <option value="">Please Select</option>
 <option value="29">Bleu</option>
 <option value="30" SELECTED>Rouge</option>
 <option value="31">Vert</option>
 </select>
 </td>
 </tr>
</table>

=> $HTTP_POST_VARS[‘list_couleurs’] = [29;30]

Mais que les valeurs sélectionnées. Ce qui est bien ce que je t’ai dis. Maintenant ton champs n’est peut-être pas pris en compte quand généré. Essaye de coller un autre nom voir si c’est pas ça la cause.

OK, je sais d’où ça vient. Le code n’est pas compatible avec FF.
J’ai testé sous IE et ça marche. (Attention, je n’accuse personne, pas la peine de troller !).
En fait, il faut que je modifie mon code pour qu’il soit compatible avec les deux navigateurs. Je vais devoir faire un “if (navigateur)” et ça me saôule !

Pour ceux que ça intéresse : http://www.developpez.net/forums/d668032/webmasters-developpement-web/javascript/formulaire-champ-dynamique/

Tiens, c’est vrai que ça me rappelle un truc cette erreur.

Tu devrais parcourir les éléments de ton formulaire voir ce qu’il y a.

Sinon, essaye de générer tes éléments via DOM :

var selectElement = document.createElement('select');
selectElement.setAttribute('name', 'list_couleurs[]'); // ++ ajout des options
selectElement.form = ...; // formulaire parent, à ne faire que si erreur
tdElem.appendChild(selectElement);