Jquery get all data from a specific form

Question

Is there a way to fill in all the data from a specific form? let's say something like this:

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

* Note: each form may have a different input size and type, as well as a different HTML structure

so is there a way to populate input from a specific form id? for example, if I click the Submit button from a specific form identifier, then jquery will fill for me the entire input within that form identifier. I am currently doing it 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... } }) } 

it was work, but in this case I only get field.name and field.value, and actually what I want, I want a jquery object for each input element, so I can access their css, id, name and even animate this input element

is there any way for this?

please let me know well in advance! AND

Answer 1

To iterate over 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 jquery : an input selector to get ALL input types if you just want text you can do:

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

and etc.

Answer 2

The following code helps you get the details of elements from a specific form with a form identifier,

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

The following code helps get the details of the elements from all the forms that are on the download page,

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

The code below helps you get the details of the elements that are on the download page, even if the element is not 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 more element tag tags that we need in the list of objects, as shown 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()); } ); 

Answer 3

Use the "Elements" attribute of an HTML form:

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

Now there is no need to provide names such as "input, text field, selection ...", etc.