Log in

View Full Version : I cant modify enable/disable form fields script


raml
06-01-2007, 02:18 AM
Hello, I have had a hard time looking for a cross browser javascript that allows the user to enable and/or disable multiple form fields.

The best one I found is a small script that seems to be easy to set up and that works in Mozilla too. However, I am new to javascript and I don't know how to modify it to do the following:

1) What the script currently does is that it disables the form fields when a checkbox is checked, but I would like it to enable them instead because they should be disabled in the first place.

2) I need several checkboxes in the same form, because each should be related to different group of fields; however the script only allows one checkbox per form to enable or disable the selected fields.

Thanks a lot :)

Here is the script:


<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>
</head>
<body>
<form name="myForm">
<p>
<input type="checkbox" name="solution_needs" value="oppid" onclick="toggle('myForm', 'fname', 'lname', 'company', 'select', 'textfield', this.checked)">
<br>
<INPUT NAME="fname" SIZE="30" TYPE="text">
<br>
<INPUT NAME="lname" SIZE="30" TYPE="text">
<br>
<INPUT NAME="company" SIZE="30" TYPE="text">
<br>
<select name="select">
</select>
</p>
<p>
<textarea name="textfield" rows="3"></textarea>
</p>
</form>
</body>
Trinithis
06-01-2007, 04:40 AM
<head>
<script type="text/javascript">

function toggle() {
var state = !arguments[arguments.length-1];
for(var i=1; i<arguments.length-1; i++) {
document.forms[arguments[0]][arguments[i]].disabled = state;
}
}

</script>
</head>
<body>
<form name="myForm">
<p>
<input type="checkbox" name="solution_needs" value="oppid" onclick="toggle('myForm', 'fname', 'lname', 'company', 'select', 'textfield', this.checked)">
<br>
<INPUT disabled="true" name="fname" size="30" type="text">
<br>
<INPUT disabled="true" name="lname" size="30" type="text">
<br>
<INPUT disabled="true" name="company" size="30" type="text">
<br>
<select disabled="true" name="select">
</select>
</p>
<p>
<textarea disabled="true" name="textfield" rows="3"></textarea>
</p>
</form>
</body>
raml
06-01-2007, 05:08 AM
Thanks it works great... I just have one more question... do you know how to make it work with different group of fields and multiple checkboxes in the same form...

Thanks again :p

This is what I mean:


<head>
<script type="text/javascript">

function toggle() {
var state = !arguments[arguments.length-1];
for(var i=1; i<arguments.length-1; i++) {
document.forms[arguments[0]][arguments[i]].disabled = state;
}
}

</script>
</head>
<body>
<form name="myForm">
<p>GROUP 1 <br>
<input type="checkbox" name="solution_needs" value="oppid" onclick="toggle('myForm', 'fname', 'lname', 'company', this.checked)">
<br>
<INPUT disabled="true" name="fname" size="30" type="text">
<br>
<INPUT disabled="true" name="lname" size="30" type="text">
<br>
<INPUT disabled="true" name="company" size="30" type="text">
<br>
</p>
<hr>
<p>GROUP 2</p>
<p><br>
<input type="checkbox" name="solution_needs2" value="oppid2" onclick="toggle('select', 'textfield', this.checked)">
<br>

<select disabled="true" name="select">
</select>
</p>
<p>
<textarea disabled="true" name="textfield" rows="3"></textarea>
</p>
</form>
</body>
Trinithis
06-01-2007, 03:44 PM
For the first argument you put into your toggle() function, you have to put in the form name, and in this case, it is myForm. I bolded my single addition.


<head>
<script type="text/javascript">

function toggle() {
var state = !arguments[arguments.length-1];
for(var i=1; i<arguments.length-1; i++) {
document.forms[arguments[0]][arguments[i]].disabled = state;
}
}

</script>
</head>
<body>
<form name="myForm">
<p>GROUP 1 <br>
<input type="checkbox" name="solution_needs" value="oppid" onclick="toggle('myForm', 'fname', 'lname', 'company', this.checked)">
<br>
<INPUT disabled="true" name="fname" size="30" type="text">
<br>
<INPUT disabled="true" name="lname" size="30" type="text">
<br>
<INPUT disabled="true" name="company" size="30" type="text">
<br>
</p>
<hr>
<p>GROUP 2</p>
<p><br>
<input type="checkbox" name="solution_needs2" value="oppid2" onclick="toggle('myForm', 'select', 'textfield', this.checked)">
<br>

<select disabled="true" name="select">
</select>
</p>
<p>
<textarea disabled="true" name="textfield" rows="3"></textarea>
</p>
</form>
</body>