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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Form with check box. Event handler not working

    Please help me with this code to determine whether the check box has been checked. I get "Thank you" even if I don't check the check box.

    <script type="text/javascript">
    var uncheck = document.getElementById().checked == false;
    var accept;

    function checkAccept()
    {
    var uncheck;
    if (uncheck == false){
    alert ("You must accept the terms.");
    }
    else (uncheck == true)
    {
    alert ("Thank you.");
    }
    }


    </script>

    <form>

    <br />Please accept the terms by clicking the box below:
    <br />Accept terms: <input type="checkbox" id="accept" value="Y" />
    <br /><input type="button" name="btn" value="Accept" onclick="checkAccept()" />
    </form>
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Feb 2009
    Location
    Jakarta, Indonesia
    Posts
    93
    Thanks
    2
    Thanked 20 Times in 20 Posts
    Don't forget to enter the obj id in obj.getElementById('id')
    Code:
    function checkAccept2(){
      var oC = document.getElementById('accept');
      if(oC.checked){
        alert ("Thank you.");
      }else{
        alert ("You must accept the terms.");
      }
      oC = null;
    }

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Try this:-


    Code:
    <script type="text/javascript">
    
    function checkAccept() {
    if (!document.getElementById("accept").checked) {
    alert ("You must accept the terms."); 
    return false;
    }
    else {
    alert ("Thank you.");
    }
    }
    
    </script>
    Note: these lines are redundant:-

    Code:
    var uncheck = document.getElementById().checked == false;
    var accept;
    Note that if (as I assume) your form is to be submitted to a server, you must give the form elements a name rather than (or in addition to) an id. Only named form elements will have their values sent to the server.

    Quizmaster: Which American Civil War General had the nickname "Stonewall"?
    Contestant: Custard
    Last edited by Philip M; 11-15-2011 at 08:31 PM.

    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.

  • Users who have thanked Philip M for this post:

    lizlaing (11-15-2011)

  • #4
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I need to keep the line of code "document.getElementById().checked == false"
    so I'm not sure where to put the ID "accept". Would I put the "var uncheck = document.getElementById().checked == false" inside the function? I'm only getting the "thank you" message. This should be a simple problem/function, but I'm so confused.


    var uncheck = document.getElementById().checked == false;
    var accept;

    function checkAccept()
    {
    if (uncheck) {
    alert ("You must accept the terms.");
    }
    else (accept)
    {
    alert ("Thank you.");
    }
    }

  • #5
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you PhilipM that worked perfectly! However, I do have a question re: the code in the if statement:
    if (!document.getElementById("accept").checked) {
    alert ("You must accept the terms.");
    return false;

    Is it the same thing to write:
    if (document.getElementById("accept").checked == false) {
    alert ("You must accept the terms.");


    or do I need to include the "return false"?

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,640 Times in 4,602 Posts
    But there's a much easier way to do this. Gets rid of the painful getElementById.

    Code:
    <script type="text/javascript">
    function checkAccept(box)
    {
        if ( ! box.checked )
        {
            alert("You must accept the terms");
            return false;
        } else {
            alert("Thank you!"); 
            return true;
        }
    }
    
    <br />Please accept the terms by clicking the box below:
    <br />Accept terms: <input type="checkbox" name="accept" value="Y" />
    <br /><input type="button" name="btn" value="Accept" onclick="checkAccept(this.form.accept)" />
    ...
    If you intend to send this <form> to a server-side page (PHP/JSP/ASP/etc.) then you *MUST* give a name to the fields you want to send. ID's are USELESS for form postings. And with a name, you can take advantage of "relative addressing".

    In the button, this.form.accept means "starting from this form element, find the containing form and then in that form find the field named accept".

    What could be simpler?

    Philip and I both added return false/return true to your code in case you wanted to also be able to invoke the function when the <form> is submitted (that is, so you could call this code from your form validation script).
    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:

    lizlaing (11-16-2011)

  • #7
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Great -- thanks for teaching me something new!


  •  

    Tags for this Thread

    Posting Permissions

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