jquery get all input from specific form

Question

Is there any ways to populate all of the input from certain form? let say, some thing 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 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

TJB · Accepted Answer · 2011-07-26T22:12:55.160

206

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.

edited Jul 26 '11 at 22:12

answered Nov 27 '10 at 09:52

TJB

13,367
4
34
46

3

I think :input works for that but otherwise you could do: `$("form#formID input[type=text],form#formID select")` – TJB Nov 27 '10 at 21:29
Note typo in your first answer above. $("from should be $("form – Mitch Jul 22 '11 at 14:38
1

`$("form#formID :input").each` outputs `input` type, `select` type and even `button` type inputs. At least it does in my code. – TARKUS Jul 11 '15 at 14:04
3

@TARKUS `input` vs `:input`. $(":input") selects all jQuery form elements. $("input") selects input tags only. – Johnathan Elmore Oct 18 '16 at 16:29

score 30 · Answer 2 · edited Feb 22 '16 at 05:51

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

I am not getting value of text using this input.val().. can you help me in that ? — DhavalThakor, Mar 28 '18 at 08:56

score 3 · Answer 3 · edited May 19 '18 at 11:02

3

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.

edited May 19 '18 at 11:02

Abdelsalam Shahlol

1,621
1
20
31

answered Mar 27 '15 at 15:19

Markoj

233
2
7

Dooh! --way too much info. Try a more quickerer way of seeing form info $("form:input").each(function(index) { console.log(index, this.type, this.id, this.name, this.value, this.placeholder ); } ); – Jules Bartow Nov 20 '16 at 14:47

score 0 · Answer 4 · answered Jan 12 '21 at 16:17

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

jquery get all input from specific form

4 Answers4

Linked