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">
    //<![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
    Marc, Nov 23, 2005
    #1
    1. Advertising

  2. Marc wrote:

    > 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;
    }

    --
    S.C.
    Stephen Chalmers, Nov 23, 2005
    #2
    1. Advertising

  3. Marc wrote:

    > [...] 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[


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

    > 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
    Thomas 'PointedEars' Lahn, Nov 23, 2005
    #3
  4. Marc

    Marc Guest

    Re: Problem using onClick on a radio button to enable/disable checkboxes

    Stephen Chalmers wrote:
    >>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.


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

    Marc Guest

    Re: Problem using onClick on a radio button to enable/disable checkboxes

    Thomas 'PointedEars' Lahn wrote:
    >><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
    Marc, Nov 23, 2005
    #5
  6. Marc wrote:

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

    --
    S.C.
    Stephen Chalmers, Nov 23, 2005
    #6
  7. Marc wrote:

    > Thomas 'PointedEars' Lahn wrote:
    >> <URL:http://jibbering.com/faq/#FAQ4_43>

    >
    > 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] :)

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


    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
    Thomas 'PointedEars' Lahn, Nov 23, 2005
    #7
  8. Marc

    Marc Guest

    Re: Problem using onClick on a radio button to enable/disable checkboxes

    Stephen Chalmers wrote:
    >>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 use Firefox, but I'm it has a similar feature.

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


    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
    Marc, Nov 24, 2005
    #8
  9. Marc

    VK Guest

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

    Marc Guest

    Re: Problem using onClick on a radio button to enable/disable checkboxes

    Stephen Chalmers wrote:
    > 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
    Marc, Nov 29, 2005
    #10
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Mark
    Replies:
    24
    Views:
    1,166
    Ed Jay
    Jan 7, 2006
  2. Hiten
    Replies:
    1
    Views:
    612
    Vidar Petursson
    May 26, 2004
  3. MEM

    Disable/enable onclick event

    MEM, Oct 30, 2003, in forum: Javascript
    Replies:
    1
    Views:
    101
    Rick Measham
    Oct 30, 2003
  4. Dustin

    Disable/Enable Link onClick

    Dustin, Mar 6, 2007, in forum: Javascript
    Replies:
    0
    Views:
    128
    Dustin
    Mar 6, 2007
  5. john_woo
    Replies:
    6
    Views:
    135
    matt.snider
    Mar 26, 2010
Loading...

Share This Page