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
    New Coder
    Join Date
    Sep 2012
    Posts
    30
    Thanks
    25
    Thanked 0 Times in 0 Posts

    Need help using if statement to check checkboxes

    I'm trying to protect against empty check boxes. The code works when their empty but also when they aren't so I guess it's not truly working. Also I know there has to be an easier way to check to see if their empty.

    Javascript:
    Code:
    if(document.form[0].interest1.checked == false && 
    document.form[0].interest2.checked == false &&
    document.form[0].interest3.checked == false &&
    document.form[0].interest4.checked == false &&
    document.form[0].interest5.checked == false){
    window.alert("You did not select an interest");
    return false;
    }else{
    return true;
    }

    html:
    Code:
    <input type="checkbox" name="interest1" value="entertainment">Entertainment
    <br>
    <input type="checkbox" name="interest2" value="business">Business
    <br>
    <input type="checkbox" name="interest3" value="music">Music
    <br>
    <input type="checkbox" name="interest4" value="shopping">Shopping
    <br>
    <input type="checkbox" name="interest5" value="travel">Travel
    Full code(in case needed):
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Chapter 11</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
    function confirmsubmit(){
    if(document.forms[0].visitor_name.value == "" || document.forms[0].visitor_name.value == "Enter your name"){
    window.alert("You did not enter your name");
    return false;
    }
    if(document.forms[0].email.value == "" || 
    document.forms[0].email.value == "Enter your e-mail address"){
    window.alert("You did not enter your email address");
    return false;
    }
    if(document.forms[0].pass1.value != document.forms[0].pass2.value){
    window.alert("Your passwords do not match");
    } 
    if(document.forms[0].pass1.value == "" || document.forms[0].pass2.value == ""){
    window.alert("One of your passwords are blank");
    }
    if(document.forms[0].question.value == "blank"){
    window.alert("You did not select a security question");
    }
    if(document.forms[0].ans.value == ""){
    window.alert("Your security question answer is blank");
    }
    var emailvis = false;
    for(var i=0;i<2;++i){
    if(document.forms[0].offer[i].checked == true){
    emailvis = true;
    break;
    }
    if(emailvis == false){
    window.alert("You must select a interest");
    return false;
    }
    }
    if(document.form[0].interest1.checked == false && 
    document.form[0].interest2.checked == false &&
    document.form[0].interest3.checked == false &&
    document.form[0].interest4.checked == false &&
    document.form[0].interest5.checked == false){
    window.alert("You did not select an interest");
    return false;
    }else{
    return true;
    }
    }
    </script>
    </head>
    <body>
    <h1>Web Site Registration Form</h1>
    <form action="" method="post" onsubmit="return confirmsubmit()">
    <h2>Personal Information</h2>
    <p>Name
    <br>
    <br>
    <input type="text" value="Enter your name" name="visitor_name" 
    onclick="if (this.value == 'Enter your name') this.value = '';"
    size="50">
    <br>
    <br>
    E-mail address
    <br>
    <br>
    <input type="text" value="Enter your e-mail address" name="email" 
    onclick="if (this.value == 'Enter your e-mail address') this.value = '';"
    size="50">
    <br>
    </p>
    <h2>Security Information</h2>
    <p>Enter a password that you can use to manage your subscription online
    <br>
    <br>
    <input type="text" name="pass1" value="" size="50">
    <!-- onblur??? -->
    <br>
    <br>
    Type the password again to confirm it
    <br>
    <br>
    <input type="text" name="pass2" value="" size="50">
    <br>
    <br>
    Security question
    <br>
    <br>
    <select name="question">
    <option value="blank">[Select a security question]</option>
    <option value="mother">What is your mother's maiden name?</option>
    <option value="pet">What is the name of pet?</option>
    <option value="color">What is your favorite color?</option>
    </select>
    <br>
    <br>
    Your answer
    <br>
    <br>
    <input type="text" name="ans" value="" size="50">
    <br>
    </p>
    <h2>Preferences</h2>
    <p>Send special offers to my e-mail address
    <input type="radio" name="offer" value="Yes">Yes
    <input type="radio" name="offer" value="No">No
    <br>
    <br>
    Select areas of interest(select at least one)
    <br>
    <br>
    <input type="checkbox" name="interest1" value="entertainment">Entertainment
    <br>
    <input type="checkbox" name="interest2" value="business">Business
    <br>
    <input type="checkbox" name="interest3" value="music">Music
    <br>
    <input type="checkbox" name="interest4" value="shopping">Shopping
    <br>
    <input type="checkbox" name="interest5" value="travel">Travel
    <br>
    <br>
    </p>
    <p><input type="submit" /></p>
    </form>
    </body>
    </html>

    Thanks any help is appreciated.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    First of all, why do you keep repeating document.forms[0] all over the place?

    Code:
    function confirmsubmit()
    {
        var f = document.forms[0];
        if ( f.visitor_name.value == "" || f.visitor_name.value == "Enter your name")
        {
            window.alert("You did not enter your name");
            return false;
        }
        ...
        ... similarly throughout ...
        ...
        // last step:
        for ( var cb = 1; cb <= 5; ++cb )
        {
            if ( f["interest"+cb].checked ) return true;
        }
        alert("You must check at least one interest";
        return false;
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    CodyJava (11-16-2012)

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Quote Originally Posted by Old Pedant View Post
    First of all, why do you keep repeating document.forms[0] all over the place?
    He ignored the same advice that I gave him in another thread.

    He has document.form[0] in several places.
    Last edited by Philip M; 11-16-2012 at 07:22 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    New Coder
    Join Date
    Sep 2012
    Posts
    30
    Thanks
    25
    Thanked 0 Times in 0 Posts
    I had a template from something else so I copied and pasted a lot of it and when I started doing new code I just kept doing it I'll use a variable next time thanks for all the help.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Quote Originally Posted by Philip M View Post
    He ignored the same advice that I gave him in another thread.

    He has document.form[0] in several places.
    DOH on me! OF COURSE!

    The whole reason his code didn't work was because he used document.form[0] instead of document.forms[0]!!!

    Good eyes, Philip!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Using document.forms[0] ties the JavaScript directly to the HTML so that adding another form to the page (such as if you decide to add a search box into the header of each page) will instantly break your JavaScript.

    Using document.getElementsByTagName('visitor_name')[0].form would be a better alternative because it would at least mean that the JavaScript isn't affected unless another form with that same field name in it is added.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Yes, but why not simply insist that every <form> have an ID? ID's *MUST* be unique, so there's not even the possibility of a duplicated field name.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Quote Originally Posted by Old Pedant View Post
    DOH on me! OF COURSE!

    The whole reason his code didn't work was because he used document.form[0] instead of document.forms[0]!!!

    Good eyes, Philip!
    Follow Logic Ali's advice - use the error console!

    Another good reason to use

    var f = document.forms[0];

    But as you say id is preferred

    var f = document.getElementById("formid");

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #9
    Banned
    Join Date
    Oct 2012
    Posts
    81
    Thanks
    0
    Thanked 4 Times in 4 Posts
    You don't need to give the form a name or id or even refer to it at all. You could just give the text boxes, check boxes etc an appropriate id or name and refer to them directly when validating them in your js.

  • #10
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Old Pedant View Post
    Yes, but why not simply insist that every <form> have an ID? ID's *MUST* be unique, so there's not even the possibility of a duplicated field name.
    My suggestion was made on the basis of not amending the HTML for the current form. Using an id for accessing the form from JavaScript is certainly the better option.

    Where you have an id on any field within the form you don't need one on the form tag itself as any field within the form provides easy access to the entire form.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Quote Originally Posted by felgall View Post
    My suggestion was made on the basis of not amending the HTML for the current form. Using an id for accessing the form from JavaScript is certainly the better option.

    Where you have an id on any field within the form you don't need one on the form tag itself as any field within the form provides easy access to the entire form.
    Very true, but if the form is to be submitted to a server-side script then the form elements must have names (in addition to ids if present). Like Old Pedant I see no real need to assign ids to form elements.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #12
    Banned
    Join Date
    Oct 2012
    Posts
    81
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by Philip M View Post
    Very true, but if the form is to be submitted to a server-side script then the form elements must have names (in addition to ids if present). Like Old Pedant I see no real need to assign ids to form elements.
    But id's make it easier to reference the form elements in the css if you want to style them in a specific way.

    So what you *NEED* to do comes down to preference because you don't *NEED* to reference the form at all either - by name and/or id or forms[x] - to access the form elements.
    Last edited by minder; 11-18-2012 at 10:07 AM.

  • #13
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Quote Originally Posted by minder View Post
    But id's make it easier to reference the form elements in the css if you want to style them in a specific way.

    So what you *NEED* to do comes down to preference because you don't *NEED* to reference the form at all either - by name and/or id or forms[x] - to access the form elements.
    Yes, bullant. It is (as always) a case of horses for courses, or doing what is most suitable/appropriate/convenient in any particular situation.
    That is not exactly the same as personal preference.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #14
    Banned
    Join Date
    Oct 2012
    Posts
    81
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by Philip M View Post
    ....doing what is most suitable/appropriate/convenient in any particular situation.
    That is not exactly the same as personal preference.
    In this case it is exactly the same as personal preference because no way of accessing form elements suggested in this thread is better than the other. So which way you or I or old pedant or felgall think is best comes down to each of our personal preferences.

    Being retired I no longer have to put up with other peoples' views on how things should be done. I can now freely do what I think is best when I have more than 1 option


  •  

    Posting Permissions

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