PDA

View Full Version : 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:



<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:

<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:

<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:

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:


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

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


!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:


<!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:


<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:


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:


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
onclick="toggle('formName', 'nameOfInput', 'nameOfInput', booleanValue)"

So for what you have:


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

It should be:


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!