Ajout de champs dans un formulaireRésolu

Question

Bonjour,

J'ai cherché des moyens pour ajouter des champs dans mon formulaire, sans avoir recours à un rechargement de la page.
J'avais écrit une fonction qui malheureusement ne semble pas fonctionner, en tout cas, pas sur FireFox.

Voici ma fonction : 

function add_response()
{
    var div =  document.createElement('div');
    
    /*var response = document.createElement('input');
    response.setAttribute('name', 'responses[]');
    response.setAttribute('type', 'text');
    
    div.appendChild(response);
    
    var btnDel = document.createElement('button');
    btnDel.innerHTML = "Supprimer";
    btnDel.onclick = function() {
        remove_response(this);
    }   
    div.appendChild(btnDel);*/
    
    div.innerHTML = ' Supprimer ';
    
    var parent  = document.getElementById('responses_block');
    parent.appendChild(div);
}

La partie orangée étant mon ancienne version, remplacé par quelque chose de plus "bourrin" pour voir si ce la fonctionne mieux mais en vainc :
le champ s'affiche correctement mais lorsque je valide le formulaire, celui-ci a disparu et je ne comprend pas pourquoi alors que d'autres personnes semblent avoir réussi avec un code similaire.

Quelqu'un peut-il m'aider ?

neolitec · Accepted Answer

Je vais faire une auto réponse, que je vais valider bien sûr ^^ La problème venait de mon code HTML : mon formulaire était déclaré de la façon suivante : L'erreur est en rouge. Il faut englober le tableau avec les balises form. Sinon cela ne fonctionne pas. Une vieille et mauvaise habitude de ma part...

maelob · Answer

Bonjour, ta partie orangé ne peut fonctionné car a aucun moment tu ne spécifie un objet parent existant à moins que tu utilises parent aussi pour le code orangé. Sinon il devrait fonctionner regarde la console javascript de firefox en cas d'erreurs sous firefox. Concernant le 2eme code il devrait fonctionner aussi par contre tu utilises des tableaux pour les input de type text donc quand tu récuperes sa valeur il faut bien que tu les recupere comme des tableaux exemple php : http://www.phpcs.com/code.aspx?ID=13200

Maelo ou Elo --> Mon blog Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)

maelob · Answer

L'exemple est basé sur un select multiple mais c'est la même chose.

Maelo ou Elo --> Mon blog Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)

neolitec · Answer

Hum j'ai dû mal m'exprimer :)

Mon code javascript fonctionne à merveille.
C'est lorsque je valide le formulaire que je ne retrouve plus les champs ajoutés dynamiquement au tableau "responses", dans le formulaire.
En d'autres termes, seuls les champs construits "en dur" dans le code HTML sont transmis.

Un exemple vaut mieux qu'un long discours : http://www.apseb.net/fbjvm/dev/misc/

Pour info, et vous le verrez, il s'agit d'un formulaire pour l'ajout d'un sondage... la page est moche, j'ai pas mis le CSS qui va avec :)

maelob · Answer

J'avais bien compris et je t'ai laissé une réponse pour ça (copié collé ;-) ) tu tilises des tableaux pour les input de type text donc quand tu récuperes sa valeur il faut bien que tu les recupere comme des tableaux exemple php : http://www.phpcs.com/code.aspx?ID=13200

Maelo ou Elo --> Mon blog Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)

neolitec · Answer

arf...

J'ai bien lu cet article. Malheureusement le problème n'est pas là !!
Je vais te donner deux adresses différentes... qui exploitent rigoureusement le même code javascript... et le meme code PHP.
L'une fonctionne, l'autre non. La question est : pourquoi ?

http://www.apseb.net/fbjvm/dev/misc/

http://www.apseb.net/fbjvm/dev/misc/index2.php

Si tu avais au moins ouvert mon lien... tu aurais vu que j'affiche le tableau $_POST complet avec la fonction var_dump de PHP... donc le tableau, je ne peux pas le louper.

neolitec · Answer

excuse-moi, le deuxième lien est http://www.apseb.net/fbjvm/dev/index2.html

neolitec · Answer

décidément http://www.apseb.net/fbjvm/dev/misc/index2.html

bizibiz17 · Answer

Salut,

>> le champ s'affiche correctement mais lorsque je valide le formulaire, celui-ci a disparu et je ne comprend pas pourquoi.

Tu créé ton formulaire dynamiquement en js, donc si tu repasses par le serveur et que la page se recharge : tout ce qui a été créé côté client "disparaît". C'est le comportement normal de toute page web.

maelob · Answer

@[auteur/BIZIBIZ17/669971.aspx bizibiz17] : Je ne suis pas d'accord avec toi quand le formulaire est envoyé vers le serveur les éléments dynamiquement crée dans le formulaire sont envoyé aussi. @neolitec : j'ai beau lire relire et rerelire les sources de tes liens je ne vois pas...

Maelo ou Elo --> Mon blog Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)

neolitec · Answer

mais rassure-moi, ça fait pareil chez toi ?

neolitec · Answer

@[../auteur/BIZIBIZ17/669971.aspx bizibiz17] : teste ! exécute les pages avant de me dire que je me trompe ^^
enfin, je crois que tu n'as pas compris le fond du problème tout simplement.

maelob · Answer

Oui oui ça fait pareil mais tu devrai installer firebug (extension firefox) qui te permettra de "voir" la page générée dynamiquement.

Maelo ou Elo --> Mon blog Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)

neolitec · Answer

done : pas de souci. les champs sont générés au poil à l'endroit qu'il faut.

simpa cette extension ^^, bien plus pratique que mon alert...

maelob · Answer

Bon tan mieux si tu as trouvé. Des fois c'est tout bête. Tu as firebug ça tue tout lol.

Maelo ou Elo --> Mon blog Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)

Ajout de champs dans un formulaire

15 réponses

Votre réponse

Discussions similaires