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

Discussion in 'Javascript' started by Marc, Nov 23, 2005.

  1. Marc

    Marc Guest

    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">
    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 =
    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;

    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:

    The HTML&JS for the second page (that doesn't work) is here:

    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.


    Marc, Nov 23, 2005
    1. Advertisements

  2. 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

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

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

    for(var i=0; i<elements.length; i++)
    if( elements.type=='checkbox' )
    elements.disabled = disabledCheckboxes;
    Stephen Chalmers, Nov 23, 2005
    1. Advertisements

  3. 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;
    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.


    | 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

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

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

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

    Thomas 'PointedEars' Lahn, Nov 23, 2005
  4. Marc

    Marc Guest

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

    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, Nov 23, 2005
  5. Marc

    Marc Guest

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

    I didn't write the function, someone in this group did, but I take your
    point and will act accordingly.
    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.
    That URL doesn't seem to work for me...
    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
    if you have no clue what I'm referring to.

    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. :(
    Fair point.

    Marc, Nov 23, 2005
  6. 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'.
    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.
    Stephen Chalmers, Nov 23, 2005
  7. 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] :)
    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.


    Thomas 'PointedEars' Lahn, Nov 23, 2005
  8. Marc

    Marc Guest

    I use Firefox, but I'm it has a similar feature.
    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, Nov 24, 2005
  9. Marc

    VK Guest

    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:
    VK, Nov 24, 2005
  10. Marc

    Marc Guest

    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?


    Marc, Nov 29, 2005
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.