jquery get all input from specific form

Is there any ways to populate all of the input from certain form? let say, some thing like this:

<form> <input type="text" name="whatever" value="whatever" /> <div> <input type="checkbox" name="whatever" value="whatever" /> </div> <table><tr><td> <input type="hidden" name="whatever" value="whatever" /> <input type="submit" value="qweqsac" /> </td></tr></table> </form> <form> <div> <input type="text" name="whatever" value="whatever" /> <input type="checkbox" name="whatever" value="whatever" /> </div> <table><tr><td> <input type="hidden" name="whatever" value="whatever" /> </td></tr></table> <select>blah...</select> <input type="submit" value="qweqsac" /> </form> etc forms... forms... 

*note: each form might have a different amount of input and type and also different html structure

so is there any way to populate the input from certain form id? eg if i click submit button from certain form id, then jquery will populate for me all of the input within those form id. currently what i'm doing is like this:

$("form").submit(function(){ return validateForm($(this)) }); function validateForm(form){ var retVal = true; var re; $.each(form.serializeArray(), function(i, field) { var input = $('input[name='+field.name+']'); field.value = $.trim(field.value); switch(field.name){ case "name" : and another cases... } }) } 

that was work, but in that case, i only get the field.name and field.value, and actually what i want is, i want a jquery object for each input element, so i can access their css, id, name, and even animate those input element

is there any way for this?

please let me know and thank you in advance! AnD

4 Answers

To iterate through all the inputs in a form you can do this:

$("form#formID :input").each(function(){ var input = $(this); // This is the jquery object of the input, do what you will }); 

This uses the jquery :input selector to get ALL types of inputs, if you just want text you can do :

$("form#formID input[type=text]")//... 

etc.

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

Use HTML Form "elements" attribute:

$.each($("form").elements, function(){ console.log($(this)); }); 

Now it's not necessary to provide such names as "input, textarea, select ..." etc.

$(document).on("submit","form",function(e){ //e.preventDefault(); $form = $(this); $i = 0; $("form input[required],form select[required]").each(function(){ if ($(this).val().trim() == ''){ $(this).css('border-color', 'red'); $i++; }else{ $(this).css('border-color', ''); } }) if($i != 0) e.preventDefault(); }); $(document).on("change","input[required]",function(e){ if ($(this).val().trim() == '') $(this).css('border-color', 'red'); else $(this).css('border-color', ''); }); $(document).on("change","select[required]",function(e){ if ($(this).val().trim() == '') $(this).css('border-color', 'red'); else $(this).css('border-color', ''); });