jquery récupère tous les éléments du formulaire: input, textarea & select

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 uniquement les éléments de formulaire.

Je ne peux pas utiliser children (), etc. car le formulaire contient un autre HTML.

Par exemple:

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

Edit: Comme indiqué dans les commentaires ( Mario Awad & Brock Hensley ), utilisez .findpour obtenir 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 cela diffère des enfants, par exemple lorsque la balise de formulaire est dans une table 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 : le sélecteur d' entrée est ce que vous voulez

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

Comme indiqué dans la documentation

Pour obtenir les meilleures performances lors de l'utilisation de: input pour sélectionner des éléments, sélectionnez d'abord les éléments en utilisant un pur sélecteur CSS, 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.
});

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 lorsque 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());
    }
);

REMARQUE: nous ajoutons le nom de balise d'élément supplémentaire dont nous avons besoin dans la liste d'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());
    }
);

Si vous disposez de types supplémentaires, modifiez le sélecteur:

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

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

Pour mémoire : l'extrait de code suivant peut vous aider à obtenir des détails sur l'entrée, la zone de texte, la sélection, le bouton, les balises via un titre temporaire lorsque vous les survolez.

$( 'body' ).on( 'mouseover', 'input, textarea, select, button, a', function() {
    var $tag = $( this );
    var $form = $tag.closest( 'form' );
    var title = this.title;
    var id = this.id;
    var name = this.name;
    var value = this.value;
    var type = this.type;
    var cls = this.className;
    var tagName = this.tagName;
    var options = [];
    var hidden = [];
    var formDetails = '';

    if ( $form.length ) {
        $form.find( ':input[type="hidden"]' ).each( function( index, el ) {
            hidden.push( "\t" + el.name + ' = ' + el.value );
        } );

        var formName = $form.prop( 'name' );
        var formTitle = $form.prop( 'title' );
        var formId = $form.prop( 'id' );
        var formClass = $form.prop( 'class' );

        formDetails +=
            "\n\nFORM NAME: " + formName +
            "\nFORM TITLE: " + formTitle +
            "\nFORM ID: " + formId +
            "\nFORM CLASS: " + formClass +
            "\nFORM HIDDEN INPUT:\n" + hidden.join( "\n" );
    }

    var tempTitle =
        "TAG: " + tagName +
        "\nTITLE: " + title +
        "\nID: " + id +
        "\nCLASS: " + cls;

    if ( 'SELECT' === tagName ) {
        $tag.find( 'option' ).each( function( index, el ) {
            options.push( el.value );
        } );

        tempTitle +=
            "\nNAME: " + name +
            "\nVALUE: " + value +
            "\nTYPE: " + type +
            "\nSELECT OPTIONS:\n\t" + options;

    } else if ( 'A' === tagName ) {
        tempTitle +=
            "\nHTML: " + $tag.html();

    } else {
        tempTitle +=
            "\nNAME: " + name +
            "\nVALUE: " + value +
            "\nTYPE: " + type;
    }

    tempTitle += formDetails;

    $tag.prop( 'title', tempTitle );
    $tag.on( 'mouseout', function() {
        $tag.prop( 'title', title );
    } )
} );

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

var someForm = $('#SomeForm');

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

La fonction de sérialisation de JQuery facilite l'obtention de tous les éléments du formulaire.

Démo: 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

C'est ma fonction préférée et cela fonctionne comme un charme pour moi!

Il renvoie un objet avec tout pour les données d'entrée, de sélection et de zone de texte.

Et il essaie d'obtenir le nom des objets en recherchant les éléments name else Id else class.

var All_Data = Get_All_Forms_Data();
console.log(All_Data);

Fonction:

function Get_All_Forms_Data(Element)
{
    Element = Element || '';
    var All_Page_Data = {};
    var All_Forms_Data_Temp = {};
    if(!Element)
    {
        Element = 'body';
    }

    $(Element).find('input,select,textarea').each(function(i){
        All_Forms_Data_Temp[i] = $(this);
    });

    $.each(All_Forms_Data_Temp,function(){
        var input = $(this);
        var Element_Name;
        var Element_Value;

        if((input.attr('type') == 'submit') || (input.attr('type') == 'button'))
        {
            return true;
        }

        if((input.attr('name') !== undefined) && (input.attr('name') != ''))
        {
            Element_Name = input.attr('name').trim();
        }
        else if((input.attr('id') !== undefined) && (input.attr('id') != ''))
        {
            Element_Name = input.attr('id').trim();
        }
        else if((input.attr('class') !== undefined) && (input.attr('class') != ''))
        {
            Element_Name = input.attr('class').trim();
        }

        if(input.val() !== undefined)
        {
            if(input.attr('type') == 'checkbox')
            {
                Element_Value = input.parent().find('input[name="'+Element_Name+'"]:checked').val();
            }
            else if((input.attr('type') == 'radio'))
            {
                Element_Value = $('input[name="'+Element_Name+'"]:checked',Element).val();
            }
            else
            {
                Element_Value = input.val();
            }
        }
        else if(input.text() != undefined)
        {
            Element_Value = input.text();
        }

        if(Element_Value === undefined)
        {
            Element_Value = '';
        }

        if(Element_Name !== undefined)
        {
            var Element_Array = new Array();
            if(Element_Name.indexOf(' ') !== -1)
            {
                Element_Array = Element_Name.split(/(\s+)/);
            }
            else
            {
                Element_Array.push(Element_Name);
            }

            $.each(Element_Array,function(index, Name)
            {
                Name = Name.trim();
                if(Name != '')
                {
                    All_Page_Data[Name] = Element_Value;
                }
            });
        }
    });
    return All_Page_Data;
}

var $form_elements = $("#form_id").find(":input");

Tous les éléments, y compris le bouton d'envoi, sont maintenant dans la variable $ form_elements.

Juste pour ajouter une autre manière:

$('form[name=' + formName + ']').find(':input')

Essayez cette fonction

function fieldsValidations(element) {
    var isFilled = true;
    var fields = $("#"+element)
        .find("select, textarea, input").serializeArray();

    $.each(fields, function(i, field) {
        if (!field.value){
            isFilled = false;
            return false;
        }
    });
    return isFilled;
}

Et utilisez-le comme

$("#submit").click(function () {

    if(fieldsValidations('initiate')){
        $("#submit").html("<i class=\"fas fa-circle-notch fa-spin\"></i>");
    }
});

Prendre plaisir :)

Essayez quelque chose comme ceci:

<form action="/" id="searchForm">
<input type="text" name="s" placeholder="Search...">
<input type="submit" value="Search">
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>

<script>
// Attach a submit handler to the form
$( "#searchForm" ).submit(function( event ) {

  // Stop form from submitting normally
event.preventDefault();

// Get some values from elements on the page:
var $form = $( this ),
term = $form.find( "input[name='s']" ).val(),
url = $form.attr( "action" );

// Send the data using post
var posting = $.post( url, { s: term } );

// Put the results in a div
posting.done(function( data ) {
  var content = $( data ).find( "#content" );
  $( "#result" ).empty().append( content );
    });
  });
</script>

Notez l'utilisation de l'entrée []

toutes les entrées:

var inputs = $("#formId :input");

tous les boutons

var button = $("#formId :button")