Jquery Get Input Array Feld

74

Ich habe hier ähnliche Fragen gefunden, aber nichts funktioniert für mich.

haben Eingaben wie:

<input type="text" value="2" name="pages_title[1]">
<input type="text" value="1" name="pages_title[2]">

versuchen, diese Felder wie folgt zu bekommen:

$('input[name="pages_title[]"]')

aber haben leere Ergebnisse :(

Wie bekomme ich alle Felder? Ich kann es nur so bekommen$('input[name="pages_title[1]"]')

Abiku
quelle
Mögliches Duplikat des jQuery-Selektors für Eingaben mit eckigen Klammern im
Namensattribut
1
Ah, falsch interpretierte Frage. Enge Abstimmung ist falsch ... muss Start mit Selektor verwenden.
Epascarello
@epascarello - wie würde man mit Hilfe beginnen, um alle zu bekommen?
Rafael Herscovici
Ich habe ein einfaches Plugin erstellt, das rekursiv eine JSON-Objektdarstellung dieser "mehrdimensionalen Eingabefelder" generiert
alexw

Antworten:

101

Verwenden Sie den Start mit Selektor

$('input[name^="pages_title"]').each(function() {
    alert($(this).val());
});

jsfiddle Beispiel

Hinweis: In Übereinstimmung mit @epascarello besteht die bessere Lösung darin, den Elementen eine Klasse hinzuzufügen und auf diese Klasse zu verweisen.

97ldave
quelle
32

Dies funktioniert normalerweise bei Kontrollkästchen und Optionsfeldern ... aber jeder Name sollte gleich sein.

<input type="text" value="2" name="pages_title[]">
<input type="text" value="1" name="pages_title[]">

var x = $('input[name="pages_title[]"]').val();

Das heißt, Sie erhalten alle Felder in durch Kommas getrennten Werten. Ich habe es nie mit Textfeldern versucht, kann es also nicht garantieren.

wie @John kommentierte: über sie zu iterieren. $('input[name="pages_title[]"]').each(function() { var aValue = $(this).val(); });

EDIT: Nicht immer müssen Sie nur die OP-Fragen beantworten, manchmal müssen Sie ihnen bessere Methoden beibringen. (Entschuldigung, wenn das arrogant klingt)

KOMMENTAR: Definieren von Eingaben als

<input type="text" value="1" name="pages_title[1]">
<input type="text" value="2" name="pages_title[2]">

bricht das Array, jede Eingabe hat einen eindeutigen Namen, daher ist es kein Array mehr.

Rafael Herscovici
quelle
3
Verwenden Sie$('input[name="pages_title[]"]').each(function() { var aValue = $(this).val(); });
Luke Shaheen
1
Entschuldigung, aber das wird nicht funktionieren, wie ich in meiner Frage beschrieben habe. Es wird nur funktionieren, wenn ich Feldnamen wie pages_title [] habe, aber nicht pages_title [1] pages_title [2] pages_title [3]
abiku
3
@Dementic, aber das ist völlig legal, um das zu haben. Sie könnten mehr Dimensionen haben name = "page_tile [1] [name]" und name = "page_title [2] [name]", also müssen Sie [1] usw. unterstützen
Dss
2
@ Dss - es ist legal, aber die Benennung kommt, um ein Array darzustellen, [1]würde ein anderes Array darstellen als[2]
Rafael Herscovici
3
-1 Es ist nicht nur legal, sondern auch ein absolutes Muss, wenn ich eine variable Anzahl von Feldern mit dem Feldarray verknüpft habe und keine Garantie für die Reihenfolge oder Einbeziehung der einzelnen Felder habe. Ich muss in der Lage sein, eindeutige IDs anzugeben, auf die ich mich nach der Übermittlung verlassen kann.
Oucil
25

Mit der Map-Methode können wir Eingabewerte abrufen, die im Array gespeichert sind.

var values = $("input[name='pages_title[]']").map(function(){return $(this).val();}).get();
user3021515
quelle
13

Sie müssen den Start mit Selektor verwenden

var elems = $( "[name^='pages_title']" );

Eine bessere Lösung besteht jedoch darin, den Elementen eine Klasse hinzuzufügen und auf die Klasse zu verweisen. Der Grund dafür ist ein schnelleres Nachschlagen.

Epascarello
quelle
und was passiert dann bei name="pages_titles"? Warum sollte man eine Klasse verwenden, wenn klar nameist, dass sie dieselbe sein sollte? extra Aufschlag zum Spaß?
Rafael Herscovici
2
Nein, es macht keinen Spaß ... weil das ^=viel langsamer ist als ein Klassenselektor. Es muss Zeichenfolgen analysieren und nach Übereinstimmungen suchen. Und ich habe keine Ahnung, was du mit demname="pages_titles"
Epascarello
1
gemäß Ihrer Antwort, beginnt mit, wird auch fangen pages_titles(anstelle von pages_title). Ich bin damit einverstanden, dass er seine Auswahl auf so etwas wie eingrenzen sollte, #divId[name='pages_title']aber warum eine Klasse hinzufügen? Der Unterschied wäre so gering, dass er nicht bemerkt wird.
Rafael Herscovici
eine weitere Sache (Entschuldigung für die Auswahl ..), da Ajax nicht erwähnt wurde, könnte dieses Formular regelmäßig add classgesendet werden , und was Ihre Lösung betrifft, wird er auf der Serverseite keine Ergebnisse erhalten.
Rafael Herscovici
1
Diese Antwort ist interessant und selbst bei tieferen Überlegungen zum Regex-Parse-Verbrauch wäre es beispielsweise für Plug-Ins besser, mit dem Unterricht zu beginnen - viel schneller, stimme epascarello zu.
Arthur Kushman
13

Setzen Sie den Eingabenamen in einfache Anführungszeichen, sodass die Klammern []als Zeichenfolge behandelt werden

var multi_members="";
$("input[name='bayi[]']:checked:enabled").each(function() {
    multi_members=$(this).val()+","+multi_members;
});
Grenzenlose isa
quelle
9

Sie können Ihren Eingabetextfeldern Klassennamen geben, wie folgt:

<input type="text" value="2" name="pages_title[1]" class="pages_title">
<input type="text" value="1" name="pages_title[2]" class="pages_title">

und iteriere so:

$('input.pages_title').each(function() {
    alert($(this).val()); 
});
Gregory R.
quelle
Das ist eine großartige Antwort. Es hilft vielen von mir.
Sumit Kumar Gupta
7

Ich denke, der beste Weg ist, ein Propper-Formular und jQuery.serializeArray zu verwenden .

<!-- a form with any type of input -->
<form class="a-form">
    <select name="field[something]">...</select>
    <input type="checkbox" name="field[somethingelse]" ... />
    <input type="radio" name="field[somethingelse2]" ... />
    <input type="text" name="field[somethingelse3]" ... />
</form>

<!-- sample ajax call -->
<script>
$(document).ready(function(){
    $.ajax({
        url: 'submit.php',
        type: 'post',
        data: $('form.a-form').serializeArray(),
        success: function(response){
            ...
        }
    });
});
</script>

Die Werte werden in PHP als verfügbar sein $_POST['field'][INDEX].

Thomas Venturini
quelle
2

Sie können den eckigen Klammern mit doppelten Schrägstrichen wie folgt entkommen:

$('input[name="pages_title\\[\\]"]')

Henry
quelle
2

Sie können den Contain-Selektor verwenden:

[name * = ”value”] : Wählt Elemente mit dem angegebenen Attribut mit einem Wert aus, der einen bestimmten Teilstring enthält.

$( document ).on( "keyup", "input[name*='pages_title']", function() {
     alert($(this).val());
});
Adnan Ahmad
quelle
2

Am häufigsten wird Folgendes verwendet:

$("input[name='varname[]']").map( function(key){
    console.log(key+':'+$(this).val());
})

Whit, dass Sie den Schlüssel des Array-Besitzes und den Wert erhalten.

hdaleman
quelle
1

Um ein Element anhand eines Attributs mit einem bestimmten Merkmal auszuwählen, können Sie einen neuen Selektor wie im folgenden Snippet mithilfe eines Regex-Musters erstellen. Die Verwendung von Regex soll den neuen Selektor so flexibel wie möglich gestalten:

jQuery.extend(jQuery.expr[':'], {
    nameMatch: function (ele, idx, selector) {
        var rpStr = (selector[3] || '').replace(/^\/(.*)\/$/, '$1');
        return (new RegExp(rpStr)).test(ele.name);
    }
});


//
// use of selector
//
$('input:nameMatch(/^pages_title\\[\\d\\]$/)').each(function(idx, ele) {
  console.log(ele.outerHTML);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" value="2" name="pages_title[1]">
<input type="text" value="1" name="pages_title[2]">
<input type="text" value="1" name="pages_title[]">

Eine andere Lösung kann basieren auf:

  • [name ^ = ”value”] : Wählt Elemente mit dem angegebenen Attribut aus, deren Wert genau mit einer bestimmten Zeichenfolge beginnt.

  • .filter () : Reduzieren Sie den Satz übereinstimmender Elemente auf diejenigen, die dem Selektor entsprechen, oder bestehen Sie den Funktionstest.

  • ein Regex-Muster

var selectedEle = $(':input[name^="pages_title"]').filter(function(idx, ele) {
    //
    // test if the name attribute matches the pattern.....
    //
    return  /^pages_title\[\d\]$/.test(ele.name);
});
selectedEle.each(function(idx, ele) {
    console.log(ele.outerHTML);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" value="2" name="pages_title[1]">
<input type="text" value="1" name="pages_title[2]">
<input type="text" value="1" name="pages_title[]">

gaetanoM
quelle