2008-11-23 10 views
11

Je crée un formulaire simple pour créer des sondages, donc je veux la possibilité d'ajouter des champs de saisie supplémentaires au cas où l'utilisateur voudrait plus d'options dans le sondage.Soumettre des champs de saisie de formulaire ajoutés avec javascript

J'ai créé un code Javascript qui ajoute un nouveau champ de saisie au formulaire, mais les champs de saisie ajoutés dynamiquement ne sont pas affichés lorsque le formulaire est soumis (j'utilise un bouton d'envoi standard).

Existe-t-il un moyen d'afficher/de reconnaître dynamiquement les champs ajoutés dynamiquement dans le formulaire?

<form id="myForm" method="post"> 
    <input type="submit"> 
    <input type="text" name="poll[question]"> 
    <input type="text" name="poll[option1]"> 
    <input type="text" name="poll[option2]"> 
</form> 
<a href="javascript:addOption();">Add option</a> 

<script> 
    var optionNumber = 3; //The first option to be added is number 3 
    function addOption() { 
    var theForm = document.getElementById("myForm"); 
    var newOption = document.createElement("input"); 
    newOption.name = "poll[option"+optionNumber+"]"; // poll[optionX] 
    newOption.type = "text"; 
    theForm.appendChild(newOption); 
    optionNumber++; 
    } 
</script> 

Répondre

4

Votre code fonctionne très bien est:

<?php 
    print_r($_REQUEST) 
?> 
<html> 
<body> 

<form id="myForm" method="post"> 
    <input type="submit"> 
    <input type="text" name="poll[question]"> 
    <input type="text" name="poll[option1]"> 
    <input type="text" name="poll[option2]"> 
</form> 
<a href="javascript:addOption();">Add option</a> 

<script> 
    var optionNumber = 3; //The first option to be added is number 3 
    function addOption() { 
     var theForm = document.getElementById("myForm"); 
     var newOption = document.createElement("input"); 
     newOption.name = "poll[option"+optionNumber+"]"; // poll[optionX] 
     newOption.type = "text"; 
     theForm.appendChild(newOption); 
     optionNumber++; 
    } 
</script> 
</body> 
</html> 

cliquez sur Ajouter une option deux fois et vous obtenez

Array ([sondage] => Array ([question] => [option1] => [option2] => [option3] => [option4] =>))

0

Vous pouvez toujours sérialiser la forme même en utilisant une fonction javascript puis soumettre que (en utilisant AJAX ou une demande de get ou quelque chose).
http://malsup.com/jquery/form/comp/

2

Êtes-vous sûr de ne pas vous tromper ici?

Je copiais votre code dans une nouvelle page et ajouté ce qui suit au code derrière d'une page ASP.NET (il devrait fonctionner sur tout cadre):

protected void Page_Load(object sender, EventArgs e) 
{ 
    foreach (string p in this.Request.Params.Keys) { 
     if (p.StartsWith("poll")) { 
      Response.Write(p + "&nbsp;&nbsp;" + this.Request.Params[p] + "<br />"); 
     } 
    } 
} 

J'ai ajouté des champs supplémentaires et les valeurs entrées de test , la sortie affiche clairement tous les champs d'entrée dynamiques affichés sur le serveur.

est ici la sortie:

poll[question] test1 
poll[option1] test2 
poll[option2] test3 
poll[option3] test4 
poll[option4] test5 
poll[option5] test6 
poll[option6] test7 
12

Je viens de déboguer mon site où j'avais un problème similaire. Pour moi, il s'est avéré que le fait d'avoir ma table et mes étiquettes de forme dans le «mauvais» ordre a causé le problème.

brisé:

 
table 
    form 

travail:

 
form 
    table 

Cela indique quelque chose assez important. Le navigateur peut s'afficher correctement, et le formulaire peut fonctionner correctement, avec du code html malformé, mais vous pouvez toujours casser des choses, comme ceci, en n'ayant pas le format html correctement formaté. Peut-être que je devrais commencer à utiliser mod_tidy!

+0

Je ne savais pas que cela pouvait avoir un tel effet, cela a fonctionné pour moi. Merci beaucoup: D – jwbensley

+0

Vous monsieur est un héros. Merci d'avoir sauvé mes mille ans. –

+0

Ditto! M'a sauvé de m'arracher les cheveux! – TecBrat