JavaScript Forum

**seannarae** · 06-02-2009, 03:28 PM

reaching the edge of my JS chops on this particular problem. am convinced the events i'm stringing onto the onclick is better performed with script up in the head. but dont know the How.

GOAL
I have a page with multiple form elements, each with unique IDs.
On load, some of the elements are disabled, rest are enabled.
Using a single onclick of a checkbox, disable a list of elements as well as enable a list of others.
Unticking the checkbox causes the form elements to return to previous states.

PROBLEM SUMMARY
I am using getElementById, but trying to call a list of >1 ID.
When page loads, the checkbox does work, but only on the first ID in the string.
If there's a way to string >1 onto getElementById, it would suffice; my final page will have state changes on only 4-5 elements.
However, if there was a more efficient way to do this, using a function in the head, i'd like an example so i can study and modify.

Thanks...

SAMPLE PAGE

HTML Code:

 <form name="form1" action="#" method="post">
    <input type="checkbox" id="checkmain1" onclick="if(this.checked) {getElementById('text2','select2','check2').disabled=false;getElementById('text1','select1','check1').disabled=true;}else{getElementById('text2','select2','check2').disabled=true;getElementById('text1','select1','check1').disabled=false;}" /><label for="checkmain1">Enable/Disable</label><br />
    
    <p>
        All elements in this row should get DISabled: 
        <input type="text" id="text1" value="disabled by checkbox" />
        <select id="select1">
        <option value="one">one</option>
        <option value="two">two</option>
        <option value="three">three</option>
        </select>
        <input type="checkbox" id="check1" /><label for="check1">check 1</label>
    </p>
    <p>
        All elements in this row should get ENabled: 
        <input type="text" id="text2" value="enabled by checkbox" disabled="disabled" />
        <select id="select2" disabled="disabled">
        <option value="one">one</option>
        <option value="two">two</option>
        <option value="three">three</option>
        </select>
        <input type="checkbox" id="check2" disabled="disabled" /><label for="check2">check 2</label>
    </p>
</form>

**wayfarer07** · 04:54 PM

getElementById is only for calling a single element. If you want to have several elements, they must be in an array or set of objects, which you could loop over and set qualities to each one. Items don't need to be called by ID, you could do a getElementsByTagName or even use the forms[] object. The latter suggestion is a bit tricky, however, and I still forget the rules when using the forms[] object.

**seannarae** · 06-02-2009, 05:19 PM

Any chance you (or someone) might provide an example using my test page code? Again, i want to learn by example; so i can apply a modification of the example to my real page, which will have many more form elements then my test page.

**wayfarer07** · 06:02 PM

HTML Code:

<html>
<head>
<script type="text/javascript">
function toggleGroup(id) {
    var group = document.getElementById(id);
    var inputs = group.getElementsByTagName("input");
    var selects = group.getElementsByTagName("select");
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].disabled = (inputs[i].disabled) ? false : true;
    }
    for (var i = 0; i < selects.length; i++) {
        selects[i].disabled = (selects[i].disabled) ? false : true;
    }
}
window.onload = function() {
document.getElementById("checkmain1").onchange = function() {
   toggleGroup("group1");
   toggleGroup("group2");
}
}
</script>
</head>
<body>
 <form name="form1" action="#" method="post">
    <input type="checkbox" id="checkmain1" /><label for="checkmain1">Enable/Disable</label><br />
    
    <p id="group1">
        All elements in this row should get DISabled: 
        <input type="text" value="disabled by checkbox" />
        <select>
        <option value="one">one</option>
        <option value="two">two</option>
        <option value="three">three</option>
        </select>
        <input type="checkbox" /><label for="check1">check 1</label>
    </p>
    <p id="group2">
        All elements in this row should get ENabled: 
        <input type="text" value="enabled by checkbox" disabled="disabled" />
        <select disabled="disabled">
        <option value="one">one</option>
        <option value="two">two</option>
        <option value="three">three</option>
        </select>
        <input type="checkbox" disabled="disabled" /><label for="check2">check 2</label>
    </p>
</form>
</body>
</html>

I would do something like this. I didn't test this, but it should get you started. Notice I removed almost all of the IDs, and instead just toggle the disabled property based on what it is already. I added two IDs, "group1" and "group2" to keep them separate from the checkbox which performs the action.

**seannarae** · 06-02-2009, 06:38 PM

I wasnt able to get a copy/paste of your example to work in a local page, and lack the JS chops to understand exactly why. actuating/trigger checkbox has no effect over the disable/enable toggle.

the group approach seems promising, but the final form will have multiple triggering checkboxes, enabling/disabling multiple form elements in different locations on the page.

but thanks for your time. I'll have to keep hacking away at it. feels like a solution is close.

**seannarae** · 06-02-2009, 07:16 PM

DANG it seems like i am closer to my goal with what i've provided below. A function that looks if the triggering element is checked or not. If checked is true, then disable or enable the stack of elements below it. The ELSE seems like it should do the opposite.

But running this throws a JS (syntax) error.

HTML Code:

<script language="javascript"> 
function Change()
{
if (document.form1.checkmain1.checked == true) 
  { document.form1.text1.disabled = true; }
  { document.form1.select1.disabled = true; }
  { document.form1.check1.disabled = true; }
  { document.form1.text2.disabled = false; }
  { document.form1.select2.disabled = false; }
  { document.form1.check2.disabled = false; }
else
  { document.form1.text1.disabled = false; }
  { document.form1.select1.disabled = false; }
  { document.form1.check1.disabled = false; }
  { document.form1.text2.disabled = true; }
  { document.form1.select2.disabled = true; }
  { document.form1.check2.disabled = true; }
}
</script>

HTML Code:

<input type="checkbox" id="checkmain1" onclick="Change()" /><label for="checkmain1">Enable/Disable</label>

**seannarae** · 06-02-2009, 07:26 PM

SOLVED

I totally mucked up the syntax under the function. seems clear to me now why it was throwing syntax errors before in the previous format. Here's what i am currently seeing as a working solution:

HTML Code:

<script language="javascript"> 
function Change()
{
if (document.form1.checkmain1.checked == true) 
  { 
  document.form1.text1.disabled = true;
  document.form1.select1.disabled = true;
  document.form1.check1.disabled = true;
  document.form1.text2.disabled = false;
  document.form1.select2.disabled = false;
  document.form1.check2.disabled = false; 
  }
else
  { 
  document.form1.text1.disabled = false;
  document.form1.select1.disabled = false;
  document.form1.check1.disabled = false;
  document.form1.text2.disabled = true;
  document.form1.select2.disabled = true;
  document.form1.check2.disabled = true;
  }
}
</script>

Only drawback i can forsee is that these two IF/ELSE stacks are going to be quite tall in my final page. I will need to change state on about 14 individual form elements (many more then i originally planned).