Categories:

Enabling/ disabling form elements using JavaScript

-Accessing the disabled attribute using JavaScript

The saying goes" if something can be done, it probably can be undone as well". Well, thank God that is the case with the disabled attribute.

So how do we re-enable form elements disabled by the disabled attribute, so they become "usable" again? Using JavaScript!

Let's take our very first example to illustrate the concept:

<form>
<input type="text" size="20" value="Can't submit this!">
<input type="submit" value="Submit" name="B1" disabled="disabled">
</form>

To JavaScript, the disabled attribute above is recognized as simply the disabled property of that particular element. Being a property, we should all know how to access it, then. Ok, you forgot. Here goes:

document.formname.elementname.disabled

So, to access the above disabled attribute, I would first slap on a name for both the <form> and <input> tag, and take it from there:

<form name="test">
<input type="text" size="20" value="Can't submit this!">
<input name="test2" type="submit" value="Submit" name="B1" disabled="disabled">
</form>
<script>
//accesses the disabled property
document.test.test2.disabled
</script>

Nothing an average person can't follow, right?

-Manipulating the disabled attribute using JavaScript

The disabled property of JavaScript is a Boolean property, meaning it only take two possible values: "true", or "false". By knowing this, you basically know how to manipulate the disabled attribute- disabling and re-enabling a form element at will. Below demonstrates an example where clicking a link disables/ enables a form button:

Click here

The script used to accomplish this is quite simple, really:

<script type="text/javascript">
function disable_enable(){
	if (document.test1.test2.disabled==true)
		document.test1.test2.disabled=false
	else
		document.test1.test2.disabled=true
}
</script>

A more elegant way to do the same thing as above would be:

<script type="text/javascript">
function disable_enable(){
	document.test1.test2.disabled=!document.test1.test2.disabled
}
</script>

I don't care how you do it...just know how to do it!