 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:
The script used to accomplish this is quite simple, really:
<script type="text/javascript">
function disable_enable(){
if (document.all || document.getElementById){
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(){
if (document.all || document.getElementByid){
document.test1.test2.disabled=!document.test1.test2.disabled
}
}
</script>
I don't care how you do it...just know how to do it!
|
