Wenn es nur ein Eingabeelement gibt, kann ich Folgendes verwenden:

$("input").val()

Ich weiß, dass .val() den Wert des value-Attributs des ersten übereinstimmenden Elements zurückgibt.

Aber was ist, wenn es mehrere Eingänge gibt?

2
Maor P 18 Apr. 2018 im 15:50

6 Antworten

Beste Antwort

Während die anderen Antworten auf diese Frage technisch korrekt sind, ist es sehr schlecht, Ihre Formulare und Skripte auf diese Weise zu entwerfen. Es ist zerbrechlich und schwer zu pflegen. Wenn sich die Anzahl der Eingabefelder oder die Reihenfolge dieser Felder jemals ändert, wird Ihr Code unterbrochen. Wenn Sie beispielsweise später ein Suchfeld zur Vorlage Ihrer Website hinzufügen möchten, werden die Indizes aller Ihrer Eingabefelder um eins erhöht und alles wird beschädigt.

Ich würde vorschlagen, dass Sie Ihre Formularfelder mit einem Namen oder einer ID versehen, damit jedes einen eindeutigen Zweck erfüllt und von jQuery leicht gefunden werden kann. Wenn Ihre Formularfelder bereits Namen haben (und dies sollte der Fall sein, wenn Sie ein herkömmliches HTML-Formular mit GET oder POST verwenden), können Sie diese verwenden. Sie können ihnen auch eindeutige IDs geben.

<input name="Input1" id="MyInput1" value="" >
<input name="Input2" id="MyInput2" value="" >
var input1 = $("#MyInput1").val(); // Get by ID
var input2 = $("[name=Input2]").val(); // Get by input's name

Wenn Sie mehrere Formulare pro Seite haben, ändert sich die Best Practice erneut geringfügig, aber ich werde darauf nur näher eingehen, wenn Sie dies benötigen.

Ich hoffe, dies hilft Ihnen, das Gesamtbild zu sehen, damit Sie bessere Formen entwickeln können.

2
BoffinBrain 18 Apr. 2018 im 13:25
$('input').each(function(i, inputElement){
     console.log($(inputElement).val());
 })

Der zweite Parameter ist nicht der Wert, sondern das inputElement. Sie müssen ihn erneut in $ () einschließen, um mit .val () arbeiten zu können.

1
b3nc1 18 Apr. 2018 im 12:57

Sie müssen die CSS-Pseudoklasse :nth-child verwenden und dann das erste Element abrufen https://developer.mozilla.org/fr/docs/Web / CSS /: n-tes Kind

var element = $("input:nth-child(5n)").first();
1
Christophe Debove 18 Apr. 2018 im 13:03

Bei mehreren Übereinstimmungen gibt jQuery ein (nullbasiertes) Array übereinstimmender Elemente zurück.

Wenn Sie also speziell auf den Wert des zweiten Eingabeelements zugreifen möchten, können Sie dies folgendermaßen tun:

$("input")[1].value

Beachten Sie, dass Sie hier auf ein Array von DOM-Elementen zugreifen, nicht auf jQuery-Objekte. Sie können also nicht .val() verwenden, sondern müssen die value-Eigenschaft des Elements verwenden.

Um ein jQuery-Objekt des n-ten Elements zu erhalten, können Sie den Selektor jQuery's: eq () wie folgt verwenden:

$("input:eq(1)").val()

https://api.jquery.com/eq-selector/

1
beercohol 18 Apr. 2018 im 13:11

Wenn Sie ein Formular haben, können Sie auf diese Weise das gesamte Eingabeelement dieses Formulars abrufen und dann nur deren Wert abrufen.

$("form").each(function(){
$(this).find(':input') //<-- Should return all input elements in that specific form.
});
0
mayank jain 18 Apr. 2018 im 12:52

Eine einfache Möglichkeit ist eine Schleife, um jeden Wert zu finden:

 $('input').each(function(i, value){
      // i = index value for each input
      // value = actual value 
 })
0
Keith 18 Apr. 2018 im 12:53