Question
Iterate in form fields using jQuery
Suppose I have form and it has many form fields like HTML textbox, HTML checkbox, HTML radio etc., how
I can iterate with in all form fields and check the input type and collect the value.
My form fields are
<fieldset>
<ol>
<li>
<label class="left">
First Name
</label>
<input type="text" id="FirstName" runat="server" /></li>
<li>
<label class="left">
Last Name
</label>
<input type="text" id="LastName" runat="server" /></li>
<li>
<label class="left">
Email
</label>
<input type="text" id="Email" runat="server" /></li>
<li>
<label class="left">
Phone
</label>
<input type="text" id="Phone" runat="server" /></li>
<li>
<label class="left">
Contact Method
</label>
<span class="checkBoxGroup">
<input type="checkbox" id="ReqEmail" runat="server" /><label>Email</label>
<input type="checkbox" id="ReqMail" runat="server" /><label>Mail</label>
<input type="checkbox" id="ReqPhone" runat="server" /><label>Phone</label>
<input type="checkbox" id="ReqNoContact" runat="server" /><label>No Contact</label>
</span></li>
<li>
<label class="left">
New Letter Type
</label>
<span class="myGroupRandom" >
<input type="checkbox" id="Checkbox1" runat="server" /><label>Company News</label>
<input type="checkbox" id="Checkbox2" runat="server" /><label>Press Releases</label>
<input type="checkbox" id="Checkbox3" runat="server" /><label>Deals</label>
<input type="checkbox" id="Checkbox4" runat="server" /><label>Employement</label>
</span></li>
<li>
<input type="submit" id="Submit" value="Submit" /></li>
</ol>
</fieldset>
Answer
On the click of the HTML Submit button, you will need to iterate in the following way
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title></title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
$("#Submit").live("click", function () {
$("form[id$=form1] input").each(function () {
switch ($(this)[0].type) {
case "text":
var val = $(this).val();
break;
case "checkbox":
if ($(this).is(":checked")) {
var val = $(this)[0].id + ": " + "checked";
}
break;
}
});
return false;
});
</script>
</head>
<body>
<form id="form1">
<div>
<fieldset>
<ol>
<li>
<label class="left">
First Name
</label>
<input type="text" id="FirstName" runat="server" /></li>
<li>
<label class="left">
Last Name
</label>
<input type="text" id="LastName" runat="server" /></li>
<li>
<label class="left">
Email
</label>
<input type="text" id="Email" runat="server" /></li>
<li>
<label class="left">
Phone
</label>
<input type="text" id="Phone" runat="server" /></li>
<li>
<label class="left">
Contact Method
</label>
<span class="checkBoxGroup">
<input type="checkbox" id="ReqEmail" runat="server" /><label>Email</label>
<input type="checkbox" id="ReqMail" runat="server" /><label>Mail</label>
<input type="checkbox" id="ReqPhone" runat="server" /><label>Phone</label>
<input type="checkbox" id="ReqNoContact" runat="server" /><label>No Contact</label>
</span></li>
<li>
<label class="left">
New Letter Type
</label>
<span class="myGroupRandom" >
<input type="checkbox" id="Checkbox1" runat="server" /><label>Company News</label>
<input type="checkbox" id="Checkbox2" runat="server" /><label>Press Releases</label>
<input type="checkbox" id="Checkbox3" runat="server" /><label>Deals</label>
<input type="checkbox" id="Checkbox4" runat="server" /><label>Employement</label>
</span></li>
<li>
<input type="submit" id="Submit" value="Submit" /></li>
</ol>
</fieldset>
</div>
</form>
</body>
</html>