Javascript form validation - prevent duplicate entries across multiple drop-downs

Hey all

I've got a form with multiple drop-down lists. Each drop-down list contains the same set of values. When the user submits the form, I want to ensure that the same value isn't selected in more than one drop-down menu. Is there a simple bit of javascript that will do this?

Thanks for your time

Adam

 

Could you post the HTML code, please?

 

Form would be like this:

 

Alongside the name attribute for select elements, you'll also need an id attribute for this to work.

Here are two variations:-

1. 
   

   function checkDropdowns()
   {
       // The number of dropdowns you have (use the naming convention 'dropx' as an id attribute)
       var iDropdowns = 4; 
    
       var sValue;
       var sValue2;
       // Loop over dropdowns
       for(var i = 1; i <= iDropdowns; ++i)
       {
           // Get selected value
   		sValue = document.getElementById('drop' + i).value;
   		
   		// Nested loop - loop over dropdowns again
   		for(var j = 1; j <= iDropdowns; ++j)
   		{
   		    // Get selected value
   	        sValue2 = document.getElementById('drop' + j).value;
   	        
   	        // If we're not checking the same dropdown and the values are the same...
   	        if ( i != j && sValue == sValue2 )
   	        {
   	            // ...we have a duplicate!
   			    alert('Duplicate!');
   			    
   			    return false;
   			}
   		}
   	}
   	
   	// No duplicates
   	return true;
   }

   Code (markup):

2. // No such function exists in JavaScript so we have to create one
   function inArray(sNeedle, aHaystack)
   {
       // Loop over array    
       for(var i = 0; i < aHaystack.length; ++i)
       {
           // Check if current value is the value we are looking for
   	    if ( aHaystack[i] == sNeedle )
   	    {
   	        // Found
   		    return true;
   		}
   	}
   	
   	// Not found
   	return false;
   }
   
   function checkDropdowns()
   {
       // The number of dropdowns you have (use the naming convention 'dropx' as an id attribute)
       var iDropdowns = 4;  
    
       var sValue; 
       var aValues = new Array();
       var iKey = 0;
       
       // Loop over dropdowns
       for(var i = 1; i <= iDropdowns; ++i)
       {
           // Get selected value
           sValue = document.getElementById('drop' + i).value; 
        
           // Check if we have already stored this value from another select...
           if ( !inArray(sValue, aValues) )
           {
               // ...if not store it
   		    aValues[iKey++] = sValue;   
   		}
   		else
   		{
   		    // ...otherwise we have a duplicate!
   		 	alert('Duplicate!');
   		 
   		    return false;
   		}
   	}    
   	
   	// No duplicates
   	return true;
   }

   Code (markup):

Your submit button will look something like this:-

<input type="submit" onclick="return checkDropdowns();" />

HTML:

 

Fantastic! Just tried them out and they both worked a treat. Thanks for your help, rep on the way!

 

Here is the solution :

<script language="javascript">
function validateVtierDD(src){
var vtierDD = document.getElementsByName("drop");
var flag = false;
var counter = 0;
if(src.value!=-1 && vtierDD && vtierDD.length > 0){
for(var i=0; i < vtierDD.length; i++){
if(src.value == vtierDD.value){
counter++;
if(counter>1)break;
}
}
}
if(counter>1){
alert(src.options[src.selectedIndex].text + " Vtier is already selected.");
src.value="-1";
return false;
}else{
return true;
}
}

function doCheck(src) {
if(validateVtierDD(src)){

}
}
</script>

<select name="drop" onchange="doCheck(this);">
<option value="-1" selected="selected">Any</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>
<select name="drop" onchange="doCheck(this);">
<option value="-1" selected="selected">Any</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>
<select name="drop" onchange="doCheck(this);">
<option value="-1" selected="selected">Any</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>
<select name="drop" onchange="doCheck(this);">
<option value="-1"selected="selected">Any</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>