web-dev-qa-db-fra.com

Comment sélectionner un élément de formulaire spécifique dans jQuery?

J'ai deux forme comme ça:

<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>

Maintenant, je veux insérer du texte dans le nom du champ de form2 . J'utilise suivant le code jQuery mais il remplit le nom du champ form1 .

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

Alors, comment sélectionner uniquement des éléments de formulaire spécifiques?

jqueryjquery-selectors
63
Awan

Il n'est pas valide d'avoir le même identifiant deux fois, c'est pourquoi #name ne trouve que le premier.

Tu peux essayer:

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

Ou,

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

Si vous êtes bloqué avec une page non valide et souhaitez sélectionner tous les #names, vous pouvez utiliser le sélecteur d'attribut sur l'id:

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

bien que ce soit du code HTML invalide, mais vous pouvez utiliser le contexte de sélecteur pour limiter votre sélecteur dans votre cas, cela ressemblerait à ceci:

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

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

8
tawfekov

Je préfère un sélecteur d'identifiant descendant de votre # form2, comme ceci:

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

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

5
Marcos Sedrez

Je sais que la question concerne la définition d'une entrée, mais juste au cas où vous voudriez définir une liste déroulante alors (je cherche net et je n'ai rien trouvé et cet endroit semble être un bon endroit pour guider les autres)

Si vous aviez un formulaire avec un ensemble d'attributs d'identifiant (par exemple, frm1) et que vous souhaitiez définir une liste déroulante spécifique, avec aucun ensemble d'identifiant mais d'attribut de nom (par exemple, district); puis utiliser

$("#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>
2
Adeel Raza Azeemi