2008-11-23 3 views
11

Ich mache ein einfaches Formular zum Erstellen von Umfragen, daher möchte ich die Möglichkeit, zusätzliche Eingabefelder für den Fall, dass der Benutzer mehr Optionen in der Umfrage will hinzufügen.Submit Formular Eingabefelder hinzugefügt mit Javascript

Ich habe Javascript-Code erstellt, der dem Formular ein neues Eingabefeld hinzufügt, aber die dynamisch hinzugefügten Eingabefelder werden nicht gepostet, wenn das Formular gesendet wird (ich verwende einen Standard-Senden-Button).

Gibt es eine Möglichkeit, die dynamisch hinzugefügten Felder als Teil des Formulars zu bekommen/zu erkennen?

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

Antwort

4

Ihr Code funktioniert wie:

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

Klick hinzufügen Option zweimal und Sie erhalten

Array ([Umfrage] => Array ([Frage] => [Option1] => [Option2] => [Option3] => [Option4] =>))

0

Sie können immer die Form serialisiert sich eine JavaScript-Funktion verwenden und dann einreichen, dass (mit AJAX oder eine GET-Anforderung oder etwas).
http://malsup.com/jquery/form/comp/

2

Sind Sie sicher, dass Sie hier keinen Fehler machen?

kopiert ich Ihren Code in einer neuen Seite und fügte hinzu, die folgenden auf den Code hinter einer ASP.NET-Seite (es ist auf jeden Rahmen funktionieren sollte):

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 />"); 
     } 
    } 
} 

ich hinzugefügt, um zusätzliche Felder und eingegeben Prüfwerte Die Ausgabe zeigt alle dynamischen Eingabefelder, die zurück auf den Server gesendet werden. Hier

ist die Ausgabe:

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

Ich debuggte gerade meine Seite, wo ich hatte ein ähnliches Problem. Für mich stellte sich heraus, dass das Problem mit meinen Tabellen- und Formular-Tags in der "falschen" Reihenfolge verursacht wurde.

gebrochen:

 
table 
    form 

Arbeits:

 
form 
    table 

Dies weist darauf hin, etwas ziemlich wichtig. Der Browser kann gut gerendert werden, und das Formular kann gut funktionieren, mit fehlerhaft formatiertem HTML, aber Sie können immer noch Dinge wie diese brechen, wenn Sie nicht richtig formatiertes HTML haben. Vielleicht sollte ich anfangen, mod_tidy zu benutzen!

+0

Ich wusste nicht, das könnte so eine Wirkung haben, das hat für mich funktioniert. Vielen Dank: D – jwbensley

+0

Ihr Herr ist ein Held. Danke, dass du meine tausend Jahre gerettet hast. –

+0

Dito! Rettete mich davor, mir die Haare auszuziehen! – TecBrat