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

Pour mémoire : L'extrait suivant peut vous aider pour obtenir des détails sur l'entrée, la zone de texte, la sélection, le bouton, l'a par un titre temporaire lorsqu'on les survole.

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

Answer 2

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

Il renvoie un objet contenant toutes les données de saisie, de sélection et de zone de texte.

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

var form_data = get_form_data();
console.log(form_data);

Fonction :

function get_form_data(element){
    element = element || '';
    var all_page_data = {};
    var all_forms_data_temp = {};
    if(!element){
        element = 'body';
    }

    if($(element)[0] == undefined){
        return null;
    }

    $(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;
}

Answer 3

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

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

Answer 4

Juste pour ajouter un autre moyen :

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

Answer 5

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 l'utiliser comme

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

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

Profitez-en :)