Comment puis-je obtenir tous les éléments de formulaire (input, textarea & select) avec jQuery ?

Question

Existe-t-il un moyen simple (sans les énumérer tous séparément) dans jquery pour sélectionner tous les éléments de formulaire et seulement les éléments de formulaire.

Je ne peux pas utiliser children() etc. car le formulaire contient d'autres éléments HTML.

Par exemple

$("form").each(function(){
    let $inputs = $("input, textarea, select", this);
});

Answer 1

Edit : Comme le soulignent les commentaires ( Mario Awad & Brock Hensley ), utilisez .find pour que les enfants

$("form").each(function(){
    $(this).find(':input') //<-- Should return all input elements in that specific form.
});

Les formulaires ont également une collection d'éléments, parfois différente des enfants, par exemple lorsque la balise du formulaire se trouve dans un tableau et n'est pas fermée.

var summary = [];
$('form').each(function () {
    summary.push('Form ' + this.id + ' has ' + $(this).find(':input').length + ' child(ren).');
    summary.push('Form ' + this.id + ' has ' + this.elements.length + ' form element(s).');
});

$('#results').html(summary.join('<br />'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="A" style="display: none;">
    <input type="text" />
    <button>Submit</button>
</form>
<form id="B" style="display: none;">
    <select><option>A</option></select>
    <button>Submit</button>
</form>

<table bgcolor="white" cellpadding="12" border="1" style="display: none;">
<tr><td colspan="2"><center><h1><i><b>Login
Area</b></i></h1></center></td></tr>
<tr><td><h1><i><b>UserID:</b></i></h1></td><td><form id="login" name="login" method="post"><input
name="id" type="text"></td></tr>
<tr><td><h1><i><b>Password:</b></i></h1></td><td><input name="pass"
type="password"></td></tr>
<tr><td><center><input type="button" value="Login"
onClick="pasuser(this.form)"></center></td><td><center><br /><input
type="Reset"></form></td></tr></table></center>
<div id="results"></div>

---

Peut être :input le sélecteur est ce que vous voulez

$("form").each(function(){ $(':input', this)//<-- Devrait retourner tous les éléments d'entrée dans ce formulaire spécifique. }) ;

~~Comme indiqué dans la documentation

Pour obtenir les meilleures performances lorsque vous utilisez :input pour sélectionner des éléments, sélectionnez d'abord les éléments à l'aide d'un sélecteur CSS pur, puis utilisez .filter(":input").

Vous pouvez utiliser comme ci-dessous,

$("form").each(function(){
    $(this).filter(':input') //<-- Should return all input elements in that specific form.
});~~

Answer 2

Le code ci-dessous permet d'obtenir les détails des éléments du formulaire spécifique avec l'identifiant du formulaire,

$('#formId input, #formId select').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
);

Le code ci-dessous permet d'obtenir les détails des éléments de tous les formulaires qui sont placés dans la page de chargement,

$('form input, form select').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
);

Le code ci-dessous permet d'obtenir les détails des éléments qui sont placés dans la page de chargement même si l'élément n'est pas placé à l'intérieur de la balise,

$('input, select').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
);

NOTE : Nous ajoutons le nom du tag more element dont nous avons besoin dans la liste des objets comme ci-dessous,

Example: to get name of attribute "textarea",

$('input, select, textarea').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
);

Answer 3

Si vous avez des types supplémentaires, modifiez le sélecteur :

var formElements = new Array();
$("form :input").each(function(){
    formElements.push($(this));
});

Tous les éléments du formulaire sont maintenant dans le tableau formElements.

Answer 4

JQuery sérialiser función permet d'obtenir assez facilement tous les éléments du formulaire.

Démonstration : http://jsfiddle.net/55xnJ/2/

$("form").serialize(); //get all form elements at once 

//result would be like this:
single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1

Pour aller plus loin dans cette idée, vous pouvez utiliser quelque chose comme ceci pour rendre tous les éléments du formulaire accessibles.

Data = $('form').serialize().split('&');

for(i in Data){
    Data[i] = Data[i].split('=');
    Fields[ Data[i][0] ] = [ Data[i][1],
                             $('form *[name="' + Data[i][0] + '"]').eq(0) ];
}

console.log(Fields);

// The result would be a multi-dimensional array you could loop through
Fields[Field_Name] = [Field_Value, Field_Object]

Remarque : cela ne fonctionnera qu'avec des champs nommés, car serialize() ignorera tous les autres. Les champs dont les noms sont dupliqués seront ignorés. Vous pouvez créer un tableau multidimensionnel si plusieurs champs portent le même nom.

Answer 5

JQuery conserve une référence à l'élément de formulaire vanilla JS, qui contient une référence à tous les éléments enfants du formulaire. Vous pouvez simplement saisir la référence et poursuivre votre travail :

var someForm = $('#SomeForm');

$.each(someForm[0].elements, function(index, elem){
    //Do something here.
});