Javascript and form style

You can control some form elements CSS style attributes using Javascript. This comes in handy when trying to highlight errors or disabled fields. You can use a select onChange event to disable/enable form fields. The style attributes I find most useful are color, border, and backgroundColor (not background-color).

<script>
function disableitems(myvar){
document.form.elementname.disabled="false";
document.form.elementname.style.backgroundColor = "white";
// if item is to be disabled
if (myvar == "yes"){
document.form.elementname.disabled="true";
document.form.elementname.style.backgroundColor = "silver";
}
}
</script>
 
<form>
<select name="somename" onChange="disableitems(this.value);">>
<option value="no">no</option>
<option value="yes">yes</option>
</select> Disable selector
<input name="elementname" type="text" /> item to be disabled.
...

Cup size   
Select size then click on coffee cup.
This entry was posted in Code, CSS, Javascript. Bookmark the permalink.