Using jQuery, how do I force a visitor to scroll to the bottom of a textarea to enable the submit button?

Question

I have a registration form which contains a read-only textarea. I want to require any visitor to scroll to the bottom of the textarea, which contains terms and conditions or license agreement, before the submit button is enabled to submit their information.

Here's the sample CSS code:

textarea {      
  width: 240px;
  height: 200px;
  overflow-y: scroll;
}

Here's sample HTML code:

<form action="action.php">
  <label for="email">Email Address</label><input type="text" id="email" />
  <textarea readonly>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
  <input class="submit" type="submit" value="Register your info" id="register"/>
</form>

Should the disabled attribute already be put into the submit input?

We are already using the jQuery library so I'd like to continue using jQuery to enable this validation to control the submit question. Thanks for your help and suggestions!

Answer 1

Something like this should work:

$('#terms').scroll(function () {
    if ($(this).scrollTop() == $(this)[0].scrollHeight - $(this).height()) {
        $('#register').removeAttr('disabled');
    }
});

Simply give terms an id, and set the register button to disabled in the html. I also made a little fiddle to show it working: http://jsfiddle.net/ETLZ8/

Answer 2

I recommend this rather, it handles zooming better.

$('#terms').scroll(function () {
    if ($(this).scrollTop() + $(this).innerHeight() +2 >= $(this)[0].scrollHeight) {
        $('#register').removeAttr('disabled');
    }
});

The +2 handles a few scaling scenarios when scrolltop+innerheight is marginally below scrollHeight (for some reason I am too lazy to work out).