Results 1 to 4 of 4

Thread: I cant modify enable/disable form fields script

  1. #1
    Join Date
    May 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question I cant modify enable/disable form fields script

    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:

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

  2. #2
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

    Code:
    <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>
    Last edited by Trinithis; 06-01-2007 at 04:50 AM. Reason: took out "checked='true'"

  3. #3
    Join Date
    May 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb

    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

    This is what I mean:

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

  4. #4
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

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

Bookmarks

Posting Permissions

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