Question

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.

Answer 1

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