jquery tüm form öğelerini alır: girdi, metin alanı ve seçim

Jquery'de tüm form öğelerini ve yalnızca form öğelerini seçmenin kolay bir yolu var mı (hepsini ayrı ayrı listelemeden).

Form başka HTML içerdiğinden child () vb. Kullanamıyorum.

Örneğin:

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

Düzenleme: Yorumlarda belirtildiği gibi ( Mario Awad & Brock Hensley ), .findçocukları almak için kullanın

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

formlar ayrıca bir öğe koleksiyonuna sahiptir, bazen bu, form etiketi bir tablodayken ve kapalı olmadığında olduğu gibi alt öğeden farklıdır.

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>

Olabilir : giriş seçici istediğiniz şeydir

$ ("form"). each (function () {$ (': input', this) // <- Bu belirli formdaki tüm girdi öğelerini döndürmelidir.});

Dokümanlarda belirtildiği gibi

Öğeleri seçmek için girdi kullanırken en iyi performansı elde etmek için, önce öğeleri saf bir CSS seçici kullanarak seçin, ardından .filter (": input") kullanın.

Aşağıdaki gibi kullanabilirsiniz,

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

Aşağıdaki kod, form kimliğine sahip belirli formdaki öğelerin ayrıntılarını almaya yardımcı olur,

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

Aşağıdaki kod, yükleme sayfasında yer alan tüm formlardan öğelerin detaylarının alınmasına yardımcı olur,

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

Aşağıdaki kod, öğe etiketin içine yerleştirilmediğinde bile yükleme sayfasına yerleştirilen öğelerin ayrıntılarının alınmasına yardımcı olur,

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

NOT: Nesne listesine ihtiyacımız olan daha fazla element etiketi adını aşağıdaki gibi ekliyoruz,

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

Ek türleriniz varsa, seçiciyi düzenleyin:

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

Tüm form öğeleri artık formElements dizisi içindedir.

Kayıt için : Aşağıdaki kod parçası, üzerine geldiğinizde geçici bir başlık aracılığıyla giriş, metin alanı, seç, düğme, etiketler hakkında ayrıntıları almanıza yardımcı olabilir .

$( '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, vanilla JS form öğesine bir başvuru tutar ve bu, formun tüm alt öğelerine bir başvuru içerir. Sadece referansı alıp devam edebilirsiniz:

var someForm = $('#SomeForm');

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

JQuery serileştirme işlevi , tüm form öğelerini almayı oldukça kolaylaştırır.

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

Bu benim en sevdiğim işlev ve benim için bir cazibe gibi çalışıyor!

Tüm girdi, seçim ve metin alanı verileri için bir nesne döndürür.

Ve o, else Id else sınıf ismini arayarak nesnelerin ismini almaya çalışıyor.

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

İşlev:

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

Gönder düğmesi dahil tüm öğeler artık $ form_elements değişkenindedir.

Sadece başka bir yol eklemek için:

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

Bu işlevi deneyin

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

Ve olarak kullan

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

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

Zevk almak :)

Bunun gibi bir şey dene:

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

[] Girişinin kullanımına dikkat edin

tüm girişler:

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

tüm düğmeler

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