Radio Button/Scheckbox option to validate Form

Discussion in 'Javascript' started by NishSF, Nov 16, 2005.

  1. NishSF

    NishSF Guest

    Would anyone have any suggestions/javascript code so that if one clicks
    the Radio Button "Yes" below he has the option of selecting any of the
    six CheckBox below. If the user clicks on Radio Button "No", he should
    not have the option of clicking on any of the six checkboxes. See Code
    attached. Thank you so much in advance for your help as I can't get to
    make this combo work.


    <p>Did you have any problems finding any of the information or
    documents required to complete the Self-Registration process?<br />
    <input name="InfoFindProblems" type="radio" value="yes" />
    Yes
    <input name="InfoFindProblems" type="radio" value="no"
    onChange="disableBoxes(this.checked)" />
    No</p>
    <p> If yes, please indicate which (select all that apply): <br
    />

    Declaration page <br />
    <input name="ProblemARE" type="checkbox" id="ProblemARE"
    value="1" />
    Annual Rating Endorsement [A.R.E.] <br />
    <input name="ProblemGrpNum" type="checkbox"
    id="ProblemGrpNum" value="2" />
    Group Number <br />
    <input name="ProblemPolNum" type="checkbox"
    id="ProblemPolNum" value="3" />
    Policy Number<br />
    <input name="ProblemSignDt" type="checkbox"
    id="ProblemSignDt" value="4" />
    Countersign Date<br />
    <input name="ProblemDOCode" type="checkbox"
    id="ProblemDOCode" value="5" />
    District Office Code </p>
    NishSF, Nov 16, 2005
    #1
    1. Advertising

  2. NishSF

    RobG Guest

    NishSF wrote:
    > Would anyone have any suggestions/javascript code so that if one clicks
    > the Radio Button "Yes" below he has the option of selecting any of the
    > six CheckBox below. If the user clicks on Radio Button "No", he should
    > not have the option of clicking on any of the six checkboxes. See Code
    > attached. Thank you so much in advance for your help as I can't get to
    > make this combo work.


    Some issues for you to think over in regard to your use of radio buttons.

    1. There is some uncertainty regarding whether or not at least one radio
    button should always be selected by default.

    <URL:http://www.w3.org/TR/html4/interact/forms.html#radio>

    I guess you should decide whether 'Yes' or 'No' should be checked by
    default and ensure one of them is.

    2. If you don't have one selected by default, what does neither yes nor
    no mean? And once the user has selected one or the other, they can't
    get back to neither selected without resetting the entire form.

    3. The buttons should be enabled by default else users without script
    can't access them. So what criterion should be used to disable them?
    You need an onload function that makes a decision and enables/disables
    them accordingly. I've used 'if yes isn't checked, disable them'.

    4. If the user checks yes, then selects some checkboxes, then checks no,
    should the checked boxes be unchecked? Once disabled, they won't be
    sent but they will still appear checked and can't be unchecked without
    answering yes, un-checking them and checking no again.

    An alternative is to use a single yes/no checkbox instead of two radio
    buttons - but you might think that confusing too.

    Just food for thought, the final decision is of course yours. I've
    given an example below using your original code with no radio button
    checked by default.

    My preference would be to not have the radio buttons at all, and just
    have the question as:

    "If you had problems ... please indicate which (select all that
    apply):"
    [checkbox] problem 1
    [checkbox] problem 2
    ...

    If none of the boxes are checked, the user had no problems. If some are,
    they did - and no need for script at all.


    > <p>Did you have any problems finding any of the information or
    > documents required to complete the Self-Registration process?<br />
    > <input name="InfoFindProblems" type="radio" value="yes" />
    > Yes
    > <input name="InfoFindProblems" type="radio" value="no"
    > onChange="disableBoxes(this.checked)" />


    onchange works differently in different browsers. According to the
    specification, onchange should fire:

    "...when a control loses the input focus and its value has been
    modified since gaining focus"

    <URL:http://www.w3.org/TR/html4/interact/scripts.html#adef-onchange>

    That is what IE does. So when the user clicks on the control, nothing
    happens until they click somewhere else, making it appear as if the
    event is in response to the second click.

    Firefox fires the event immediately (essentially as an onclick). The
    usual solution is to fire the event using onclick to get consistent
    behaviour.


    > No</p>
    > <p> If yes, please indicate which (select all that apply): <br
    > />
    >
    > Declaration page <br />
    > <input name="ProblemARE" type="checkbox" id="ProblemARE"
    > value="1" />
    > Annual Rating Endorsement [A.R.E.] <br />
    > <input name="ProblemGrpNum" type="checkbox"
    > id="ProblemGrpNum" value="2" />
    > Group Number <br />
    > <input name="ProblemPolNum" type="checkbox"
    > id="ProblemPolNum" value="3" />
    > Policy Number<br />
    > <input name="ProblemSignDt" type="checkbox"
    > id="ProblemSignDt" value="4" />
    > Countersign Date<br />
    > <input name="ProblemDOCode" type="checkbox"
    > id="ProblemDOCode" value="5" />
    > District Office Code </p>
    >


    Your markup indicates you may be using XHTML. In that case, modify your
    script elements accordingly.

    <URL:http://www.w3.org/TR/xhtml1/#h-4.8>

    If you are using HTML, don't use ' />' to close empty element tags, it
    is not valid HTML and potentially harmful. I've assumed you are really
    using HTML:


    <script type="text/javascript">

    function disableBoxes()
    {
    var form = document.forms['formA'];
    var cBoxes = ['ProblemARE', 'ProblemGrpNum', 'ProblemPolNum',
    'ProblemSignDt', 'ProblemDOCode'];
    var flag = !form.InfoFindProblems[0].checked;
    var i = cBoxes.length;
    while (i--){
    form[cBoxes].disabled = flag;
    }
    }

    window.onload = disableBoxes;

    </script>

    <form name="formA" action="">
    <p>Did you have any problems finding any of the information or
    documents required to complete the Self-Registration process?<br>
    <input name="InfoFindProblems" type="radio" value="yes"
    onclick="disableBoxes();">Yes
    <input name="InfoFindProblems" type="radio" value="no"
    onclick="disableBoxes();">No</p>
    <p>If yes, please indicate which (select all that apply):<br>
    Declaration page<br>
    <input name="ProblemARE" type="checkbox" id="ProblemARE"
    value="1">Annual Rating Endorsement [A.R.E.]<br>
    <input name="ProblemGrpNum" type="checkbox"
    id="ProblemGrpNum" value="2">Group Number<br>
    <input name="ProblemPolNum" type="checkbox"
    id="ProblemPolNum" value="3">Policy Number<br>
    <input name="ProblemSignDt" type="checkbox"
    id="ProblemSignDt" value="4">Countersign Date<br>
    <input name="ProblemDOCode" type="checkbox"
    id="ProblemDOCode" value="5">District Office Code</p>
    </form>




    --
    Rob
    RobG, Nov 17, 2005
    #2
    1. Advertising

  3. NishSF

    Nish Malik Guest

    Rob,

    Thank you so much for the detailed explanation as well as the code.

    Regards,
    Nish

    *** Sent via Developersdex http://www.developersdex.com ***
    Nish Malik, Nov 17, 2005
    #3
    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. Scott D Johnson
    Replies:
    1
    Views:
    1,049
    Scott D Johnson
    Sep 27, 2006
  2. Milsnips
    Replies:
    3
    Views:
    510
    Milsnips
    Mar 29, 2007
  3. Hiten
    Replies:
    1
    Views:
    609
    Vidar Petursson
    May 26, 2004
  4. David Jubinville

    Can't Validate Retun for Radio Button

    David Jubinville, Dec 20, 2004, in forum: Javascript
    Replies:
    3
    Views:
    89
  5. elia

    validate button radio in form

    elia, Mar 27, 2007, in forum: Javascript
    Replies:
    5
    Views:
    76
    Evertjan.
    Mar 27, 2007
Loading...

Share This Page