Validating multiple pull down menus with javascript

[icydash]

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:

<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!

[icydash]

Never mind, figured it out:

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;
	}
}

[Old Pedant]

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.

<!-- 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>

[Old Pedant]

Originally Posted by icydash

Never mind, figured it out:

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.