How can I force a web user to read and check an NDA before proceeding?

Question

Every time a user registers to our site we need to show a NDA (non-disclosure agreement). In order to continue the user has to accept it. My issue is that I have the NDA in all one page and the user does not really read it and accept (like we all do).

What I want is to make sure the user reads the NDA and accepts it one he "read" it?

What I have now is a simple jQuery validation if the user checks a box and click on accept. then it goes to the next page.

Here's what i have

<script>
$(document).ready(function() {
 $('#go').click(function() {
  // check if checkbox is check and go to next page
  // i have this code
 });
});
</script>
<div>
full nda
<hr>
<input type=checkbox> <input type=button value=go id=go>
</div>

I already have the code for the checkbox and button

i simply dont want the user to blindly accept the nda

Thanks

Answer 1

If you want to prevent the user to find the "I agree checkbox" and submit button right way you will have to hide it and then show these inputs once he read the last page.

Here's a sample script you can use. This loads the terms as you scroll the page and at the last one it adds a check-box and submit button.

Make sure the page is long enough so you have to scroll and also use the .live event (because the checkbox and input button don't exists when you load the page)

// main page
<script>
function getTC() {
    var id = $(".paragraph:last").attr("id").replace('tnc', '');
    if((parseInt(id) + 1) > 10) {
        return;
    }
    $.post("terms.php?paragraph=" + id, function(r) {
        $('#terms').append(r);
    });
}

$(document).ready(function() {
    $(window).scroll(function(){
        if($(window).scrollTop() == $(document).height() - $(window).height()) {
            getTC();
        }
    });

    // logic for checkbox & submit using .live

});
</script>

<div id="terms">
 <div class="paragraph" id="tnc1">
  Lorem ipsum dolor sit amet ...
 </div>
 <div class="paragraph" id="tnc2">
  Lorem ipsum dolor sit amet ...
 </div>
 <div class="paragraph" id="tnc3">
  Lorem ipsum dolor sit amet ...
 </div>
 <div class="paragraph" id="tnc4">
  Lorem ipsum dolor sit amet ...
 </div>
</div>

// php
<?php

// add security here

if(!isset($_GET['paragraph'])) {
    $_GET['paragraph'] = '1';
}
$_GET['paragraph'] = (int)$_GET['paragraph'] + 1;

if($_GET['paragraph'] <= 10) {
?>
<div class="paragraph" id="tnc<?php echo $_GET['paragraph'] ;?>">
Lorem ipsum dolor sit amet ...
</div>
<?php
    if($_GET['paragraph'] == 10) {
        echo '<hr/>I agree with the terms and conditions <input type="checkbox" /><input type="button" value="I accept" /><hr/>';
    }
}

Answer 2

It depends how you want to do it. Here are 3 common ways people do it.

1. I accept this disclosure agreement | Checkbox
2. Once they scroll to the bottom of it, enable the 'Next' button
3. Set a timer, once the time has elapsed, eneable the 'Next' button.

Answer 3

Here's the basic structure for what you want:

if($('#mycheckboxid').attr('checked')) {
    window.location='http://stackoverflow.com';
} else {
    alert("You must Opt in");
}

Working fiddle: http://jsfiddle.net/XPEE7/2/