Enabling and Disabling Select Boxes 2

PreethaMIS · Apr 19, 2007

Hi,

I would like to disable the select box to start with. Based on the value of the textbox, I would like to enable it. Can we disable a Select Box? I have worked with disabling with textara and textbox, but the same approach is not working with select box.

Code:

<html>
<head>
<title>Check Text Box Value</title>
<script type="text/javascript">
function checkText()
{
	obj = document.frmText.checkTxt
	if (obj.value != "")
	{
		//enable the SendRepairOrdersto select box
		document.frmText.SendRepairOrdersTo.enabled = true;
		//document.frmText.SendRepairOrdersTo.style.background='#FFFFFF';
		document.frmText.SendRepairOrdersTo.background='#FFFFFF';
	}
	else
	{
		//enable the SendRepairOrdersto select box
		document.frmText.SendRepairOrdersTo.enabled = false;
		document.frmText.SendRepairOrdersTo.background='#CCCCCC';
	}
}
</script>

</head>

<body>
<form name="frmText" id="frmText">
Order Number<input type="text" name="checkTxt" id="checkTxt" onChange="checkText(this); this.form.EE.disabled=true;">
Send Email to:
<select name="SendRepairOrdersTo">
	<option value="b.d@company.com">Brian Downward</option>
	<option value="M.E@company.com">Maria Esquerra</option>
</select>
</form>
</body>
</html>

I wish to disable the select box whenever the page loads. only if the value in the textbox starts with the number '19', then I wish to enable to select box.

Thanks.

monksnake · Apr 19, 2007

I would like to disable the select box to start with

Then put this on your select html object:

Code:

<select name="SendRepairOrdersTo" [!]disabled="disabled"[/!]>

I'll point out a few things to see if you can get this yourself.

Whenever you need to enable something, you set .disabled = false.

As you have written, you are passing "this" into your function checkText(), then not grabbing that object from the argument list. The top part of your function should look like this:

Code:

function checkText([!]obj[/!]) {

In that case, there is no need to define obj in your function:

Code:

[s]obj = document.frmText.checkTxt[/s]

See what you can do with that.

[monkey]

<.

PreethaMIS · Apr 19, 2007

Thanks for the pointers.

monksnake · Apr 19, 2007

Congrats on getting that working. Here's how I'd go about the check for 19.

I'm not sure what this is, maybe you need it for code I don't see:

Code:

this.form.EE.disabled=true;

If you don't need that though, get rid of it.

First, I'd change the onclick event on the textbox to an onkeyup event. That will enable the dropdown the instant a 19 is pressed in the textbox, not after the textbox loses focus.

Code:

<input type="text" name="checkTxt" id="checkTxt" [!]onkeyup[/!]="checkText(this); this.form.EE.disabled=true;">

In your JS on the obj.value check, you want to see that the first 2 entered characters are 1 and 9, that would be done with the substr method:

Code:

if (obj.value.substr(0, 2) == "19")

Note since I'm using a string method I need quotes around the 19.

That should give you what you are wanting, or at least give you enough to get what you want.

[monkey]

<.

monksnake · Apr 19, 2007

Preetha, I was looking later at this and noticed something.

The background change that you want, the syntax is as follows:

Code:

document.frmText.SendRepairOrdersTo[!].style.backgroundColor[/!] ="#ffffff";

Compared to this:

Code:

document.frmText.SendRepairOrdersTo.background='#FFFFFF';

<.

theniteowl · Apr 20, 2007

PreethaMIS, one thing to watch for. When a field is disabled it's value will NOT be submitted with the form.
So if you use server-side code to retrieve the form values you could get an error trying to read a form field that does not technically exist and plan for that possibility, or use client-side code to test the fields prior to submitting and set alternate values in hidden fields that you would read instead of the original fields.

At my age I still learn something new every day, but I forget two others.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Enabling and Disabling Select Boxes 2

PreethaMIS

MIS

monksnake

Programmer

PreethaMIS

MIS

monksnake

Programmer

monksnake

Programmer

theniteowl

Programmer

Similar threads

Part and Inventory Search

Sponsor