jquery mendapatkan semua elemen formulir: input, textarea & pilih

108

Apakah ada cara mudah (tanpa mencantumkan semuanya secara terpisah) di jquery untuk memilih semua elemen formulir dan hanya elemen formulir.

Saya tidak dapat menggunakan children () dll karena formulir berisi HTML lain.

Misalnya:

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

Jawaban:

179

Edit: Seperti yang ditunjukkan dalam komentar ( Mario Awad & Brock Hensley ), gunakan .finduntuk mendapatkan anak-anak

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

formulir juga memiliki kumpulan elemen, terkadang ini berbeda dari anak-anak seperti ketika tag formulir ada di dalam tabel dan tidak ditutup.


Mungkin : pemilih masukan adalah yang Anda inginkan

$ ("form"). each (function () {$ (': input', this) // <- Harus mengembalikan semua elemen input dalam bentuk spesifik tersebut.});

Seperti yang ditunjukkan di dokumen

Untuk mencapai performa terbaik saat menggunakan: input untuk memilih elemen, pertama-tama pilih elemen menggunakan pemilih CSS murni, lalu gunakan .filter (": input").

Anda dapat menggunakan seperti di bawah ini,

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

Selvakumar Arumugam
sumber
3
Terima kasih meskipun setelah membaca: kinerja api.jquery.com/input-selector menjadi masalah saya mungkin juga mencantumkannya. Baik untuk mengetahui kemungkinannya
John Magnolia
8
Apakah hanya saya atau apakah ini tidak berhasil select? EDIT: tidak masalah, berfungsi dengan pilih jika saya menggunakanfind(':input')
Brock Hensley
1
Anda harus menggunakan "temukan" daripada "filter" di sini karena "filter" tidak dapat bekerja pada satu elemen (dalam hal ini elemen "ini"). Dengan menggunakan "filter", Anda tidak akan dapat memilih elemen formulir apa pun dan tidak hanya elemen "memilih". Terima kasih untuk @Brock Hensley karena telah menunjukkan hal ini.
Mario Awad
Bagaimana dengan bentuk yang besar? Saya memiliki bentuk yang sangat besar dengan lebih dari 4000+ elemen di dalamnya, dan selektor ini sangat lambat. Dalam spesifikasi tertulis bahwa: input tidak dioptimasi browser oleh CSS3, jadi tidak bekerja untuk saya: /. Ada ide lain?
Vasil Popov
@VasilPopov Hal di atas mungkin terlalu lambat untuk Anda. Anda dapat mencoba beberapa solusi, dengan cara apa pun Anda perlu mengelompokkan lebih sedikit elemen dan memilihnya.
Selvakumar Arumugam
52

Kode di bawah ini membantu mendapatkan detail elemen dari formulir tertentu dengan id formulir,

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

Kode di bawah ini membantu untuk mendapatkan rincian elemen dari semua formulir yang ditempatkan di halaman pemuatan,

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

Kode di bawah ini membantu untuk mendapatkan detail elemen yang ditempatkan di halaman pemuatan meskipun elemen tidak ditempatkan di dalam tag,

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

CATATAN: Kami menambahkan lebih banyak nama tag elemen apa yang kami butuhkan dalam daftar objek seperti di bawah ini,

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());
    }
);
Srinivasan.S
sumber
Mengapa ini mengambil semua nilai dan opsi dari elemen pilih, daripada memberikan nilai sesuatu yang telah dipilih atau kosong. ?
pengguna2906838
11

Jika Anda memiliki jenis tambahan, edit pemilih:

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

Semua elemen formulir sekarang berada dalam elemen bentuk array.

sirkusdei
sumber
7

Sebagai catatan : Cuplikan berikut dapat membantu Anda mendapatkan detail tentang input, textarea, pilih, tombol, tag melalui judul sementara saat mengarahkannya.

masukkan deskripsi gambar di sini

$( '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 );
    } )
} );
Igor Parra
sumber
Fungsi yang bagus! Terima kasih
Mohamad Hamouday
6

jQuery menyimpan referensi ke elemen formulir vanilla JS, dan ini berisi referensi ke semua elemen anak formulir. Anda cukup mengambil referensi dan melanjutkan:

var someForm = $('#SomeForm');

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

Fungsi serialisasi JQuery membuatnya cukup mudah untuk mendapatkan semua elemen formulir.

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
Avnish alok
sumber
5

Ini adalah fungsi favorit saya dan berfungsi seperti pesona bagi saya!

Ini mengembalikan objek dengan semua untuk input, pilih dan data textarea.

Dan itu mencoba untuk mendapatkan nama objek dengan mencari nama elemen lain Id kelas lain.

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

Fungsi:

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;
}
Mohamad Hamouday
sumber
Bagus tapi ada bug halus di "Element_Value = jQuery ('input [name ="' + Element_Name + '"]: diperiksa'). Val ();". Element_Name mungkin sebenarnya adalah id atau kelas node, dalam hal ini elemen tidak akan ditemukan.
Rafael Werlang
1
Benar, sekarang saya sudah memperbaikinya!
Mohamad Hamouday
4
var $form_elements = $("#form_id").find(":input");

Semua elemen termasuk tombol kirim sekarang ada di variabel $ form_elements.

Jan
sumber
2
Bagaimana Anda mengaksesnya?
Ngenazy
3

Hanya untuk menambahkan cara lain:

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

Coba fungsi ini

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

Dan gunakan sebagai

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

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

Nikmati :)

Ahmed Jamal
sumber
0

Coba sesuatu seperti ini:

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

Perhatikan penggunaan input []

Srinath Shah
sumber
ini sepertinya tidak mendapatkan textareas atau pilihan
pcarvalho
0

semua masukan:

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

semua tombol

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