1

I need a checkbox, where you move from one page to another after clicking the box. The checkbox should be required, given that you've read the terms and conditions link next to it.

I'm only half sure how to do this, something like this:

<input type="checkbox" value="confirm_prepay_terms" name="confirm_prepay_terms" align="middle" />

with Jquery:

<script type="text/javascript" language="javascript">
$(document).ready(function() {
        if ($('form#prepay input:checkbox', 'confirm_prepay_terms').is(':checked') {
                return true;
        } else {
            $('#confirm_terms_hint').text('Please try again - you need to check the box to move on');
            $('#confirm_terms_hint').css('font-weight', 'strong');
            return false;
        }
}
</script>

At the moment though, I can't view the checkbox at all on the page, so perhaps my HTML is incorrect?

Hope you can help.

2
  • 1
    any jsfiddle to hava look? It seems to be OK, except for the align parameter..
    – pollirrata
    Apr 10, 2012 at 15:30
  • Your missing the closing bracket for the .ready(). Try making } </script> into }); </script> jsfiddle.net/dwRvE
    – RyanS
    Apr 10, 2012 at 15:32

2 Answers 2

3

Your HTML is fine - is will show a checkbox - but without any text. You could add some using this markup :

<input type="checkbox" value="confirm_prepay_terms" name="confirm_prepay_terms" align="middle" >​Text here</input>​​​​​​​​​​​​​​​​​​​​​​​

In your JavaScript you are missing a closing ) :

if ($('form#prepay input:checkbox', 'confirm_prepay_terms').is(':checked') {

should be

if ($('form#prepay input:checkbox', 'confirm_prepay_terms').is(':checked')) {

and a ) on the last line :

}
</script>

should be

})
</script>

and your selector is incorrect

$('form#prepay input:checkbox', 'confirm_prepay_terms')

should be

$('form#prepay input:checkbox[name=confirm_prepay_terms]')

This uses the multiple attribute selector

and

$('#confirm_terms_hint').css('font-weight', 'strong');

should be

$('#confirm_terms_hint').css('font-weight', 'bold');

font-weight has no strong value (see here) ... use bold instead

in your script you are returning true or false but the code is not being called by anything - its executing as soon as the page has completed loading. Have a look at the .submit() method in jQuery if you want to perform form validation. An example would be this :

$(document).ready(function() {
    $('#prepay').submit(function() {
        if ($('form#prepay input:checkbox[name=confirm_prepay_terms]')) {
                return true;
        } else {
            $('#confirm_terms_hint').text('Please try again - you need to check the box to move on');
            $('#confirm_terms_hint').css('font-weight', 'bold');
            return false;
        }
    });
});

This would prevent the form from being submitted now - as you return false to the submit event.

Fully working example here

1
  • Thanks very much for helping with this, really appreciate it.
    – snakespan
    Apr 25, 2012 at 11:23
-1

I don't think it is necessary for you to provide a CheckBox as long as they must accept this terms and conditions before using the service.

You can just do the following and stress-less yourself .

   - Provide a link to the terms and conditions for reading

   - Notify them that they have automatically accept this terms while proceeding.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.