Gray out or disable text box

[jamie61880]

Hi,

     I have a drop down menu called CN_Entry_Initials that has options of a "C" or an "N". I also have a text box called Part_Number to enter a part number into. I want the Part Number text box to be grayed out or disabled until either a "C" or an "N" has been chosen out of the CN_Entry_Initials drop down menu. I have this working, except that I cannot get the Add button to do anything. I think it’s something to do with the way I have the If statement for this disabled text box, or do I have to change the button to a submit button. Does anyone know how to fix this? Below is the javascript and the drop down menu and text box code along with the Add or submit button. There is extra stuff in the Javascript that I have on the page, but I don't need to worry about those things since they are working correctly. I have the disabled text box code at the top of the javascript under the function verify() code. Thanks.

<SCRIPT LANGUAGE="JavaScript">

<!-- Original:  Wayne Nolting (w.nolting@home.com) -->

<!-- This script and many more are available free online at -->

<!-- Begin

function verify()

{

if (document.getElementById('CN_Entry_Initials').value == "C"

|| document.getElementById('CN_Entry_Initials').value == "N")

    document.getElementById('Part_Number').disabled = false;

else

    document.getElementById('Part_Number').disabled = true;

}

{

var PartNum=document.AddECNumber.Part_Number.value;

var regularExpression = new RegExp(/[cC][0-9]/); //regular expression to check for a letter C followed by a number

if(regularExpression.test(PartNum)&& document.AddECNumber.CN_Entry_Initials.value == "N" && document.AddECNumber.Validation_Qty.value == "") { //this will return true if the input passes the regular expression

alert("Enter a Validation Quantity for this new Custom");

}

else if(document.AddECNumber.CN_Entry_Initials.value == "N" && document.AddECNumber.P_Drive_Docs_Initials.value == "i") { //this will return true if the input passes the regular expression

alert("You cannot select 'i' for docs to be removed for a new part");

}

else if(document.AddECNumber.CN_Entry_Initials.value == ""  && document.AddECNumber.SW_Model_Only.value == "0") { //this will return true if the input passes the regular expression

alert("ECO type required - Select (N)ew or (C)hange for eco line item");

}

else if(document.AddECNumber.PNR_BOM_Change_Only.value == "1" && document.AddECNumber.CN_Entry_Initials.value != "C" && (document.AddECNumber.Release_Status_Initials.value == "U"

|| document.AddECNumber.Release_Status_Initials.value == "N")) { //this will return true if the input passes the regular expression

alert("ECO type required - Select (C)hange for eco line item and Select N for Release Status if PNR/BOM Change Only is yes");

}

else if(document.AddECNumber.PNR_BOM_Change_Only.value == "1" && document.AddECNumber.CN_Entry_Initials.value == "C" && document.AddECNumber.Release_Status_Initials.value == "U") { //this will return true if the input passes the regular expression

alert("ECO type required - Select (C)hange for eco line item and Select N for Release Status if PNR/BOM Change Only is yes");

}

else if(document.AddECNumber.Doc_Changes_Only.value == "1" && document.AddECNumber.CN_Entry_Initials.value != "C") { //this will return true if the input passes the regular expression

alert("ECO type required - Select (C)hange for eco line item since Doc Changes Only is yes");

}

<!--- else if (document.AddECNumber.P_Drive_Docs_Initials.value == "i")

// self.location='eco_search.cfm'; --->

else

{

document.AddECNumber.submit();

}

}

//  End -->

</script>

<cfform name="AddECNumber" action="add_new_ec_number_action.cfm" method="post">

<tr>

<td class="edit" align="right">Change or new entry:</td>

<td>

          <select name="CN_Entry_Initials" id="CN_Entry_Initials" onchange="verify();">

            <option value="">Select</option>

<!--------- POPULATE SELECT BOX WITH P_Drive_Docs_Initials FIELDS --------->

            <CFOUTPUT QUERY="ShowCNEntryInitials">

            <option value="#CN_Entry_Initials#">#CN_Entry_Initials#

            </CFOUTPUT>

          </select>

</td>

</tr>

<tr>

<td class="edit" align="right" valign="middle">Part Number:<br><h6>(Limit to 25 characters)</h6></td>

<td><input type="text" name="Part_Number" id="Part_Number" maxlength="25" size="27" disabled="disabled"></td>

<td><textarea name="Description" cols="30" rows="3"></textarea></td>

</tr>

<input type="button" value="Add" onclick="verify();">

</cfform>

Thanks.

Andy

[Dan_Bracuk]

Put an alert at the top of your verify function.  See if it comes up when you click the add button.

[jamie61880]

Dan,

   I put an alert at the top of the verify function and it came up when I changed the drop down menu option to a C or N, and also when I clicked the add button.

Andy

[Dan_Bracuk]

So far so good.  You have verified that your verify function is being called by the events that are supposed to call it.  Next, use the alert box to output your variables.  Also, move it around to various parts of your function to troubleshoot your if/else logic.

[jamie61880]

I don't understand about using the alert box to output the variables. I know that everything was working with alert boxes, etc. before I added the code for the disable text box code. The difference I see is on the disable text box code I use document.getElementById and on the other code I use document.AddECNumber. Could this cause the Add button to not work? If so, how do I change this code to make it work? I tried just changing it be like the document.AddECNumber code, but that didn't work.

Andy

[Dan_Bracuk]

Your conditional logic includes:

if (document.getElementById('CN_Entry_Initials').value == "C"

You check the value with:

alert('initials are " + (document.getElementById('CN_Entry_Initials').value);

[Avatar · Accepted solution]

Looks as though the Javascript function braces "{" are incorrect, the verify function is  only performing the enable/disable feature of the Part_Number text box which is why the alert function worked when you added it in there.

What you may want to do is create a separate function that just enables/disables the Part_Number text box and add that to the Select box's onchange event.

[jamie61880]

Yes! Creating a separate function worked! This is awesome, but sucks too because I know I tried this the other day, but I think I forgot to change the javascript name code from verify to something else and then didn’t change it on the change or new entry drop down menu either. Thanks for everyone's help!

[jamie61880]

Avatar or Dan,

    I just tested this disable text box in Explorer and it doesn't work. It works fine in Firefox and Chrome. I changed the drop down to an Onclick instead of an Onchange, but that still didn't do it. What can I do to fix this?

Andy

[Dan_Bracuk]

The troubleshooting tips I gave you apply to any browser.

[jamie61880]

I figured out what the problem was. I had to put the javascript after the form. I had it before the form.

[Dan_Bracuk]

That's very odd.

Also, you might want to run another test where you change the value of your dropdown without using your mouse.  My guess is that it won't work.

[jamie61880]

Dan,

   I just tested it without using the mouse and it still worked!

Andy