Как найти все input jquery

asked Oct 12, 2012 at 15:41

Edit: As pointed out in comments (Mario Awad & Brock Hensley), use .find to get the children

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

forms also have an elements collection, sometimes this differs from children such as when the form tag is in a table and is not closed.

May be :input selector is what you want

$(«form»).each(function(){
$(‘:input’, this)//<— Should return all input elements in that specific form.
});

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

The below code helps to get the details of elements from the specific form with the form id,

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

The below code helps to get the details of elements from all the forms which are place in the loading page,

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

The below code helps to get the details of elements which are place in the loading page even when the element is not place inside the tag,

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

NOTE: We add the more element tag name what we need in the object list like as below,

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

answered Apr 22, 2019 at 9:25

jQuery keeps a reference to the vanilla JS form element, and this contains a reference to all of the form’s child elements. You could simply grab the reference and proceed forward:

var someForm = $('#SomeForm');

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

answered Mar 9, 2014 at 23:45

For the record: The following snippet can help you to get details about input, textarea, select, button, a tags through a temp title when hover them.

$( '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 +=
            "nnFORM 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:nt" + 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 );
    } )
} );

answered Jul 26, 2015 at 15:43

This is my favorite function and it works like a charm for me!

It returns an object with all for input, select and textarea data.

And it’s trying to getting objects name by look for elements name else Id else class.

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

Function:

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

answered Jun 10, 2017 at 21:10

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

All the elements including the submit-button are now in the variable $form_elements.

answered Jun 29, 2013 at 13:17

MarcoMarco

3,4204 gold badges23 silver badges34 bronze badges

Try something like this:

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

Note the use of input[]

answered Oct 29, 2018 at 3:41

D.L.MAND.L.MAN

97012 silver badges17 bronze badges

// use query selector instead
const nodes = document.querySelectorAll(
  ":where(button,fieldset,input,object,output,select,textarea)"
);
console.log({ nodes });

<div>
  <input type="text" id="name" name="name" value="bob">
</div>
<div>
  <textarea name="textarea" rows="10" cols="50">Write something here</textarea>
</div>

bristwebbristweb

83714 silver badges11 bronze badges