Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts

    Question Validate checkbox?

    hi,
    I'm wondering how I can validate just one checkbox to make sure it's been checked before submitting the form? could someone please show me an example or point me in the right direction.

    thanks in advance for your time!
    -Ken

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,983
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    If you want only one checked it is simpler to use radio buttons.

    Here is a script by Vic Phillips:-



    <script language="JavaScript" type="text/javascript">
    <!--
    // Form Compendium f4 (15-04-2005)
    // Check One Checkbox
    // by Vic Phillips http://www.vicsJavaScripts.org.uk

    // Check that One Checkbox button from each group is checked
    // For as many groups as required

    // Application Note

    // CheckBoxes must be within span tags with a title attribute
    // All checkboxes with a parent span with the same title are consided a group.
    // There may be any number of checkboxes within the span.
    // There may be as many groups as required.
    // There may be other elements within the span

    // The span title will be removed during initialisation

    // Each group is initialised with a <body> onload event
    // <body onload="f4_InitCheckOne('*GroupTitle*','Group 2','Group 3');">
    // where
    // *GroupTitle* = the title of the parent span of the checkbox, used the Checkbox group name (string)

    // An event call f4_CheckOne()
    // will activate an alert if one from each group has not been checked
    // The alert will display the group name

    // Eample HTML Code
    // Checkbox Group 2<br>
    // <span title="Checkbox Group 2">
    // <input type="checkbox" name="CheckboxGroup2">
    // <input type="checkbox" name="CheckboxGroup2">
    // </span>

    // All variable, function etc. names are prefixed with 'f4_' to minimise conflicts with other javascripts

    // Functional Code

    // NO NEED to Change

    var f4_All,f4_IPs,f4_NotCkd,f4_Alert;
    var f4_GrpAry=new Array();

    function f4_InitCheckOne(){
    f4_GrpAry=new Array();
    for (f4_0=0;f4_0<f4_InitCheckOne.arguments.length;f4_0++){
    f4_GrpAry[f4_GrpAry.length]=new Array();
    f4_GrpAry[f4_GrpAry.length-1][0]=f4_InitCheckOne.arguments[f4_0];
    }
    f4_All=document.getElementsByTagName('SPAN');
    for (f4_1=0;f4_1<f4_All.length;f4_1++){
    for (f4_2=0;f4_2<f4_GrpAry.length;f4_2++){
    if (f4_All[f4_1].title==f4_GrpAry[f4_2][0]){
    f4_All[f4_1].removeAttribute('title');
    f4_IPs=f4_All[f4_1].getElementsByTagName('INPUT');
    for (f4_3=0;f4_3<f4_IPs.length;f4_3++){
    if (f4_IPs[f4_3].type=='checkbox'){
    f4_GrpAry[f4_2][f4_GrpAry[f4_2].length]=f4_IPs[f4_3];
    }
    }
    }
    }
    }
    }

    function f4_CheckOne(){
    f4_Alert='';
    for (f4_3=0;f4_3<f4_GrpAry.length;f4_3++){
    f4_NotCkd=true;
    for (f4_4=1;f4_4<f4_GrpAry[f4_3].length;f4_4++){
    if (f4_GrpAry[f4_3][f4_4].checked){
    f4_NotCkd=false;
    }
    }
    if (f4_NotCkd){
    f4_Alert+=', '+f4_GrpAry[f4_3][0];
    }
    }
    if (f4_Alert!=''){
    alert('Pease Select One from:\n'+f4_Alert);
    return false;
    }
    return true;
    }


    //-->
    </script>

  • #3
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    hmm, that seems like alot to just validate one checkbox,

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,983
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Well, you could have done what I have done and used the SEARCH facility.

    I have come up with:-

    http://forums.devshed.com/archive/t-...box-Validation

    which ought to meet you need.

  • #5
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    ok, i found this:


    <script type="text/javascript" language="JavaScript">
    <!--
    function checkCheckBoxes(theForm) {
    if (theForm.CHECKBOX_1.checked == false)
    {
    alert ('You didn\'t choose any of the checkboxes!');
    return false;
    } else {
    return true;
    }
    }
    //-->
    </script>


    <form action="../" onsubmit="return checkCheckBoxes(this);">
    <p><input type="CHECKBOX" name="CHECKBOX_1" value="This..."> This...</p>
    <p><input type="SUBMIT" value="Submit!"></p>
    </form>


    much better;-)

    -Ken

  • #6
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    one more question,

    is there a way to alter this code to work on type='radio' buttons?


    thanks again for your time!

    -Ken

  • #7
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    945
    Thanks
    0
    Thanked 129 Times in 128 Posts
    <script type="text/javascript" language="JavaScript">
    <!--
    function checkCheckBoxes(theForm) {
    if (theForm.RADIO_1[0].checked == false)
    {
    alert ('You must choose "Yes" yo continue');
    return false;
    } else {
    return true;
    }
    }
    //-->
    </script>


    <form action="../" onsubmit="return checkCheckBoxes(this);">
    <p><input type="RADIO" name="RADIO_1" value="This...">YES</p>
    <p><input type="RADIO" name="RADIO_1" value="This..." Checked>NO</p>
    <p><input type="SUBMIT" value="Submit!"></p>
    </form>

  • #8
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts

    Question

    hmm, ok,
    but the form I have has no radio's selected,
    and I want to make them pick one, how can I modify this to work like this?

    sorry, i know very little about javascript code..

    thanks again,
    -Ken

  • #9
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    ok,
    I see how to make them select a box:

    <script type="text/javascript" language="JavaScript">
    <!--
    function checkCheckBoxes(theForm) {
    if (theForm.RADIO_1[0].checked == false && theForm.RADIO_1[1].checked == false)
    {
    alert ('You must choose an option to continue');
    return false;
    } else {
    return true;
    }
    }
    //-->
    </script>


    only problem is that, the number of radio buttons will change dynamicly as they are generated from the php/mysql.

    any ideas?

    thanks again for your time!
    -Ken

  • #10
    Regular Coder
    Join Date
    Sep 2005
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    PHP Code:
    for (i=0;i<document.forms[0].radios.length;i++)
    {
        if (
    document.forms[0].radios[i].checked)
        {
            
    user_input document.forms[0].radios[i].value;
        }
    }
    alert(user_input
    Check here for a good discussion on using different form elements.

  • #11
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts

    Question

    ok,
    But like i said, i don't know very much javascript,
    so I'm not sure how to use that code in my script.

    thanks again for your time!
    -Ken

  • #12
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    945
    Thanks
    0
    Thanked 129 Times in 128 Posts
    if you look at the two radiobuttons you will see that i have added "Checked" to the last of them. This ensures that this radiobutton is selected when the page is loaded

    Radiobutton is for choosing one of the options.
    If you click on a radiobutton then all other buttons with the same name will get unchecked

    If you try to paste my code to a page you will see that "NO" is selected when the page has loaded
    if you then click on "YES" you will see that the dot moves from "NO" to "YES"
    and when the dot is there then theForm.RADIO_1[0].checked will be "true" but when the dot is at "NO" then theForm.RADIO_1[0].checked will be "false"

  • #13
    Regular Coder
    Join Date
    Aug 2005
    Posts
    257
    Thanks
    8
    Thanked 0 Times in 0 Posts
    I have four radibuttons and I want do the following thing: " If one of the four radiobuttons was selected this it is true otherwise returns a 'alert'

    names fo my radiobuttons: visa, mastercard, ae, discover

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,983
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Quote Originally Posted by urgido
    I have four radibuttons and I want do the following thing: " If one of the four radiobuttons was selected this it is true otherwise returns a 'alert'

    names fo my radiobuttons: visa, mastercard, ae, discover

    The answer is right here at

    Validate Date


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •