Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Posts
    436
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Enable/Disable for form inputs

    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?
    Thanks.

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    Western US
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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" .....

    Code:
    <html>
    <head>
    <style>
    	BODY{font-family: arial}
    </style>
    </head>
    <body>
    <form name="temp" action="">
    Disable<br>
    <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">
    </form>
    
    <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.
    		if(!document.layers)
    			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"
    		if(!document.layers)
    			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,
    		}
    	}
    }
    </script>
    
    </body>
    </html>
    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.

    ShriekForth

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    FL, USA
    Posts
    734
    Thanks
    0
    Thanked 0 Times in 0 Posts
    you can create some functions that turn the disabled propertys on and off like this.

    function check1(){

    document.forms[0].text1.disabled=true
    document.forms[0].text2.disabled=true

    }
    //check 2
    function check2(){

    document.forms[0].text9.disabled=true
    document.forms[0].text1.disabled=false

    }


    with the radion buttons put this

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

    ect.


    Hope this helps
    CYWebmaster.com - See why we dot com!!
    ACJavascripts.com - Cut & Paste Javascripts!
    SimplyProgram.com - Personal Blog

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Posts
    436
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thank you both.

    You both have been a great help for me.
    Thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •