How to make list of all input field in a form with a $() function in jquery?
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")
- But this statement gives only list of elements having
input
tag i.e. all text boxes, radio buttons and submit buttons. - 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:
- 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? - 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!
$('#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
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"]);
})
var data = $('#form1').serialize();
then do some regex to get the keys out of the string :-)
精彩评论