Wie erhalte ich alle Formularelemente (Eingabe, Textbereich & Auswahl) mit jQuery?

Gibt es eine einfache Möglichkeit (ohne sie alle separat aufzulisten) in jquery, alle Formularelemente und nur Formularelemente auszuwählen.

Ich kann children() usw. nicht verwenden, da das Formular anderes HTML enthält.

Z.B:

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

Bearbeiten: Wie in den Kommentaren (Mario Awad & Brock Hensley) erwähnt, verwenden .find um die Kinder zu bekommen

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

Formulare haben auch eine Elementsammlung, die sich manchmal von untergeordneten Elementen unterscheidet, z. B. wenn sich das Formular-Tag in einer Tabelle befindet und nicht geschlossen ist.

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>

Vielleicht :Eingang Selektor ist, was Sie wollen

$(“form”).each(function(){ $(‘:input’, this)//<-- Sollte alle Eingabeelemente in dieser spezifischen Form zurückgeben. });

Wie in den Dokumenten angegeben

Um die beste Leistung bei der Verwendung von :input zur Auswahl von Elementen zu erzielen, wählen Sie die Elemente zuerst mit einem reinen CSS-Selektor aus und verwenden Sie dann .filter(:input”).

Sie können wie unten verwenden,

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

Der folgende Code hilft, die Details der Elemente aus dem spezifischen Formular mit der Formular-ID abzurufen,

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

Der folgende Code hilft, die Details der Elemente aus allen Formularen zu erhalten, die auf der Ladeseite platziert sind.

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

Der folgende Code hilft, die Details von Elementen zu erhalten, die auf der Ladeseite platziert sind, auch wenn das Element nicht innerhalb des Tags platziert ist.

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

HINWEIS: Wir fügen den mehr Element-Tag-Namen hinzu, den wir in der Objektliste benötigen, wie unten,

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

Wenn Sie weitere Typen haben, bearbeiten Sie den Selektor:

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

Alle Formularelemente befinden sich nun im Array formElements.

JQuery serialisieren Funktion macht es ziemlich einfach, alle Formularelemente zu erhalten.

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

Um diese Idee zu vervollständigen: Sie können so etwas verwenden, um alle Formularelemente zugänglich zu machen.

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]

Hinweis: Dies funktioniert nur mit benannten Feldern, da serialize() alle anderen ignoriert. Alle Felder mit doppelten Namen werden ignoriert. Sie könnten ein mehrdimensionales Array erstellen, wenn mehrere Felder denselben Namen verwenden.

Für das Protokoll: Das folgende Snippet kann Ihnen helfen um Details über Input, Textarea, Select, Button, a zu erhalten Tags durch einen temporären Titel, wenn Sie den Mauszeiger darüber bewegen.

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

Dies ist meine Lieblingsfunktion und sie funktioniert wie ein Zauber für mich!

Es gibt ein Objekt mit allen Daten für Eingabe, Auswahl und Textbereich zurück.

Und es wird versucht, Objektnamen zu erhalten, indem nach Elementen gesucht wird name else Id else class.

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

Funktion:

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

jQuery behält einen Verweis auf das Vanilla-JS-Formularelement, und dieses enthält einen Verweis auf alle untergeordneten Elemente des Formulars. Sie könnten einfach die Referenz greifen und fortfahren:

var someForm = $('#SomeForm');

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