Using Javascript to require 2 drop down menus to have something selected

[jamie61880]

Hi everyone. I'm trying to get 2 drop down menus to each have something selected when the form is submitted. I'm using javascript for this, but I can't get it to work. Basically, if one is blank and the other one isn't, I want an error to pop up saying they have to fill in the one that is blank and vice versa. What am I doing wrong? Here's what I have for the javascript and on the form below. My 2 drop down names are Mfg_Spec_Prod_Approval_Initials and Mfg_Spec_Prod_Approval_Rev. Thanks for anyone's help!

Andy

<SCRIPT LANGUAGE="JavaScript">

        function verify() {

            var partNumber = '';

            var ecoNumber = '';

            var ProdInit;

            var ProdInitValue='';

            var ProdRev;

            var ProdRevValue='';

            var allArray = document.getElementById('listofids').value.split(",");

            var error=false;

            for(var i=0;i<allArray.length;i++) {

                ProdRev = document.getElementById('Mfg_Spec_Prod_Approval_Rev'+allArray);

                ProdInit = document.getElementById('Mfg_Spec_Prod_Approval_Initials'+allArray);

                ProdRevValue = ProdRev[ProdRev.selectedIndex].value;

                ProdInitValue = ProdInit[ProdInit.selectedIndex].value;

<!--- This code is if the BOM Initials is not empty and the PNR Initials is empty.--->

                if(ProdInitValue != '' && ProdRevValue == '') {

                    error=true;

                    ecoNumber = document.getElementById('ECID'+allArray).value;

                    partNumber = document.getElementById('Part_Number'+allArray).value;

                    alert("You must enter a Rev for ECO " + ecoNumber + " Part Number: " + partNumber);

                }

                else if(ProdRevValue != '' && ProdInitValue == '') {

                    error=true;

                    ecoNumber = document.getElementById('ECID'+allArray).value;

                    partNumber = document.getElementById('Part_Number'+allArray).value;

                    alert("You must enter your initials for ECO " + ecoNumber + " Part Number: " + partNumber);

                }

            }

            if(error) {

            return false;

        }

        else {

            return true;

            }

        }

    </script>

Start of form

<cfform name="EditItem" method="post" action="My_Machining_action.cfm" onsubmit="return verify();">

<cfset MfgSpecProdInitials = DocumentationSearch.Mfg_Spec_Prod_Initials>

<td align="center">

<cfif Mfg_Spec_Prod_Initials Is Not ""<!---  and Mfg_Spec_Prod_Initials EQ cookie.UserInitials --->>

<select name="Mfg_Spec_Prod_Approval_Initials#ItemID#" id="Mfg_Spec_Prod_Approval_Initials#ItemID#">

<option value=""></option>

<cfloop query="ShowProdInitials">

<option value="#Initials#"

<cfif #Initials# EQ MfgSpecProdInitials>selected</cfif>>#Initials#</option>

</cfloop>

</select>

<cfelse>

</cfif>

</td>

<cfset MfgSpecProdRev = DocumentationSearch.Mfg_Spec_Prod_Rev>

<td align="center">

<cfif Mfg_Spec_Prod_Initials Is Not ""<!---  and Mfg_Spec_Prod_Initials EQ cookie.UserInitials --->>

<select name="Mfg_Spec_Prod_Approval_Rev#ItemID#" id="Mfg_Spec_Prod_Approval_Rev#ItemID#">

<option value=""></option>

<cfloop query="ShowDocRevChoices">

<option value="#Doc_Rev_Initials#"

<cfif #Doc_Rev_Initials# EQ MfgSpecProdRev>selected</cfif>>#Doc_Rev_Initials#</option>

</cfloop>

</select>

<cfelse>

</cfif>

</td>

<input type="submit" value="Update">

[EddieLotter]

This isn't a ColdFusion issue, however the solution is to validate with "ProdRev.selectedIndex == 0". In other words, check the value of selectedIndex.

[jamie61880]

Eddie,

   I actually got this javascript below to work so if one drop down is left blank, and the other one is filled out, an error will pop up saying to entering either some initials or a rev. The only problem is that I have a dynamic list of drop downs in rows, so I need this javascript to run for each row. If I do the 1st row with 1 drop down selected and the other not, it gives me the error, which is perfect. But if I want the 2nd row to error out, for instance, doing the same thing, the error will not pop up. How do I make this work so it does this for each row since the list of drop downs is dynamic? My drop down menu names are Mfg_Spec_Prod_Approval_Initials and Mfg_Spec_Prod_Approval_Rev.

<script type="text/javascript">

                    function verify() {

                        var Mfg_Spec_Prod_Approval_Initials = document.getElementById('Mfg_Spec_Prod_Approval_Initials');

                        var Mfg_Spec_Prod_Approval_Rev = document.getElementById('Mfg_Spec_Prod_Approval_Rev');

                        if(Mfg_Spec_Prod_Approval_Initials.selectedIndex == '' && Mfg_Spec_Prod_Approval_Rev.selectedIndex != '') {

                            alert('select Initials!');

                            return false;

                        }

  else if(Mfg_Spec_Prod_Approval_Rev.selectedIndex == '' && Mfg_Spec_Prod_Approval_Initials.selectedIndex != '') {

                            alert('select a Rev!');

                            return false;

                        }

                        return true;

                    }

                </script>

Andy

[EddieLotter]

In your original script, remove the two lines:

ProdRevValue = ProdRev[ProdRev.selectedIndex].value;

ProdInitValue = ProdInit[ProdInit.selectedIndex].value;

and change your two conditions to:

if(ProdInit.selectedIndex != 0 && ProdRev.selectedIndex == 0) {

...

}

else if(ProdRev.selectedIndex != 0 && ProdInit.selectedIndex == 0) {

...

}

I'm assuming your "listofids" is providing the expected values.

[jamie61880]

Eddie,

   This doesn't do anything. I can't even get the error to show up on the first row now. Do you want me to post the entire page of code? Any other ideas?

Andy

[EddieLotter]

You need to put some alert statements into your script to ensure that (a) execution is reaching that part of the script and (b) the script is dealing with expected values.

For example:

alert(document.getElementById('listofids'));

var allArray = document.getElementById('listofids').value.split(",");

alert(allArray[0]);

and:

ProdRev = document.getElementById('Mfg_Spec_Prod_Approval_Rev'+allArray);

alert(ProdRev);