1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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

Discussion in 'JavaScript' started by gingerbreadweb, Jun 10, 2009.

  1. #1
    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
    SEMrush
     
    gingerbreadweb, Jun 10, 2009 IP
    SEMrush
  2. clarky_y2k3

    clarky_y2k3 Well-Known Member

    Messages:
    114
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    108
    #2
    Could you post the HTML code, please?
     
    clarky_y2k3, Jun 10, 2009 IP
  3. gingerbreadweb

    gingerbreadweb Active Member

    Messages:
    514
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    60
    #3
    Form would be like this:

     
    gingerbreadweb, Jun 10, 2009 IP
  4. clarky_y2k3

    clarky_y2k3 Well-Known Member

    Messages:
    114
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    108
    #4
    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:
     
    clarky_y2k3, Jun 10, 2009 IP
    gingerbreadweb likes this.
  5. gingerbreadweb

    gingerbreadweb Active Member

    Messages:
    514
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    60
    #5
    Fantastic! Just tried them out and they both worked a treat. Thanks for your help, rep on the way! :D
     
    gingerbreadweb, Jun 11, 2009 IP
  6. Xenthik

    Xenthik Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6

    Here is the solution : :eek:

    <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>
     
    Xenthik, Feb 1, 2012 IP