Soumettre des champs de saisie de formulaire avec javascript

Je suis en train de faire un formulaire simple pour créer des sondages, donc je veux que la possibilité d'ajouter des champs de saisie dans le cas où l'utilisateur veut plus d'options dans le sondage.

J'ai fait un code Javascript qui ajoute un nouveau champ de saisie à l'écran, mais la dynamique ajouté les champs de saisie ne sont pas affichés lorsque le formulaire est soumis (j'utilise un standard bouton envoyer).

Est-il un moyen pour obtenir l'ajoutées dynamiquement les champs affichés/reconnu comme faisant partie de la forme?

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

source d'informationauteur aasmundbo

  1. 4

    Votre code fonctionne très bien comme il 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 de deux fois et vous obtenez

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

  2. 12

    Je viens de débogage mon site où j'ai eu un problème similaire. Pour moi, il s'est avéré que le fait d'avoir ma table et les balises de formulaire dans le "mauvais" de l'ordre qui a causé le problème.

    Cassé:

    table 
formulaire

    De travail:

    forme 
table

    Cela révèle quelque chose d'assez important. Le navigateur peut rendre très bien, et la forme peut fonctionner correctement avec du code html mal formé, mais vous pouvez toujours casser des choses, comme ça, en ayant de ne pas avoir correctement formaté en html. Je devrais peut-être commencer à utiliser mod_tidy!

  3. 2

    Êtes-vous sûr de ne pas faire d'erreur ici ?

    J'ai copié ton code dans une nouvelle page et ajouté ce qui suit pour le code-behind de l'ASP.NET page (il devrait fonctionner sur n'importe quel 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 entré les valeurs de test, la sortie indique clairement toutes les dynamiques des champs de saisie posté sur le serveur.

    Voici le résultat:

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

    Vous pouvez toujours sérialiser le formulaire vous-même à l'aide d'une fonction javascript, puis de le soumettre (à l'aide d'AJAX ou d'une requête get ou quelque chose).

    http://malsup.com/jquery/form/comp/