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).

Answer 3

Christian Varga's solution is absolutely correct, and can also be applied to a div. However, if you are using a div instead of a textarea, the div MUST NOT have any padding on it or it breaks.

My workaround for this was to place a div inside my styled div (with padding, rounded corners, and a border) to detect scrolling. So:

<div class="styled-div">
     <div id="terms">
          Lorem ipsum...terms text...
     </div>
</div>
<input type="submit" id="register" value="Register"/>

The only possible drawback to this approach is if you add padding to the containing div, the scrollbar appears on the inner div, which may not look good to some users.

Answer 4

Other answers work perfectly, but I've put together a sample using a slightly different approach, one that doesn't tie the ability to submit to the button being disabled, so that it can be mixed with other validators and such.

$(function(){

    var terms_were_scrolled = false;

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

    $('#terms_agreed').click(function( event ){
        if( !terms_were_scrolled ){
            alert('you must read all the way to the bottom before agreeing');  
            event.preventDefault();               
        }            
    });

});​

HTML:

<form action="#">
  <textarea id="terms" cols="100" rows="10">
      Lorem Ipsum ....
  </textarea>
  <br />
  <input type="checkbox" id="terms_agreed"/> I agree
  <br />
  <input type="submit">
</form>​

Answer 5

Use something like this inside the textarea:

onscroll="if(this.scrollTop+this.offsetHeight>=this.scrollHeight){/*enable the button*/}" 

But what if JS is disabled?

I would prefer a scrollable div with the submit-button at the bottom. The user can't click the button without scrolling at the end, no matter if JS is on or off.