Formular-Element dynamisch mit Javascript hinzufügen -- nicht absenden

Question

Edit: Ich habe das Problem behoben, indem ich einfach von vorne angefangen habe. Tut mir leid, dass ich eure Zeit verschwendet habe. Bitte stimmen Sie für die Schließung, wenn Sie so geneigt sind.

Ich habe Schwierigkeiten, die tatsächlichen Daten in einem Formular zu übermitteln, wenn die Eingabefelder über Javascript hinzugefügt werden. Die Felder werden angezeigt, und an der richtigen Stelle, aber wenn ich eine var_dump( Feldname) auf der Server-Seite zu tun, ist nichts angezeigt. Die Überprüfung mit Live-HTTP-Headern zeigt mir, dass der Browser nicht versucht, die dynamisch hinzugefügten Formularfelder zu übermitteln.

Muss ich meine dynamisch erstellten Formulareingaben irgendwie an das Formular "anhängen"?

Mein Code:

HTML

<form id="att_form" method="post" name="add_attachments" enctype="multipart/form-data" action="#">
<-- below input to prove form submits, just not the dyn added elements -->
<input name="data[one]" type="text" />
<div id="add_fields"></div>
<input type="submit" />
</form>

Javascript

function addFormField()
{
 var id = 1;
 var htm = "<p id='row" + id + "'><input type='text' size='20' name='txt[]' id='txt" + id + "' /></p>";
 $("#add_fields".append( htm );
}

Wenn ich das Formular abschicke, wird meine Eingabe mit dem Namen data[one] als POST-Wert angezeigt, aber die mit addFormField() hinzugefügten Werte nicht. Sie erscheinen im HTML an der richtigen Stelle, werden aber nicht gepostet. Muss ich das Element als untergeordnetes Element an mein Formularelement anhängen, damit es übermittelt wird?

Ich habe gesehen Eingabefelder für das Absendeformular mit javascript hinzugefügt das ist, wo ich die Idee des Anhängens der Daten speziell auf das Formular Kind bekam, aber das wird einige Umstrukturierung meiner CSS erfordern. Also, ich hoffe, dass es etwas einfaches ich in den obigen Code tun können.

Vielen Dank im Voraus!

edit: Tippfehler korrigiert, funktioniert aber immer noch nicht. Ich habe beschlossen, die Bibliothek frei JS-Methode in der SO-Link oben diskutiert zu verwenden, wie das funktioniert gut. Vielen Dank für die Hilfe aber!

Answer 1

Es gibt 2 Tippfehler in Ihrem Code: htm anstelle von html

und add_fields / add_files

Answer 2

Es gab eine Menge Tippfehler in Ihrem Code. Zum Beispiel haben Sie den Selektor-Tag für jquery nicht geschlossen.

Sie setzen $("#add_fields".append( htm );

Hätte sein sollen $("#add_fields").append( htm );

Beachten Sie die fehlenden Paranthesen.

Aber ich glaube, Ihr Problem liegt hauptsächlich darin, wie Sie versuchen, auf die Werte über PHP zuzugreifen. Ich habe gerade Ihren Quellcode in eine Testseite eingefügt, und es funktioniert alles, wenn Sie die Werte korrekt abrufen.

<?php
foreach ($_REQUEST['txt'] as $printme) 
    echo $printme."<br/>";
?>

Die oben genannte Quelle funktioniert gut.

Answer 3

Wenn Sie etwas hinzufügen/anhängen oder verwenden innerHtml um Formularfelder als Html zu platzieren, dann wird es manchmal außerhalb des Formulars platziert, Sie werden es als Teil des Formulars sehen, aber intern ist es nicht.

Um dieses Problem zu lösen, müssen Sie Folgendes hinzufügen form Attribut mit Eingabefeldern wie form=myForm und myForm sollte Ihre Formular-ID sein.

Answer 4

Ist das Ihr aktueller Code?

Wenn ja, haben Sie den input-Tag und den p-Tag nicht geschlossen also ignoriert das Formular sie vielleicht

var htm = "<p id='row" + id + "'><input type='text' size='20' name='txt[]' id='txt" + id + "' /></p>";