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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Form validation: Selecting a checkbox option

    I'd like to ensure that users select one of the checkbox options in multiple sections of a form.

    Below I have pasted the code for the function I've used which works for one checkbox set ("coverage"). However, I am unsure of how to make this work for another set of checkboxes (called "limit"; this code is at the bottom).

    Thanks


    function submitIt(appForm){

    coverageChoice=appForm.coverage.selectedIndex
    if(appForm.coverage.options[coverageChoice].value==""){
    alert("Please select a coverage")
    return false
    }
    }

    //End hiding script-->

    <!--Section of code with checkboxes:

    <td width="17%">
    <select name="coverage">
    <option value="" selected>Choose a coverage
    <option value="GL">GL
    <option value="Professional">Professional
    <option value="Property">Property (attach accord app)
    </select>
    </td>
    <td width="17%">
    <select name="limit">
    <option value="" selected>Choose a limit
    <option value="100/100">100/100
    <option value="300/300">300/300
    <option value="500/500">500/500
    </select>
    </td>
    -->

    Thanks for your help!
    Jennifer

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Round Rock, Texas
    Posts
    443
    Thanks
    0
    Thanked 0 Times in 0 Posts
    First, you need to add a line to your function so that it always returns something.
    Code:
     08-07-2002 03:01 PM
                                                   
                                                                                                                     
    function submitIt(appForm){
       coverageChoice=appForm.coverage.selectedIndex 
    
       if(appForm.coverage.options[coverageChoice].value==""){ 
          alert("Please select a coverage") 
          return false 
       } 
    return true;
    }
    Now, change the function so you pass, not the entire form, but just the checkbox set. Also notice I renamed the function so when you call it, it "sounds right" when you use it.

    BTW, I don't believe "selectedIndex" or "options" are properties of checkboxes. They are properties of <select> objects (aka comboboxes).

    Here's something I found:
    If multiple objects on the same form have the same NAME attribute, an array of the given name is created automatically. Each element in the array represents
    an individual Form object. Elements are indexed in source order starting at 0. For example, if two Text elements and a Button element on the same form
    have their NAME attribute set to "myField", an array with the elements myField[0], myField[1], and myField[2] is created. You need to be aware of this
    situation in your code and know whether myField refers to a single element or to an array of elements.
    I take this to mean that we can use the array object properties (e.g. "length")

    Code:
    function itemChecked (thegroup) {
       var wasSelected = new Boolean (false);
    
       for (var i=0; i<thegroup.length; i++) {
          if (thegroup[i].checked) {
             wasSelected = true;
          }     
       }
       return wasSelected;
    }  // function itemSelected()
    Now you use the function thus:
    Code:
    if (itemChecked (appForm.coverage) {
       // a good thing, continue processing
    }else{
       // alert the user to check something
       // and/or set a master error switch, etc.
    }
    See how "if itemChecked" seems to be self explanatory; compared to "if submitIt"? Make function names say what they do; in this case, making sure something was checked.

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    <script type="text/javascript" language="javascript">

    var msg = new Object();
    msg['coverage'] = 'Please select a coverage.';
    msg['limit'] = 'Please select a coverage limit.';

    function check_selects(f) {
    var el, e = 0;
    while (el = f.elements[e++]) {
    if (el.type == 'select-one' && el[el.selectedIndex].defaultSelected) {
    alert(msg[el.name]);
    el.focus();
    return false;
    }
    }
    }

    </script>
    </head>
    <body>
    <form onsubmit="return check_selects(this)">

    http://www.idocs.com/tags/forms/_SELECT.html

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    41° 8' 52" N -95° 53' 31" W
    Posts
    3,660
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That is very elegant adios!.. however, although I can understand the process now, I wouldn't have understood that at ALL 6 months ago! (I have learned a LOT from you, dude - and I'm still learning! You should make your own programming logic website - alternatively, I wholeheartedly recommend adios for a javascript (and possibly other languages) moderator position!)
    Last edited by whammy; 08-08-2002 at 12:46 AM.
    Former ASP Forum Moderator - I'm back!

    If you can teach yourself how to learn, you can learn anything. ;)

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    whammy..........

    If I were a mod this board would be in flames...just as well I'm not...

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    i agree with whammy...
    but this is worth mentioning though

    <script type="text/javascript" language="javascript">

    var msg = new Object();
    msg['coverage'] = 'Please select a coverage.';
    msg['limit'] = 'Please select a coverage limit.';

    function check_selects(f) {
    var el, e = 0;
    while (el = f.elements[e++]) {
    if (el.type == 'select-one' && el[el.selectedIndex].defaultSelected) {
    alert(msg[el.name]);
    el.focus();
    return false;
    }
    }
    return true;
    }

    </script>
    </head>
    <body>
    <form onsubmit="return check_selects(this)">

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Thanks glenngv, like your stuff too....

    It'll still submit with no return value but, you're right, sloppy coding: return something somewhere, return something everywhere. Ugh.

  • #8
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow! You guys are great...what an awesome response. Now I need to just sift through all my beautiful packages of code you've sent me and make sure I understand the logic behind it all...

    Much appreciated!

    Jennifer


  •  

    Posting Permissions

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