jquery holt alle Formularelemente: Eingabe, Textbereich & Auswahl

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

Ich kann keine Kinder () usw. verwenden, da das Formular anderen HTML-Code enthält.

Z.B:

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

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

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

Formulare verfügen auch über eine Elementsammlung. Manchmal unterscheidet sich diese von untergeordneten Elementen, 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>

Möglicherweise : Eingangsauswahl ist das, was Sie wollen

$ ("form"). each (function () {$ (': input', this) // <- Sollte alle Eingabeelemente in dieser bestimmten Form zurückgeben.});

Wie in den Dokumenten erwähnt

Um die beste Leistung bei 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 dabei, die Details von Elementen 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 dabei, die Details der Elemente aus allen Formularen abzurufen, 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 dabei, die Details der Elemente abzurufen, die auf der Ladeseite platziert sind, auch wenn das Element nicht im Tag 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 der Objektliste den Namen mit mehr Element-Tags hinzu, als wir benötigen:

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 zusätzliche Typen haben, bearbeiten Sie die Auswahl:

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

Alle Formularelemente befinden sich jetzt im Array formElements.

Für die Aufzeichnung : Das folgende Snippet kann Ihnen helfen , Details zu Eingabe, Textbereich, Auswahl, Schaltfläche und Tags durch einen temporären Titel zu erhalten, wenn Sie den Mauszeiger darüber halten.

$( '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 enthält einen Verweis auf das Vanilla JS-Formularelement, der einen Verweis auf alle untergeordneten Elemente des Formulars enthält. Sie können einfach die Referenz abrufen und fortfahren:

var someForm = $('#SomeForm');

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

Mit der JQuery- Serialisierungsfunktion können Sie ganz einfach alle Formularelemente abrufen.

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

Dies ist meine Lieblingsfunktion und es wirkt wie ein Zauber für mich!

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

Und es wird versucht, den Objektnamen zu ermitteln, indem nach dem Elementnamen gesucht wird.

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

Funktion:

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");

Alle Elemente einschließlich der Schaltfläche "Senden" befinden sich jetzt in der Variablen $ form_elements.

Nur um einen anderen Weg hinzuzufügen:

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

Probieren Sie diese Funktion aus

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

Und benutze es als

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

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

Genießen :)

Versuchen Sie so etwas:

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

Beachten Sie die Verwendung von Eingabe []

alle Eingänge:

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

alle Tasten

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