trigger event with select option?

[xsidx]

okie dokie guys..

following problem:
i have this js code to control whether a checkbox should be disabled or not:


//Enable/disable delete box
function deleteOff(val) {
if (val == 1) {
document.edit.del.disabled = true;
}
else {
document.edit.del.disabled = false;
}
}


now... what i want to do is, that if in a dropdownmenu the first option ("select categories") is selected, the checkbox should be disabled - and ONLY then.

i dont have any trouble getting this done with radio inputs

<INPUT TYPE="radio" NAME="disdel" VALUE="1" onClick="deleteOff(1)"> disable</BR>
<INPUT TYPE="radio" NAME="disdel" VALUE="1" onClick="deleteOff(0)"> enable

but how can i accomplish the same with this element:

<SELECT NAME="cat">
<OPTION VALUE="none" onClick="deleteOff(1)">Select a category</OPTION>
<OPTION VALUE="1" onClick="deleteOff(0)">cat 1</OPTION>
<OPTION VALUE="2" onClick="deleteOff(0)">cat 2</OPTION>
<OPTION VALUE="3" onClick="deleteOff(0)">cat 3</OPTION>
</SELECT>


so the problem is pretty much: which event handler do i use where to accomplish this task..

thanks a lot everyone...

keep it rockin...
sid
xxx

[pelegk1]

u can disable all of the drop down box
or u can delete the value from the drop down!

another way is to remember which 1 u wan to delete and if the user choose it again the give him alert or something like that

[xsidx]

ok - to prevent misunderstandings:

i want a CHECKBOX to be disabled when the option with the value="none" is selected.

keep rocking...

[Fang]

It works correctly in Mozilla, if you use the same function name (disableOff or deleteOff)
In IE you cannot use an event handeler to fire on a single option, only on the select.
Use onchange in the select, and find the selected option in the function.
You will need to add another option (none) to make the selection possible with onchange.

[xsidx]

Originally posted by Fang
It works correctly in Mozilla, if you use the same function name (disableOff or deleteOff)
In IE you cannot use an event handeler to fire on a single option, only on the select.
Use onchange in the select, and find the selected option in the function.
You will need to add another option (none) to make the selection possible with onchange.

thanks for pointing out the inconsistency... i got it right in my script - a little mistake while posting here...

so yeah - i noticed that in the select tag it actuellay DOES something in ie.

so to confirm this: your suggestion is the following:


//Enable/disable delete box
function deleteOff(val) {
if (val == 1 || document.edit.cat.value == 'none') {
document.edit.del.disabled = true;
}
else {
document.edit.del.disabled = false;
}
}



<SELECT NAME="cat" onChange="deleteOff(0)">
<OPTION VALUE="none">Select a category</OPTION>
<OPTION VALUE="1">cat 1</OPTION>
<OPTION VALUE="2">cat 2</OPTION>
<OPTION VALUE="3">cat 3</OPTION>
</SELECT>



did i get that right?

[Fang]

No, you need to pass the selected option.
Three methods:

<input type="checkbox" name="del" /><br />
//
<form action="#" name="edit">
<input type="checkbox" name="del" /><br />
<select name="cat" onclick="disableOff(this.options[this.selectedIndex].value)">
<option value="none">Select a category</option>
<option value="1">cat 1</option>
<option value="2">cat 2</option>
<option value="3">cat 3</option>
</select>
</form>
// OR
<form action="#" name="edit">
<input type="checkbox" name="del" /><br />
<select name="cat" size="4" onchange="disableOff(this.options[this.selectedIndex].value)">
<option value="none">Select a category</option>
<option value="1">cat 1</option>
<option value="2">cat 2</option>
<option value="3">cat 3</option>
</select>
</form>
// function for both cases
function disableOff(val) {
if (val == "none") {
document.edit.del.disabled = true;
}
else {
document.edit.del.disabled = false;
}
}
// OR
<form action="#" name="edit">
<input type="checkbox" name="del" /><br />
<select name="cat" onchange="disableOff(this.options[this.selectedIndex].value)">
<option value="none">Select a category</option>
<option value="none">none</option>
<option value="1">cat 1</option>
<option value="2">cat 2</option>
<option value="3">cat 3</option>
</select>
</form>

Try the different methods. The result is the same.

[xsidx]

hey fang...

it took me a little monkeywrenching, but eventually i got it to work (the form is quite a bit more complicated than what i listed - in fact - the select is w/in another form than the checkbox - furthermore the whole form is dynamically created depending on a mysql databaes's content)

thanks a lot again!

rock on... sid