Zugriff auf ein Array von HTML-Eingabefeldern mit jQuery oder normalem Javascript

Question

Ich möchte ein Formular erstellen, das eine dynamische Anzahl von Eingabetextfeldern enthält. Ich möchte, dass jedes Textfeld Teil eines Arrays ist (das würde es theoretisch einfacher machen, sie zu durchlaufen, zumal ich nicht die Anzahl der Textfelder kenne, die es irgendwann geben wird). Der HTML-Code möchte so etwas wie:

<p>Field 1: <input type="text" name="field[1]" id="field[1]"></p> 
<p>Field 2: <input type="text" name="field[2]" id="field[2]"></p> 
<p>Field 3: <input type="text" name="field[3]" id="field[3]"></p> 
<p>Field 4: <input type="text" name="field[4]" id="field[4]"></p> 
<p>Field 5: <input type="text" name="field[5]" id="field[5]"></p> 

würden diese Daten dann an einen PHP-Skript geschickt werden und würden als Array dargestellt werden - oder zumindest, das ist die Theorie.

Also meine erste Frage ist, ist das mit HTML erreichbar? Sind Formulare so konzipiert, dass sie funktionieren?

Wenn die Antwort darauf "Ja" ist, wie würde ich dann gehen über jeden von denen mit jQuery oder das Scheitern, das alte JavaScript?

habe ich versucht, dies zu erreichen, den folgenden jQuery-Code verwenden:

someval = $('#field[1]').val(); 

und

someval = $('#field')[1].val(); 

und den folgenden JavaScript:

someval = document.getElementById('related_link_url')[1].value; 

Aber ich habe nicht gehabt etwas Glück.

Vielen Dank im Voraus.

Edit:

Ich soll von einer Javascript Sicht beachten Sie, dass habe ich habe es zu arbeiten, wo die ID jedes Element so etwas wie field_1 ist, field_2 usw. Allerdings glaube ich, dass, wenn ich Sie können es erreichen, indem Sie jedes Textfeld in ein Array platzieren, um den Code übersichtlicher und einfacher zu verwalten.

Answer 1

Zunächst kann das id Attribut nicht [ oder ] Zeichen enthalten.

Es gibt viele Möglichkeiten, jQuery/plain JavaScript-Verweise auf diese Elemente zu erhalten.Sie können Nachkomme Selektor:

<fieldset id="list-of-fields"> 
    <!-- your inputs here --> 
</fieldset> 

$("#list-of-fields input"); 
document.getElementById("list....").getElementsByTagName("input"); 

Sie auch Attributselektor verwenden können:

$("input[name^=field]"); 

Ich bin nicht sicher, ob das der einzige Weg ist, aber ich denke, im Klar JavaScript Sie alle holen müssen input Elemente (document.getElementsByTagName) und dann durchlaufen Array dieser Elemente und überprüfen Sie jedes Element (ob es name Attribut hat, deren Wert mit field beginnt).

Answer 2

jedes Element Geben Sie eine Klasse und Zugriff auf die Gruppe mit jQuery:

<p>Field 1: <input type="text" name="field[1]" class="fields"></p> 
<p>Field 2: <input type="text" name="field[2]" class="fields"></p> 
<!-- etc... --> 

jQuery:

$("input.fields").each(function (index) 
{ 
    // Your code here 
}); 

Dies wird die anonyme Funktion an jedem input Element mit einem Klassennamen von "Feldern" laufen, mit dem Schlüsselwort this, das auf das aktuelle Element zeigt. Weitere Informationen finden Sie unter http://api.jquery.com/each/.