How to make list of all input field in a form with a $() function in jquery?

Question

Hi Friends! My HTML form is something like as follows

<form id="form1" name="form1" method="post" action="">
number: <input name="formnum" type="text" id="input_1" tabindex="1" size="30" maxlength="30" />
Title:
<select name="title" id="input_2" tabindex="2" >
   <option selected="selected" value=""></option>
   <option  value="Mr." id="option_1 ">Mr.</option>
   <option  value="Mrs." id="option_2">Mrs.</option>
   <option  value="Ms." id="option_3">Ms.</option>
   <option  value="Dr." id="option_4">Dr.</option>
</select>
<label> <input type="radio" name="gender" value="Male" id="input_3" tabindex="3"/>Male </label>
<label> <input type="radio" name="gender" value="Female" id="input_3"/> Female</label>
First Name:
<input name="fname" type="text" id="input_5" tabindex="4" value="" size="30" maxlength="30"  />
Last Name:
<input name="lname" type="text" id="input_6" tabindex="5" value="" size="30" maxlength="30"  /> 
Address:
<input name="address" type="text" id="input_7" tabindex="6" value="" size="30" maxlength="30"  />
<input type="submit" name="Submit" value="Submit" tabindex="16" />
<input type="reset" name="Submit2" value="Reset" tabindex="17" />
</form>

I want to make list of all input elements in a form in the sequence they appear in browser on $(document).ready(). I wrote following statement in jQuery to list out the input elements in a form in the sequence they appear in browser:

var textboxes = $("#form1 :input")

1. But this statement gives only list of elements having input tag i.e. all text boxes, radio buttons and submit buttons.
2. It didn’t include the select box, text area, in the given list.

This is my jQuery code:

$(document).ready(function(){

var textboxes = $("#form1 :input"), //gets all the textboxes         
        images = $("img.classforimg");   //gets all the images
    images.hide(); //hide all of them except the first one
alert(textboxes.length);
    textboxes.each(function (i){
                var j = i;
                    $(this).focus(function (){
                images.hide(); //hide all of them except the first one
                                images.eq(0).show();
                images.eq(j).show();
                });
            });

**Here Jquery code for form validation**
**Here Jquery code of Custom validation methods**
});

Questions:

1. How could I get the the list of all elements in the form in the sequence they appear in browser on $(document).ready() including all input text boxes, group of radio buttons, check boxes, select boxes, textareas and buttons?
2. The above statement considers radio buttons in above form as individual radio buttons and does not considers them as a group but actually above radio buttons are of same group. So how to solve these problem?

Please help me friends! Thank You!

Answer 1

 $('#form1 input,#form1 select,#form1 textarea')

or

$('#form1').find('select,input,textarea')

---

Updated for answer 2:

$('#form1').find('select,input[type!=radio],textarea,input[type=radio]:checked')

You can find the selected radio input with input[type=radio]:checked, however if no radio option in the group is selected, you will not get any of the options. JQuery should parse this in the same order they are found in the DOM

Answer 2

If you want the actual order in which they appear, try this:

$("#form1").find("*").filter(function() {
    return !jQuery.inArray(this.tagName.toUpperCase(), ["INPUT","SELECT","TEXTAREA"]);
})