Disabling multiple form fields using javascript

**LTrout1** · 07-27-2005, 02:57 PM

I have developed a form on my website and I would like to include some Javascript that will allow some of the form fields to be 'grayed out' when one of the checkboxes in the form is clicked. Of course, if the same checkbox is 'unchecked', I want the disabled form fields to become active again. Does anyone know how to do this? Here's the code I have so far:

HTML Code:

<body>
<form name="myForm">
<INPUT NAME="fname" SIZE="30" TYPE="text"><br>
<INPUT NAME="lname" SIZE="30" TYPE="text"><br>
<INPUT NAME="company" SIZE="30" TYPE="text"><br>
<br>
<input type="checkbox" name="solution_needs" value="channelrep"><br>
<input type="checkbox" name="solution_needs" value="oppid"><br>
<input type="checkbox" name="solution_needs" value="sales"><br>
<br>
<select name="totalrevenue">
<option value="test">test</option>
<option value="test2">test2</option>
</select>
<br>
<input type="checkbox" name="somevalue" value="somevalue">
<input type="checkbox" name="somevalue" value="somevalue1">
<input type="checkbox" name="somevalue" value="somevalue2">
</form>
</body>

I would like the option box named "totalrevenue" and the checkboxes named "somevalue" to all be disabled when one of the "solutions_needs" checkboxes is clicked (the one with value="oppid"). All other form fields should remain active.

Any help would be much appreciated!

**jscheuer1** · 07-27-2005, 04:48 PM

Not being much up on forms, I've probably just reinvented the wheel but, this does what I think you are asking with a minimum of messing around in the form itself yet, it is applicable to any form on the page with named elements. Put this in the head:

Code:

<script type="text/javascript">
function toggle(){
var i, j, args, els;
args=toggle.arguments
els=document.forms[args[0]]
i=0
while (typeof(els[i])!=='undefined'){
for (j = 1; j < args.length-1; j++)
if(els[i].name==args[j])
els[i].disabled=args[args.length-1]
i++
}
}
</script>

Then for your particular case, put this event:

Code:

<input type="checkbox" name="solution_needs" value="oppid" onclick="toggle('myForm', 'somevalue', 'totalrevenue', this.checked)">

This can be used with any checkbox, just follow the syntax:

Code:

onclick="toggle('formName', 'nameOfInput', 'nameOfInput', booleanValue)"

The formName is self explanatory. You can have as many nameOfInput's as you like and they do not have to be unique. The booleanValue may need some explanation. It is simply true or false. It can be expressed as 1 or 0 respectively, as well. In my example I used this.checked as, that is itself a boolean value that denotes the checked state of the checked box, true or false.

**big-dog1965** · 12-18-2007, 10:04 AM

How do I revers this to where the fields are gray till the check box is checked

**jscheuer1** · 12-18-2007, 11:48 AM

Give the fields the disabled attribute:

Code:

<input type="text" name="whatever" disabled>

Then instead of using this.checked as the last argument, use:

Code:

!this.checked

Note: If you want the fields enabled anyway if javascript isn't available, more code will be required.

**big-dog1965** · 12-18-2007, 01:21 PM

so if javascript is disabled what would I put

**jscheuer1** · 12-18-2007, 04:59 PM

For that, you would want to initialize the disabled state with javascript. If you want to prevent the user from accessing the form when they have javascript off, you wouldn't want to do this. You would want to use the disabled attribute as already shown.

Now, looking back over my toggle function, I see it can be improved, so I will rewrite it here and add an init function. Here's a demo:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function toggle(){
var args=toggle.arguments, els=typeof args[0]=='object'? args[0].elements : document.forms[args[0]].elements;
for (var i = els.length-1; i > -1; --i)
for (var j = args.length-2; j > 0; --j)
if(els[i].name==args[j])
els[i].disabled=args[args.length-1];
}
toggle.init=function(){
for (var f=document.forms, i = f.length-1; i > -1; --i)
for (var e=f[i].elements, j = e.length-1; j > -1; --j)
if(e[j].className&&/disabled/.test(e[j].className))
e[j].disabled=true;
};
</script>
</head>
<body>
<form name="test" action="#">
<div>
<input type="checkbox" onclick="toggle('test', 'bob', !this.checked);">
<input class="some disabled" type="text" name="bob">
</div>
</form>
<script type="text/javascript">
toggle.init();
</script>
</body>
</html>

Notes: If the checkbox and the input are both in the same form, you can now use this.form in place of the form name, ex:

Code:

<input type="checkbox" onclick="toggle(this.form, 'bob', !this.checked);">

You could also use the document.forms collection by number, even if they're in different forms. Both of these would be useful for forms with no names.

Make sure to include the call to init right before the closing </body> tag as shown. The class name shown:

Code:

class="some disabled"

could be just:

class="disabled"

I included a compound calss name just to show that it could be done and would still work. This feature can be useful for styling purposes.

**jrotondo** · 11-20-2008, 02:56 AM

This is a very useful script. I'm trying to modify it and I'm having some trouble.

I want to enable several form fields all at once from a single checkbox. I'm trying to do it like so, but it's not working:

Code:

onClick="toggle('test', 'bobtext', !this.checked); toggle('test', 'bob', !this.checked);"

So my intent here is that clicking on this checkbox would toggle both 'bobtext' and 'Bob', but only the first one is toggled. Can you help me figure out why that is?

Many Thanks,
John

**jscheuer1** · 11-20-2008, 05:15 AM

Code:

onclick="toggle('formName', 'nameOfInput', 'nameOfInput', booleanValue)"

So for what you have:

Code:

onClick="toggle('test', 'bobtext', !this.checked); toggle('test', 'bob', !this.checked);"

It should be:

Code:

onclick="toggle('test', 'bobtext', 'bob', !this.checked);"

But what you have should work anyway, so you may not be applying the script properly.

Please post a link to the page on your site that contains the problematic code so we can check it out.

**jrotondo** · 11-20-2008, 01:01 PM

Well, I'm unsure why my method didn't work, but yours worked just fine. Thanks for your help!

Thread: Disabling multiple form fields using javascript

Thread Tools

Search Thread

Disabling multiple form fields using javascript

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions