Problem using onClick on a radio button to enable/disable check boxes

[Marc]

Okay, here's the problem - I have 3 radio buttons, and 11 check boxes
(which are disabled by default). I have the javascript below which when
the last radio button is clicked, enables the checkboxes.

<script type="text/javascript">
//<![CDATA[
function checkIt(onoff){
var disabledcheckboxes = (onoff == 'off');
document.forms.addUserForm.permhome.disabled = disabledcheckboxes;
document.forms.addUserForm.permswimming.disabled = disabledcheckboxes;
document.forms.addUserForm.permhealth_clubs.disabled = disabledcheckboxes;
document.forms.addUserForm.permplay_centre.disabled = disabledcheckboxes;
document.forms.addUserForm.permmembership.disabled = disabledcheckboxes;
document.forms.addUserForm.permfitness_classes.disabled =
disabledcheckboxes;
document.forms.addUserForm.permparties.disabled = disabledcheckboxes;
document.forms.addUserForm.permsauna.disabled = disabledcheckboxes;
document.forms.addUserForm.permactivities.disabled = disabledcheckboxes;
document.forms.addUserForm.permfunctions.disabled = disabledcheckboxes;
document.forms.addUserForm.permcreche.disabled = disabledcheckboxes;
}
//]]>
</script>

I used the JavaScript on 2 pages, on almost identical forms, and for
some reason it doesn't work on the 2nd one - they just stay disabled,
irrespective of what you click.

The HTML&JS for the first page (the one that works) is here:
http://p.shurl.net/37

