Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Validating multiple pull down menus with javascript

    Hey guys. I'm working on a website and could use your help.

    So I have a form. The form lists all of the users on my website, and next to each username is a pull down menu which lists that users "position" on my website. There is one pull down menu per user.

    The form/pull downs are generated using PHP, so the form content (and the names of the pull down menus) is ever-changing depending on the users subscribed to my website. However, all the pulldown menus have the same basic format for their name: position_change_<username>

    For example, one row of the form might have the username "aganrp6" followed by a pull down menu with the following code:
    Code:
    <SELECT name="position_change_aganrp6"  style="background: #EABD6E;">
    <OPTION value="EIC" >Editor-in-Chief<OPTION value="ME" >Managing Editor<OPTION value="SAE" >Senior Articles Editor<OPTION value="AE" SELECTED>Articles Editor<OPTION value="EE" >Executive Editor<OPTION value="EOE" >Executive Online Editor<OPTION value="SNC" >Senior Notes and Comments Editor<OPTION value="NC" >Notes and Comments Editor<OPTION value="RE" >Research Editor<OPTION value="BE" >Business Editor<OPTION value="SE" >Symposium Editors<OPTION value="Spader" >Spader<OPTION value="Alumni" >Alumni
    </SELECT>
    Where "aganrp6" is a user on my website.

    I would like to create javascript code that identifies all of the pull down menus on the page, and makes sure at least one of the pull down menus has the value "Executive Online Editor". If none of the pull down menus have the value "Executive Online Editor", it should disable the "submit button" at the bottom of the form.

    I'm not really sure where to begin with identifying all of the pull down menus, since they have ever-changing names (though they all have the same format). Help!
    Last edited by icydash; 02-12-2013 at 03:38 AM.

  • #2
    New Coder
    Join Date
    Oct 2009
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Never mind, figured it out:

    Code:
    function checkEOE()
    {
    	var cont = 0;
    	var inputs = document.getElementsByTagName('select');
    	
    	for(var i = 0; i < inputs.length; i++) {
            if (inputs[i].value == "EOE")
    		{
    			cont = 1;
    			document.getElementById("update").disabled = false;
    		}
    	}
    	if (cont == 0)
    	{
    		alert("You must select someone to be the EOE.");
    		document.getElementById("update").disabled = true;
    	}
    }

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,733
    Thanks
    80
    Thanked 4,516 Times in 4,480 Posts
    Seems easy enough.

    But your HTML is both invalid and ancient.

    Tags nowadays are lower case and <option> must be closed with </option>.

    You HTML will not pass w3c validation.

    I'm not sure your idea to disable the submit button is a good one. What happens is somebody choose the right value, so the the button gets enabled, and then they go back and change to the wrong value? You'd have to re-disable the button.

    But you won't KNOW that this particular <select> was the one that *HAD* been right, so you have to go check *all* of them, again.

    I'm going to code it that way, but you will need to think about it.

    Code:
    <!-- named forms are obsolete...make sure yours has an id -->
    <form id="theForm" action="something.php" method="post">
    <select name="position_change_aganrp6"  style="background: #EABD6E;">
        <option value="EIC" >Editor-in-Chief</option>
        ...
        <option value="EOE" >Executive Online Editor</option>
        ...
    </select>
    <select name="bananas">
        ... this one won't be checked ...
    </select>
    <select name="position_change_johndoe111"  style="background: #EABD6E;">
        <option value="EIC" >Editor-in-Chief</option>
        ...
        <option value="EOE" >Executive Online Editor</option>
        ...
    </select>
    
    <input type="submit" name="mySubmitButton" value="submit form" />
    </form>
    
    <script type="text/javascript">
    (
      function( ) /* anonymous master function */
      {
          var form = document.getElementById("theForm"); // use your own ID of course
          var submitButton = form.mySubmitButton; // use your own button's name
          submitButton.disabled = true; 
          // *OR*
          submitButton.style.visibility = "hidden"; // instead of disabling it, hide it
    
          var sels = form.getElementsByTagName("select")
          for ( var s = 0; s < sels.length; ++s )
          {
              var sel = sels[s]; // get one select
              if ( sel.name.indexOf("position_change_") == 0 )
              {
                  // found a <select> with proper name format
                  // attach an onchange handler to it that looks for right value:
                  sel.onchange = checkSelection;
              }
          }
    
          function checkSelection( )
          {
              for ( var s = 0; s < sels.length; ++s )
              {
                  var sel = sels[s]; // we know these have the right names
                  if ( sel.value == "EOE" ) 
                  { 
                      submitButton.disabled = false; // or change visibility
                      retrun; // no need to go further
                  }
              }
              // none of them were "EOE", so...
              submitButton.disabled = true; // or change visibility
          }
    
      } // end of anonymous master function
    )(); // self invoke master function
    </script><!-- note where this script goes !! -->
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,733
    Thanks
    80
    Thanked 4,516 Times in 4,480 Posts
    Quote Originally Posted by icydash View Post
    Never mind, figured it out:

    Code:
    function checkEOE()
    {
    	var cont = 0;
    	var inputs = document.getElementsByTagName('select');
    	
    	for(var i = 0; i < inputs.length; i++) {
            if (inputs[i].value == "EOE")
    		{
    			cont = 1;
    			document.getElementById("update").disabled = false;
    		}
    	}
    	if (cont == 0)
    	{
    		alert("You must select someone to be the EOE.");
    		document.getElementById("update").disabled = true;
    	}
    }
    And how/when are you going to invoke this function?? It needs to be invoked by every <select onchange=...>.

    And alert( ) is considered to be obsolete. It can be blocked by the user in most modern browsers.

    And if you simply return after setting disabled to false you don't need the cont variable, at all.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •