Wie wähle ich ein bestimmtes Formularelement in jQuery aus?

72

Ich habe zwei Formen wie diese:

<form id='form1' name='form1'>
  <input name='name' id='name'>
  <input name='name2' id='name2'>
</form>

<form id='form2' name='form2'>
  <input name='name' id='name'>
  <input name='name2' id='name2'>
</form>

Jetzt möchte ich Text in einfügen Namen Feld form2 . Ich verwende folgenden jQuery - Code , aber es füllt Namen Feld form1 .

$("#name").val('Hello World!');

Wie wählt man also nur bestimmte Formularelemente aus?

jquery jquery-selectors

— Awan
quelle

136

Es ist nicht gültig, dieselbe ID zweimal zu haben, deshalb wird #namenur die erste gefunden.

Du kannst es versuchen:

$("#form2 input").val('Hello World!');

Oder,

$("#form2 input[name=name]").val('Hello World!');

Wenn Sie mit einer ungültigen Seite nicht weiterkommen und alle #names auswählen möchten , können Sie die Attributauswahl für die ID verwenden:

$("input[id=name]").val('Hello World!');

— Kobi
quelle

+1 Danke. Eine weitere Sache: Was ist, wenn ich zwei Felder eines bestimmten Formulars mithilfe der Mehrfachauswahl auswählen möchte?

— Awan

4

$( '#formId field1Id, #formId field2Id' )

— Charliegriefer

3

@Awan - Eine andere Option ist $('#form2 input')für alle Eingabefelder, oder$('#form2 input').filter('[name=name1], [name=name2]')

— Kobi

@charliegriefer, @Kobi: Danke

— Awan

@charliegriefer - natürlich brauchst du #field1Idund #field2Id, und ich bin mir nicht sicher, wie sich das mit doppelten IDs verhalten würde.

— Kobi

8

Es ist zwar ein ungültiges HTML, aber Sie können den Selektorkontext verwenden, um Ihren Selektor in Ihrem Fall einzuschränken.

$("input[name='name']" , "#form2").val("Hello World! ");

http://api.jquery.com/jquery/#selector-context

— tawfekov
quelle

3

Es ist erwähnenswert, dass $('input[name=name]','#form2').val('Hello World!');intern von jQuery nach übersetzt wird $('#form2').find('input[name=name]').val('Hello World!')(siehe: jQuery API für Details.)

— David sagt, Monica

Sie haben die Anführungszeichen im Namensteil vergessen. Ohne sie erhalte ich einen Syntaxfehler

— Piotr Kula

6

Ich bevorzuge einen ID-Nachkommen-Selektor Ihrer # form2 wie folgt:

$("#form2 #name").val("Hello World!");

http://api.jquery.com/descendant-selector/

— Marcos Sedrez
quelle

2

Ich weiß, dass es bei der Frage darum geht, eine Eingabe festzulegen, aber nur für den Fall, dass Sie eine Combobox festlegen möchten (ich suche im Netz danach und habe nichts gefunden, und dieser Ort scheint der richtige Ort zu sein, um andere zu führen).

Wenn Sie ein Formular mit festgelegtem ID-Attribut (z. B. frm1) hatten und eine bestimmte Combobox festlegen möchten, ohne dass eine ID festgelegt wurde, sondern ein Namensattribut festgelegt wurde (z. B. Bezirk); dann benutze

$("#frm1 select[name='district'] option[value='NWFP']").attr('selected', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <form id="frm1">
        <select name="district">
            <option value="" disabled="" selected="" hidden="">Area ...</option>
            <option value="NWFP">NWFP</option>
            <option value="FATA">FATA</option>
        </select>
    </form>

Erweitern Sie das Snippet

— Adeel Raza Azeemi
quelle

-2

$("#name", '#form2').val("Hello World")

— bbbbb
quelle