How to validate group of select items in javascript
Question
There are about 6-7 <select> items in a <table> column. In order to press Submit button, the condition is all <select> items should be selected. So how this can be done using Javascript..?
The sample code seems to be like this:
<table>
<tr>
<td><select name="name1" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "10" >10</option>
</select>
</td>
</tr>
<tr>
<td><select name="name2" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "20" >20</option>
</select>
</td>
</tr>
<tr>
<td><select name="name3" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "30" >30</option>
</select>
</td>
</tr>
</table>
3 answers
solution1
0 2012-12-04 08:22:52
<table id="mytable">
<tr>
<td>
<select name="name1" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "10" >10</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="name2" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "20" >20</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="name3" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "30" >30</option>
</select>
</td>
</tr>
</table>
<form action="" method="post" onsubmit="if(!check()) return false;">
<input type="submit" />
</form>
<script type="text/javascript">
function check() {
elements=document.getElementById("mytable").getElementsByTagName("select");
for(i=0;i<elements.length;i++){
if(elements[i].value == "--") { return false; }
}
return true;
}
</script>
solution2
-1 2012-12-04 07:00:44
One option is to use the jQuery validation plugin , then add "required" to all your select fields.
<form id="my_form">
<select name="select1" class="required"> ... </select>
<select name="select2" class="required"> ... </select>
<select name="select3" class="required"> ... </select>
....
</form>
Then the javascript is as simple as -
$('#my_form').validate();
All you need to do to use the plugin is include the jQuery and jQuery validation scripts in the page head
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
....
</head>
UPDATE
Obviously your requirement is a pretty simple one, and adding a full js library to your site for this use case is definitely over-kill. If this is the only validation you're going to do I'd recommend a pure js solution (such as polin's answer). However if you're likely to have further validation requirements on your site, then the jQuery validation plugin is quite powerful.
solution3
-1 2012-12-04 07:06:41
var arr=new Array();
status=true;
function fnc()
{
elements=document.getElementById("atable").getElementsByTagName("option");
for(i=0;i<elements.length;i++)
{
arr=elements[i].value;
if(Number(arr)=='NaN')
{
status=false;
break;
}
console.log(Number(arr));
}
if(status==true)
document.getElementById("formname").submit();
}
you also give your table an id
<table id="atable">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.