Quick Solution Providers
Complete Solution for your problems under one roof

javascript validation to check if two combo boxes has same value

Dec 8, 2009 Home -> Javascript

Suppose you have a form with 5 different combo boxes and those combo boxes have same data. Now client want that you can not select same data in 2 combo boxes.Also you have to select all 5 combo boxes.
How to do this by javascript. ok let me show you these 2 functions. I made these 2 functions when i faced this problem in one of my website , now i am giving this to you. Have it and enjoy the programming.

<script type=”text/javascript”>
function check()
{
var listTotal=document.getElementsByName(’list[]‘);
var count=listTotal.length;
var state=true;
//check for null
for(i=0;i<count;i++)
{
if(listTotal[i].value==0)
{

alert(’Please select valid options.’);
return false;
}
}

}
// check double vlaue selected
function checkOptions(val,id)
{
var listTotal=document.getElementsByName(’list[]‘);
var count=listTotal.length;
//var countryPreferState=true;
for(i=0;i<count;i++)
{
if(id!=(parseInt(i+1)))
if(listTotal[i].value==val)
{
alert(’Please select another options field.’);
listTotal[parseInt(id-1)].value=0;
return false;
}
}
}
</script>

First function check() is putting a validation whether user has selected any value in all 5 combo boxes or not.
Second function checkOptions() is checking if user has selected same value in 2 combo boxes.In this function first argument is value of that combo adn second argument is number of that combo box.

Example:

<form method=”get” action=”" onsubmit=”return check();”>
First   :  <select name=”list[]” id=”list1″ onChange=”return checkOptions(this.value,1);” >
<option value=”0″>Select</option>
<option value=”1″>First</option>
<option value=”2″>Second</option>
<option value=”3″>Three</option>
<option value=”4″>Four</option>
<option value=”5″>Five</option>
</select><br />
Second  : <select name=”list[]” id=”list2″ onChange=”return checkOptions(this.value,2);”>
<option value=”0″>Select</option>
<option value=”1″>First</option>
<option value=”2″>Second</option>
<option value=”3″>Three</option>
<option value=”4″>Four</option>
<option value=”5″>Five</option>
</select><br />
Third  : <select name=”list[]” id=”list3″ onChange=”return checkOptions(this.value,3);” >
<option value=”0″>Select</option>
<option value=”1″>First</option>
<option value=”2″>Second</option>
<option value=”3″>Three</option>
<option value=”4″>Four</option>
<option value=”5″>Five</option>
</select><br />
Fourth  : <select name=”list[]” id=”list4″ onChange=”return checkOptions(this.value,4);”>
<option value=”0″>Select</option>
<option value=”1″>First</option>
<option value=”2″>Second</option>
<option value=”3″>Three</option>
<option value=”4″>Four</option>
<option value=”5″>Five</option>
</select><br />
Fifth  : <select name=”list[]” id=”list5″ onChange=”return checkOptions(this.value,5);”>
<option value=”0″>Select</option>
<option value=”1″>First</option>
<option value=”2″>Second</option>
<option value=”3″>Three</option>
<option value=”4″>Four</option>
<option value=”5″>Five</option>
</select><br />
<input type=”submit” name=”submit” value=”Submit” />
</form>

see live example

Related posts:

1. how to change css class name using javascript
2. JavaScript Arrays

Tags: combobox, dropdown form validation, Javascript, javascript validation, validation