How to make checkbox mandatory even on bowser back button click using jquery?

Question

I am facing a situation like below.

1. WebPage1 with fields and a check box (Agree terms)
2. WebPage2 check if checkbox is checked and initiates emailing

After the page1 form fields are filled, checkbox is checked (I agree to terms) and submitted to Page2, Page2 detects checkbox checked state and proceeds emailing. - works fine

Now the issue is, if in the browser "Go back button" is clicked while in page2, page 1 gets loaded (checkbox shows unchecked) and then if browser "Go forward button" is pressed WITHOUT checking the checkbox, page1 gets submitted and page2 starts emailing.

I want the checkbox to be mandatorily checked before going to Page2 even if the browser Back and Forward buttons are used by the user. Mainly, to protect from webform spamming.

How can this be achieved ? Please help.

Answer 1

What you can do is pass the Iagree value into the get so when they go forward to the page they would get something like "/account/register?terms=true" then the input with the name terms will be set to true.

However having two pages for what you are trying to archive may not be a great idea because it allows people to do the whole back/forward thing.

What I have done is created a simple jsFiddle with a solution which should be help you

jsFiddle : https://jsfiddle.net/vq0y78ea/

Html

<div class="section1">
    <input type="checkbox" class="TsCs" />
    <p>Terms and Conditions</p>
    <button class="agree-to-terms">I agree</button>
</div>
<div style="display:none" class="section2">
    <label>Email address</label>
    <input type="textbox" />
    <button class="register-account">Register</button>
</div>

Javascript / jQuery

$(function () {
    $('.agree-to-terms').on('click', function () {
        if ($('.TsCs').is(':checked')) {
            $('.section1').slideUp();
            $('.section2').slideDown();
        }
    });

    $('.register-account').on('click', function () {
        if ($('.TsCs').is(':checked')) {
            $('form').submuit();
        } 
        else
        {
            alert('There was a problem with the Ts and Cs, please check "I agree"');
            $('.section1').slideDown();
            $('.section2').slideUp();
        }
    });
});

Basically the webpage will just have one form on it, when the user has checked the I agree to terms and condtions it will hide the I agree section and display the register section. This will stop the user from going back and forward, also if the user doesn't check the checkbox and attemps to submit I have used jQuery to make sure they have checked it or they can't submit.

Also what you can do with the form post, with the code that uses the form values in the post method, post the value of the checkbox make sure it is checked/true, if not just return the page.