Javascript with forms

Discussion in 'Javascript' started by Marc, Oct 3, 2005.

  1. Marc

    Marc Guest

    Is there a way to produce 3 radio buttons, which when one is selected,
    enables 11 check boxes which are otherwise disabled (greyed out)?

    EXAMPLE:

    Option 1 --Radio buttons
    Option 2
    Option 3

    1 2 3 ... 11 --Check boxes, all disabled unless 'Option 3' is selected

    I hope I'm making myself clear...

    Marc
    Marc, Oct 3, 2005
    #1
    1. Advertising

  2. Marc

    RobG Guest

    Marc wrote:
    > Is there a way to produce 3 radio buttons, which when one is selected,
    > enables 11 check boxes which are otherwise disabled (greyed out)?
    >
    > EXAMPLE:
    >
    > Option 1 --Radio buttons
    > Option 2
    > Option 3
    >
    > 1 2 3 ... 11 --Check boxes, all disabled unless 'Option 3' is selected
    >
    > I hope I'm making myself clear...
    >


    The following should do something like what you want. setTimeout is
    used to run the function when the form is clicked so that if reset it
    clicked, it has time to reset the form before runCheck is run.

    If JavaScript is disabled, the checkboxes aren't disabled else users can
    never select them. You may want to clear the checkboxes when disabling
    them too - it's up to you.

    <script type="text/javascript">

    function doCheck(el, cbGroup)
    {
    var elChecked = el.checked;
    if (cbGroup && cbGroup.length){
    var i = cbGroup.length;
    while (i--){
    cbGroup.disabled = !elChecked;

    // Uncomment the following if boxes are to
    // be unchecked when disabled
    // if (!el.checked) cbGroup.checked = false;

    }
    }
    }

    function runChecks()
    {
    if ( !document.getElementById
    || !document.getElementsByTagName ){
    return;
    }
    var el = document.forms[0].elements['rg-1'][2];
    var div = document.getElementById('checkGroup');
    var cbGroup = div.getElementsByTagName('input');
    doCheck(el, cbGroup);
    }

    window.onload = runChecks;

    </script>
    <!--
    setTimeout used for onclick to allow reset to run before
    runChecks runs
    -->
    <form action="" onclick="setTimeout('runChecks()',50);">
    <div>
    <input type="radio" name="rg-1" checked>Opt one<br>
    <input type="radio" name="rg-1">Opt two<br>
    <input type="radio" name="rg-1">Opt three<br>
    </div>
    <div id="checkGroup">
    <input type="checkbox" name="cb-1">Check 1
    <input type="checkbox" name="cb-2">Check 2
    <input type="checkbox" name="cb-3">Check 3<br>
    </div>
    <div>
    <input type="reset">
    </div>
    </form>




    --
    Rob
    RobG, Oct 3, 2005
    #2
    1. Advertising

  3. Marc

    Erwin Moller Guest

    Marc wrote:

    > Is there a way to produce 3 radio buttons, which when one is selected,
    > enables 11 check boxes which are otherwise disabled (greyed out)?
    >
    > EXAMPLE:
    >
    > Option 1 --Radio buttons
    > Option 2
    > Option 3
    >
    > 1 2 3 ... 11 --Check boxes, all disabled unless 'Option 3' is selected
    >
    > I hope I'm making myself clear...
    >
    > Marc


    Hi Marc,

    Try something like this:
    1) Name your radiobuttons (of course):eg myGroup
    2) Add to each button a onClick eventhandler: checkIt()

    You'll end up with something like this:

    <form action="bla.php" name="orderform" Method="Post">
    <input type="radion" name="myGroup" value="eggs" checked
    onClick="checkIt('off');">eggs<br>
    <input type="radion" name="myGroup" value="apples"
    onClick="checkIt('off');">apples<br>
    <input type="radion" name="myGroup" value="pears"
    onClick="checkIt('on');">pears and subquestions active<br>

    <br>
    <input type="checkbox" name="bla1"> checkbox1<br>
    <input type="checkbox" name="bla2"> checkbox2<br>
    <input type="checkbox" name="bla3"> checkbox3<br>
    </form>
    In the above case the third option will enable the radiobuttons.

    3) get the checked radiobutton
    function checkIt(onoff){
    var disabledcheckboxes = (onoff == 'off');
    document.forms.orderForm.bla1.disabled = disabledcheckboxes;
    document.forms.orderForm.bla2.disabled = disabledcheckboxes;
    document.forms.orderForm.bla3.disabled = disabledcheckboxes;

    }
    }

    Not tested, just some code to get you going.
    In the above example I just send 'on' or 'off' to the function to decide
    what to do.
    If you want you can also loop over all radiobuttons and test for the one
    that is checked, by checking the checked-property (will return true or
    false).

    Good luck,

    Regards,
    Erwin Moller
    Erwin Moller, Oct 3, 2005
    #3
  4. Marc

    Marc Guest

    Thanks for your help. Please see my responses below.

    RobG wrote:
    > The following should do something like what you want. setTimeout is
    > used to run the function when the form is clicked so that if reset it
    > clicked, it has time to reset the form before runCheck is run.


    I don't need a reset button - this page is to be used as part of an
    administration section, so presumably I can remove the setTimeout()
    function?

    > If JavaScript is disabled, the checkboxes aren't disabled else users can
    > never select them. You may want to clear the checkboxes when disabling
    > them too - it's up to you.


    I know JavaScript won't be disabled, as I know the environment the users
    are running, do I need modify the script at all?

    > <script type="text/javascript">
    >
    > function doCheck(el, cbGroup)
    > {
    > var elChecked = el.checked;
    > if (cbGroup && cbGroup.length){
    > var i = cbGroup.length;
    > while (i--){
    > cbGroup.disabled = !elChecked;
    >
    > // Uncomment the following if boxes are to
    > // be unchecked when disabled
    > // if (!el.checked) cbGroup.checked = false;
    >
    > }
    > }
    > }
    >
    > function runChecks()
    > {
    > if ( !document.getElementById
    > || !document.getElementsByTagName ){
    > return;
    > }
    > var el = document.forms[0].elements['rg-1'][2];
    > var div = document.getElementById('checkGroup');
    > var cbGroup = div.getElementsByTagName('input');
    > doCheck(el, cbGroup);
    > }
    >
    > window.onload = runChecks;
    >
    > </script>
    > <!--
    > setTimeout used for onclick to allow reset to run before
    > runChecks runs
    > -->
    > <form action="" onclick="setTimeout('runChecks()',50);">
    > <div>
    > <input type="radio" name="rg-1" checked>Opt one<br>
    > <input type="radio" name="rg-1">Opt two<br>
    > <input type="radio" name="rg-1">Opt three<br>
    > </div>
    > <div id="checkGroup">
    > <input type="checkbox" name="cb-1">Check 1
    > <input type="checkbox" name="cb-2">Check 2
    > <input type="checkbox" name="cb-3">Check 3<br>
    > </div>
    > <div>
    > <input type="reset">
    > </div>
    > </form>


    I don't understand how the JavaScript detects which radio button is
    selected, if all are called rg-1... Sorry, my knowledge of JS is
    limited, would you mind explaining?

    Marc
    Marc, Oct 3, 2005
    #4
  5. Marc

    RobG Guest

    Marc wrote:
    > Thanks for your help. Please see my responses below.
    >
    > RobG wrote:
    >
    >> The following should do something like what you want. setTimeout is
    >> used to run the function when the form is clicked so that if reset it
    >> clicked, it has time to reset the form before runCheck is run.

    >
    >
    > I don't need a reset button - this page is to be used as part of an
    > administration section, so presumably I can remove the setTimeout()
    > function?


    Yes, but I think reset buttons are really handy...

    >
    >> If JavaScript is disabled, the checkboxes aren't disabled else users
    >> can never select them. You may want to clear the checkboxes when
    >> disabling them too - it's up to you.

    >
    >
    > I know JavaScript won't be disabled, as I know the environment the users
    > are running, do I need modify the script at all?


    You could make all the checkboxes disabled by default and remove the
    window.onload line. That would also let the reset button work properly
    without the setTimeout (if you decide to keep it that is... :) ).

    >
    >> <script type="text/javascript">
    >>
    >> function doCheck(el, cbGroup)
    >> {
    >> var elChecked = el.checked;
    >> if (cbGroup && cbGroup.length){
    >> var i = cbGroup.length;
    >> while (i--){
    >> cbGroup.disabled = !elChecked;
    >>
    >> // Uncomment the following if boxes are to
    >> // be unchecked when disabled
    >> // if (!el.checked) cbGroup.checked = false;
    >>
    >> }
    >> }
    >> }
    >>
    >> function runChecks()
    >> {
    >> if ( !document.getElementById
    >> || !document.getElementsByTagName ){
    >> return;
    >> }
    >> var el = document.forms[0].elements['rg-1'][2];


    This line gets a reference to the radio button to use for the check
    - document.forms[0] is the form
    - elements['rg-1'] is the collection of radio buttons
    - [2] is the third button (the numbering starts from 0)

    >> var div = document.getElementById('checkGroup');


    This line gets a reference to the div containing the checkboxes

    >> var cbGroup = div.getElementsByTagName('input');


    And this one uses the div reference to get a reference to the collection
    of input elements inside the div.

    >> doCheck(el, cbGroup);


    This line passes the element and collection references to doCheck

    >> }

    [...]

    >
    >
    > I don't understand how the JavaScript detects which radio button is
    > selected, if all are called rg-1... Sorry, my knowledge of JS is
    > limited, would you mind explaining?


    Radio buttons in a group must all have the same name. You can access
    them by their index within the radio group collection (see above).

    By putting the onclick on the form, a click on any child element will
    bubble up and run the form's onclick. It saves putting the onclick on
    all three radio buttons.


    --
    Rob
    RobG, Oct 3, 2005
    #5
    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. Brendan Miller

    Web Forms VS Windows Forms

    Brendan Miller, Aug 11, 2003, in forum: ASP .Net
    Replies:
    2
    Views:
    5,048
    Kevin Spencer
    Aug 11, 2003
  2. Eric
    Replies:
    2
    Views:
    1,352
    Tommy
    Feb 13, 2004
  3. jlopes151
    Replies:
    2
    Views:
    597
    Steve C. Orr [MVP, MCSD]
    Mar 14, 2005
  4. =?Utf-8?B?ZGF2aWQ=?=

    embedded windows forms into web forms for control

    =?Utf-8?B?ZGF2aWQ=?=, Apr 7, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    5,185
    =?Utf-8?B?ZGF2aWQ=?=
    Apr 10, 2005
  5. Eric
    Replies:
    2
    Views:
    447
Loading...

Share This Page