View Full Version : Enable/Disable for form inputs

07-30-2002, 02:11 PM
I have three radio buttons and 10 text inputs.
What I want to do is to make a different form for each radio button.
For the first radio I want all the inputs to be enabled.
For the second radio I want only 8 of the inputs to be enabled - and the other two to be disabled.
The third button is to be like the second but with different inputs.

Everytime I click a radio button I want the other radios to be disabled and so are the unwanted inputs.

How can this be done?
I don't know where to start?

07-30-2002, 05:45 PM
I'm not sure why you want each radio button in a different form. To post to a different page? If they are all the same name, you will only be able to select one at a time.

As to the problem of having only selected ones available for input, you could use "disable" in IE, but that does not solve the NS problem. One way I have handeld that was by changing the focus.

I got carried away "testing" .....

BODY{font-family: arial}
<form name="temp" action="">
<input type="radio" name="frmType" value="0" onClick="setForm('0')">2,3<br>
<input type="radio" name="frmType" value="1" onClick="setForm('1')">1,3<br>
<input type="radio" name="frmType" value="2" onClick="setForm('2')">2<br><br>

1: <input type="text" name="first" value="" onFocus="isValid(this, 'second')"><br>
2:<input type="text" name="second" value="" onFocus="isValid(this, 'third')"><br>
3:<input type="text" name="third" value="" onFocus="isValid(this, 'submit')"><br>
<input type="submit" name="submit" value="Submit">

<script language="javascript" type="text/javascript">
var theFields = new Array() // an array to hold the other arrays
theFields[0] = new Array('second','third') // for option zero, disable these field names..
theFields[1] = new Array('first','third')
theFields[2] = new Array('second')
CurrentArray = theFields[0]; // default to one

function setForm(num){
CurrentArray = theFields[num]; // set a new array to work with based on the number from the radio button
curLength = document.temp.length
for (i = 0; i < curLength -1 ; i++){ // subtract one to keep the submit button from changing colors, -2 if there is a reset.
document.temp.elements[i].style.backgroundColor = "#FFFFFF" //reset all fields to white
curLength = CurrentArray.length
for (i = 0; i < curLength; i++){ //cycle through the fields we want to "disable"
document.temp.elements[CurrentArray[i]].style.backgroundColor = "#CCCCCC" // set the disabled field to grey.
document.temp.elements['first'].focus(); // focus on the first input type, even if it is not available, it will be changed if it is not valid

function isValid(currField,nextField){
fieldName = currField.name; // get the name of the object passed, it will be the name of the field that was focused on
curLength = CurrentArray.length
for (i = 0; i < curLength; i++){ // cycle through the items that are disabled
if (fieldName == CurrentArray[i]){ // if we find that the selected one is disabled
document.temp.elements[nextField].focus(); // move the focus to the next field,


This could be modified to handle another 7 input's relativly easy. I've commented it fairly well. Set up additional arrays with the field names in them. And in the text fields call the isValid onFocus, and chain the next field name to pus the focus to. Just blurring the focus would not be very nice for the user, especially in NS, as I was not able to get the background color to set. In IE it works fine, and the user has some visual cue as to what is now required and what is not.

Hope this is at least a start, or gives you an idea or two.


07-30-2002, 05:48 PM
you can create some functions that turn the disabled propertys on and off like this.

function check1(){


//check 2
function check2(){



with the radion buttons put this

<input type="radion" name="whatever" onclick="check1()">Check 1


Hope this helps :D:D

07-30-2002, 06:16 PM
You both have been a great help for me.