The HTML&JS for the second page (that doesn't work) is here:
http://p.shurl.net/38

I'm sorry I can't point you to the actual pages, but they're within a
login-protected admin interface.

Any help would be appreciated.

Thanks!

Marc

 

[Stephen Chalmers]

I used the JavaScript on 2 pages, on almost identical forms, and for
some reason it doesn't work on the 2nd one - they just stay disabled,
irrespective of what you click.

That's because the code is trying to act upon a non-existent form,
which would have been immediately obvious if you had enabled error
reporting.

As you're acting on all the checkboxes in the form, you could simplify
that function slightly:

function checkIt(onoff)
{
var disabledCheckboxes = (onoff == 'off');

with(document.forms.manageUserForm)
for(var i=0; i<elements.length; i++)
if( elements.type=='checkbox' )
elements.disabled = disabledCheckboxes;
}

 

[Thomas 'PointedEars' Lahn]

[...] I have 3 radio buttons, and 11 check boxes (which are disabled by
default). I have the javascript below which when the last radio button
is clicked, enables the checkboxes.

<script type="text/javascript">
//<![CDATA[

function checkIt(onoff){
var disabledcheckboxes = (onoff == 'off');
document.forms.addUserForm.permhome.disabled = disabledcheckboxes;
document.forms.addUserForm.permswimming.disabled = disabledcheckboxes;
document.forms.addUserForm.permhealth_clubs.disabled =
disabledcheckboxes;
document.forms.addUserForm.permplay_centre.disabled =
disabledcheckboxes;
document.forms.addUserForm.permmembership.disabled = disabledcheckboxes;
document.forms.addUserForm..permfitness_classes.disabled =
disabledcheckboxes;
document.forms.addUserForm.permparties.disabled = disabledcheckboxes;
document.forms.addUserForm.permsauna.disabled = disabledcheckboxes;
document.forms.addUserForm.permactivities.disabled = disabledcheckboxes;
document.forms.addUserForm.permfunctions.disabled = disabledcheckboxes;
document.forms.addUserForm.permcreche.disabled = disabledcheckboxes;

Did it not occurred to you that there is much redundancy which makes
this hard to maintain?

var es = document.forms['addUserForm'].elements;
es['permhome'].disabled =
es['permswimming'].disabled =
... = (onoff == 'off');

Or you could easily do a loop.

var es = document.forms['addUserForm'].elements;
for (var a = ['permhome', 'permswimming', ...], i = a.length; i--
{
es[a].disabled = disabledcheckboxes;
}

}
//]]>
</script>

I used the JavaScript on 2 pages, on almost identical forms, and for
some reason it doesn't work on the 2nd one - they just stay disabled,
irrespective of what you click.

The HTML&JS for the first page (the one that works) is here:
http://p.shurl.net/37

The HTML&JS for the second page (that doesn't work) is here:
http://p.shurl.net/38

The second form is named/IDed "manageUserForm", not "addUserForm" as the
first, hence document.forms.addUserForm evaluates to `undefined' and
document.forms.addUserForm.something results in a ReferenceError.

<URL:http://jibbering.com/faq/#FAQ4_43>

| onsubmit="try { var myValidator = validate_manageUserForm; } catch(e)
| { return true; } return myValidator(this);"

is bogus. `try..catch' breaks with script engines that do not
support it, and it does not strike me as being necessary here.
Especially there is no such identifier as `validate_manageUserForm'
anywhere in the document.

| <input onclick="checkIt('on');"

Instead of lengthy inefficient `document.forms.addUserForm.', you could
easily pass `this' for second argument of checkIt() and use its `form'
property. This would also eliminate dependency of the `form' elements
name/ID:

function checkIt(onoff, e)
{
if (e.form)
{
var es = e.form.elements;
if (es)
{
// ...
}
}
}

<form ... name="whatever">
...
<input ... onclick="checkIt('on', this);"
...
</form>

You should consider using numbers, instead of strings, for disabled states.


PointedEars

 

[Marc]

That's because the code is trying to act upon a non-existent form,
which would have been immediately obvious if you had enabled error
reporting.

JavaScript isn't my strong point, how do I turn error reporting on?

As you're acting on all the checkboxes in the form, you could simplify
that function slightly:

function checkIt(onoff)
{
var disabledCheckboxes = (onoff == 'off');

with(document.forms.manageUserForm)
for(var i=0; i<elements.length; i++)
if( elements.type=='checkbox' )
elements.disabled = disabledCheckboxes;
}

I didn't write the function - someone in this group did, but that JS
seems to make sense to me, so I'll modify it using that, thanks.

Marc

 

[Marc]

<script type="text/javascript">
//<![CDATA[

<URL:http://hixie.ch/advocacy/xhtml>

Thanks, I'll have a read of this in detail later.

function checkIt(onoff){
var disabledcheckboxes = (onoff == 'off');
document.forms.addUserForm.permhome.disabled = disabledcheckboxes;
document.forms.addUserForm.permswimming.disabled = disabledcheckboxes;
document.forms.addUserForm.permhealth_clubs.disabled =
disabledcheckboxes;
document.forms.addUserForm.permplay_centre.disabled =
disabledcheckboxes;
document.forms.addUserForm.permmembership.disabled = disabledcheckboxes;
document.forms.addUserForm..permfitness_classes.disabled =
disabledcheckboxes;
document.forms.addUserForm.permparties.disabled = disabledcheckboxes;
document.forms.addUserForm.permsauna.disabled = disabledcheckboxes;
document.forms.addUserForm.permactivities.disabled = disabledcheckboxes;
document.forms.addUserForm.permfunctions.disabled = disabledcheckboxes;
document.forms.addUserForm.permcreche.disabled = disabledcheckboxes;

Did it not occurred to you that there is much redundancy which makes
this hard to maintain?

var es = document.forms['addUserForm'].elements;
es['permhome'].disabled =
es['permswimming'].disabled =
... = (onoff == 'off');

Or you could easily do a loop.

var es = document.forms['addUserForm'].elements;
for (var a = ['permhome', 'permswimming', ...], i = a.length; i--
{
es[a].disabled = disabledcheckboxes;
}

I didn't write the function, someone in this group did, but I take your
point and will act accordingly.

The second form is named/IDed "manageUserForm", not "addUserForm" as the
first, hence document.forms.addUserForm evaluates to `undefined' and
document.forms.addUserForm.something results in a ReferenceError.

Thanks, I should have noticed that, but after a long day with JavaScript
not being my strong point, I obviously missed it when trying to debug.

<URL:http://jibbering.com/faq/#FAQ4_43>

That URL doesn't seem to work for me...

| onsubmit="try { var myValidator = validate_manageUserForm; } catch(e)
| { return true; } return myValidator(this);"

is bogus. `try..catch' breaks with script engines that do not
support it, and it does not strike me as being necessary here.
Especially there is no such identifier as `validate_manageUserForm'
anywhere in the document.

There is, it's just that I snipped that JavaScript out as it wasn't
relevant to my problem. In any event, I have no control over that
scripting, it's outputted by a PEAR package. (see http://pear.php.net/
if you have no clue what I'm referring to.

| <input onclick="checkIt('on');"

Instead of lengthy inefficient `document.forms.addUserForm.', you could
easily pass `this' for second argument of checkIt() and use its `form'
property. This would also eliminate dependency of the `form' elements
name/ID:

function checkIt(onoff, e)
{
if (e.form)
{
var es = e.form.elements;
if (es)
{
// ...
}
}
}

<form ... name="whatever">
...
<input ... onclick="checkIt('on', this);"
...
</form>

Can you explain this in a bit simpler terms please? JavaScript isn't my
strong point and I'm not really following what you're saying.

You should consider using numbers, instead of strings, for disabled states.

Fair point.

Marc

 

[Stephen Chalmers]

JavaScript isn't my strong point, how do I turn error reporting on?

Presumably I.E. something like:

Tools / Internet Options / Advanced / Browsing / 'Display notification
about every script error'

Remember this will be reset if a broken website reports an error and
you select 'do not show me this again'.

I didn't write the function - someone in this group did,

They may have written it to act on one or two elements, but if they had
offered it the way you had it, then others would have had something to
say about it.

 

[Thomas 'PointedEars' Lahn]

That URL doesn't seem to work for me...

Should work again. I also had a short timeout a few minutes ago.

Summarized, you should enter `javascript:' in Firefox's/Mozilla's Location
Bar as "Does not work" is a useless error description. [psf 4.11]

Can you explain this in a bit simpler terms please? JavaScript isn't my
strong point and I'm not really following what you're saying.

I'll try, however it is mostly not related to JavaScript but to markup/DOM.

The `input' element is a descendant (child, or child of a child, aso.)
element of a `form' element, meaning in markup/DOM terms that the former
is (part of) the latter's content. That `form' element is referred to in
`checkIt' (or so it appears to be) invoked by an event listener for the
former element.

In intrinsic event handler attribute's values like onclick's, `this' refers
to the element that fired the event. So you can pass `this' as second
argument to checkIt(), providing a reference to the `input' element. In
checkIt(), after feature-testing it, you access the HTMLFormElement object
referred to by the `form' property of the passed object which happens to be
the element object representing the ancestor `form' element. This is what
you are looking for in order to access the other controls in that form.

Then you retrieve a reference to the HTMLCollection object referenced by
the `elements' property of the HTMLFormElement object which encapsulates
references to all controls in that `form' element. An additional feature
test makes sure that this collection exists before you access its
properties, i.e. the element objects representing the form controls.

Since passing `this' removes any dependence on the value of the `form'
element's `name' or `id' attribute, they do not matter anymore. What
matters now is only the ancestor-descendant relationship between the
`form' element and the `input' element.


HTH

PointedEars

 

[Marc]

Presumably I.E. something like:

Tools / Internet Options / Advanced / Browsing / 'Display notification
about every script error'

Remember this will be reset if a broken website reports an error and
you select 'do not show me this again'.

I use Firefox, but I'm it has a similar feature.

They may have written it to act on one or two elements, but if they had
offered it the way you had it, then others would have had something to
say about it.

Nope, I had 10 checkboxes initially so I've only added 1. I didn't get
much of a response to the thread in the first place.

Marc

 

[VK]

The HTML&JS for the first page (the one that works) is here:
http://p.shurl.net/37

The HTML&JS for the second page (that doesn't work) is here:
http://p.shurl.net/38

I'm sorry I can't point you to the actual pages, but they're within a
login-protected admin interface.

Any help would be appreciated.

Try to name both forms equally - either "addUserForm" or
"manageUserForm" - that should help greatly ;-)

Or even better (if guaranteed to have only one form per screen) address
you form this way:
document.forms[0]

 

[Marc]

As you're acting on all the checkboxes in the form, you could simplify
that function slightly:

function checkIt(onoff)
{
var disabledCheckboxes = (onoff == 'off');

with(document.forms.manageUserForm)
for(var i=0; i<elements.length; i++)
if( elements.type=='checkbox' )
elements.disabled = disabledCheckboxes;
}

Okay, so I used this function, but I still have one problem. Sometimes,
the 'user' radio button (the one which when clicked enables the
checkboxes) is checked when the page is loaded. This means you have to
click the already checked radio button to enable the checkboxes.

Is there a way to detect that the radio button is checked and enable the
checkboxes immediately without involving a whole load of javascript?

Thanks!

Marc