SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Oct 2006
    Location
    London, UK
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Checkbox validation - javascript gets ignored.

    Hello there - I'm new to Sitepoint and a complete amateur when it comes to Javascript. I've had a search through this forum, and googled a fair bit, too, but so far haven't been able to find the answer.

    I'm working on a Ruby on Rails web app and I'm trying to add a quick and dirty client-side Javascript validation, to ensure that users click a checkbox agreeing to our Ts and Cs, before clicking the "Register" button submits their info.

    I'll post the generated HTML, rather than the Rails stuff.

    This is the button that shouldn't submit the form until the checkbox has been clicked:

    Code:
    <input name="commit" onClick="return check_agreed()" type="submit" value="Complete Registration" /> or <a href="/">Cancel</a>
    First off, to confirm that the onClick actually checks check_agreed(), I kept check_agreed() simple, just popping up an alert then returning false.

    Code:
    <script language="JavaScript">
      function check_agreed()
      {
        alert("check_agreed checked");
        return false;
      }
    </script>
    This seems to work fine - the alert pops up and nothing is submitted. I have a checkbox:

    Code:
    <input type="checkbox" name="terms_agreed">
    I'd like this to be checked before the form can be submitted, so I've altered check_agreed() and added some debugging alerts.

    Code:
    function check_agreed()
      {
        alert("in check_agreed");
        
        if(terms_agreed == checked)
        {
          alert("checked");
          return true;
        }
        alert("Please agree to the Terms and Conditions");
        return false;
      }
    So now the first alert, "in check_agreed" pops up, but then the form is submitted, with neither "checked" nor "Please agree..." popping up. This happens regardless of whether the checkbox has been clicked.


    I'm sure I'm doing something wrong - it seems to be to do with referring to the checkbox. Should I be giving the checkbox's complete path, rather than referring to it by its name? I've tried to work out the correct path according to the DOM, but it still does the same thing.

    Any assistance gratefully received

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Welcome to SitePoint!

    You should give the checkbox an ID attribute and use DOM methods to retrieve the element. Also, your if statement looks odd. You're comparing a (possible) DOM node (terms_agreed) with an undefined variable (checked).

    Try something like this:
    HTML Code:
    <input type="checkbox" name="terms_agreed" id="terms-agreed" value="Y">
    Code:
    function check_agreed()
    {
      var cb = document.getElementById("terms-agreed");
      return cb.checked;
    }
    It might also be better to apply this check in the form's onsubmit handler than the submit button's onclick handler.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess a JavaScript error occurs and it submits the page. Firefox has an excellent JavaScript console that will tell you exactly where the error occurred.

    You need to access the checkbox first before refering to it, this can be done using document.getElementById, or another way of doing it is to pass a reference of the form to your function. Also, one more thing, have the check as a onsubmit in the form tag instead. So, to sum up:
    Code:
    <form onsbumit="return check_agreed(this);">
        <input type="checkbox" name="terms_agreed">
        <input type="submit">
    </form>
    
    <script>
    function check_agreed(oForm) {
        return oForm.terms_agreed.checked;
    }
    </script>

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, I see now that AutisticCuckoo already answered. Anyway, too much help can't damage

  5. #5
    SitePoint Member
    Join Date
    Oct 2006
    Location
    London, UK
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much to both Pepejeria and AutisticCuckoo.

    Your solutions worked perfectly and I am now the proud possessor of a validated checkbox - woo!


    edited to add: Would anyone mind explaining to me why it'd be better in the form's onSubmit, rather than the button's onClick, please? Not questioning your advice (at all!), but I'm interested in knowing why this is a better way of doing it.

    Thank you again.
    Last edited by foglet; Dec 15, 2006 at 09:02. Reason: Added text


Bookmarks

Posting Permissions

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