Textbox Scroll to Accept

[dfowler]

Does anybody know how to setup javascript to enable a button once a text box has been fully read?  I've seen it 1,000 times, just not sure how to do it myself.  It's the basic T&C's box that must be read (scrolled to bottom) before the user can advance.  I know how to enable/disable a button; just no clue how to check that the scroll has gone to the bottom.

 

Thanks for any help!

[rhodesa]

i only tested it in FF...but try:

<style type="text/css">
  #terms {
    width: 300px;
    height: 200px;
    overflow-y: scroll;
    border: 1px solid #333;
    padding: 3px;
  }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $('#accept').attr('disabled',true);
    $('#terms').scroll(function(){
      $('#accept').attr('disabled',
        this.scrollHeight > $(this).innerHeight() + $(this).scrollTop()
      );
    });
  });
</script>
<div id="terms">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum dolor non dui facilisis pulvinar. Cras tincidunt commodo est, sollicitudin tristique enim gravida in. Duis lobortis pretium felis in rutrum. Donec est nisi, semper in dapibus at, dignissim sed quam. Vivamus volutpat, lectus vitae viverra pharetra, nisi arcu posuere est, rhoncus porta tortor magna in orci. Duis ultricies massa nec orci egestas aliquet vel non ipsum. Mauris cursus, ante nec suscipit fringilla, nibh leo adipiscing ante, eleifend laoreet ante felis nec quam. Ut euismod sapien vitae nisi mattis tristique. Proin mauris nibh, faucibus sed ultrices ac, sodales eu augue. Aliquam velit orci, vulputate sed tristique sit amet, fermentum at velit. Etiam ultricies urna bibendum nisl dignissim nec tempus augue placerat. Sed placerat, elit a blandit mollis, orci quam ultrices magna, id mattis est nunc at libero. Suspendisse commodo urna ornare mi ornare lobortis. Nulla ultrices nibh id enim dapibus ullamcorper.</p> 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum dolor non dui facilisis pulvinar. Cras tincidunt commodo est, sollicitudin tristique enim gravida in. Duis lobortis pretium felis in rutrum. Donec est nisi, semper in dapibus at, dignissim sed quam. Vivamus volutpat, lectus vitae viverra pharetra, nisi arcu posuere est, rhoncus porta tortor magna in orci. Duis ultricies massa nec orci egestas aliquet vel non ipsum. Mauris cursus, ante nec suscipit fringilla, nibh leo adipiscing ante, eleifend laoreet ante felis nec quam. Ut euismod sapien vitae nisi mattis tristique. Proin mauris nibh, faucibus sed ultrices ac, sodales eu augue. Aliquam velit orci, vulputate sed tristique sit amet, fermentum at velit. Etiam ultricies urna bibendum nisl dignissim nec tempus augue placerat. Sed placerat, elit a blandit mollis, orci quam ultrices magna, id mattis est nunc at libero. Suspendisse commodo urna ornare mi ornare lobortis. Nulla ultrices nibh id enim dapibus ullamcorper.</p> 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum dolor non dui facilisis pulvinar. Cras tincidunt commodo est, sollicitudin tristique enim gravida in. Duis lobortis pretium felis in rutrum. Donec est nisi, semper in dapibus at, dignissim sed quam. Vivamus volutpat, lectus vitae viverra pharetra, nisi arcu posuere est, rhoncus porta tortor magna in orci. Duis ultricies massa nec orci egestas aliquet vel non ipsum. Mauris cursus, ante nec suscipit fringilla, nibh leo adipiscing ante, eleifend laoreet ante felis nec quam. Ut euismod sapien vitae nisi mattis tristique. Proin mauris nibh, faucibus sed ultrices ac, sodales eu augue. Aliquam velit orci, vulputate sed tristique sit amet, fermentum at velit. Etiam ultricies urna bibendum nisl dignissim nec tempus augue placerat. Sed placerat, elit a blandit mollis, orci quam ultrices magna, id mattis est nunc at libero. Suspendisse commodo urna ornare mi ornare lobortis. Nulla ultrices nibh id enim dapibus ullamcorper.</p> 
</div>
<input id="accept" type="submit" value="Accept & Continue" />

[dfowler]

Great!  Worked for me with FF and IE7.  Thanks for the help. 

[bradcapo1]

 

 

Thanks for sharing this useful information. It's great.

 

 

 

taux pret auto - taux pret auto differe selon la rise en compte ... calculent automatiquement le taux pour un prêt automobile donne.

[kittrellbj]

Agreed, may not even need to put a human image verification script into effect with something like this.  Will research it more.

[rhodesa]

this would definitely not replace a CAPTCHA. especially cus i wrote the code to be unobtrusive by disabling the button after the page loads. that way if javascript is disabled, they can still submit the form.

[dfowler]

What do you think of having an image button instead of the normal one?  I'm trying to get it to work right now with quite a bit of trouble.  I'm thinking of something like style="display:none" and once scroll to bottom style="display:inline" or something like that.

 

Not working so far.

[rhodesa]

um...what does your button code look like? is the entire thing and image or is it the background of a button?

[dfowler]

Right now, without the addition of any other code, here is the button itself:

<input type="image" src="images/btn-next-orange.gif" alt="next" width="115" height="43" />

As I said before, I thought about placing it within it's own div with style="display:none;" and upon scrolling to the bottom of the terms, switch the div to style="display:inline" of style="display:block".  However, as I said before; not having much luck.

[rhodesa]

just an image won't do anything for submitting a form...do you have that inside a <button> tag?

[dfowler]

Actually an image will submit a form:

<form class="nobottomgap" id="form1" name="form1" method="post" action="sendMail.php">
<table width="100%" border="0">
	<tr>
		<td colspan="3">
			<input type="hidden" name="id" value="<?php echo $custID; ?>" />
		</td>
	</tr>
	<tr>
		<td colspan="3">
			 
		</td>
	</tr>
	<tr>
		<td  colspan="3">
			<div align="center">
				<input type="image" src="images/btn-next-orange.gif" alt="next" width="115" height="43" />
			</div>
		</td>
	</tr>
</table>
</form>

Currently this code already works.  However, I am having to add the T&C's to this already created form.  I modified it with your code as the following:

<style type="text/css">
  #terms {
    width: 300px;
    height: 200px;
    overflow-y: scroll;
    border: 1px solid #333;
    padding: 3px;
  }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $('#accept').attr('disabled',true);
    $('#terms').scroll(function(){
      $('#accept').attr('disabled',
        this.scrollHeight > $(this).innerHeight() + $(this).scrollTop()
      );
    });
  });

function showTerms(obj) {
if (obj.checked) {
	document.getElementById("t&c").style.display = "block";
} else {
	document.getElementById("t&c").style.display = "none";
}		
}
</script>
<form class="nobottomgap" id="form1" name="form1" method="post" action="sendMail.php">
<table width="100%" border="0">
	<tr>
		<td colspan="3">
			<input type="hidden" name="id" value="<?php echo $custID; ?>" />
		</td>
	</tr>
	<tr>
		<td colspan="3">
			<input type="checkbox" name="price" value="1" onClick="javascript:showTerms(this);" /> I agree to the rates listed above.
		</td>
	</tr>
	<div id="t&c" style="display:none;">
	<tr>
		<td colspan="3">
			<div id="terms">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum dolor non dui facilisis pulvinar. Cras tincidunt commodo est, sollicitudin tristique enim gravida in. Duis lobortis pretium felis in rutrum. Donec est nisi, semper in dapibus at, dignissim sed quam. Vivamus volutpat, lectus vitae viverra pharetra, nisi arcu posuere est, rhoncus porta tortor magna in orci. Duis ultricies massa nec orci egestas aliquet vel non ipsum. Mauris cursus, ante nec suscipit fringilla, nibh leo adipiscing ante, eleifend laoreet ante felis nec quam. Ut euismod sapien vitae nisi mattis tristique. Proin mauris nibh, faucibus sed ultrices ac, sodales eu augue. Aliquam velit orci, vulputate sed tristique sit amet, fermentum at velit. Etiam ultricies urna bibendum nisl dignissim nec tempus augue placerat. Sed placerat, elit a blandit mollis, orci quam ultrices magna, id mattis est nunc at libero. Suspendisse commodo urna ornare mi ornare lobortis. Nulla ultrices nibh id enim dapibus ullamcorper.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum dolor non dui facilisis pulvinar. Cras tincidunt commodo est, sollicitudin tristique enim gravida in. Duis lobortis pretium felis in rutrum. Donec est nisi, semper in dapibus at, dignissim sed quam. Vivamus volutpat, lectus vitae viverra pharetra, nisi arcu posuere est, rhoncus porta tortor magna in orci. Duis ultricies massa nec orci egestas aliquet vel non ipsum. Mauris cursus, ante nec suscipit fringilla, nibh leo adipiscing ante, eleifend laoreet ante felis nec quam. Ut euismod sapien vitae nisi mattis tristique. Proin mauris nibh, faucibus sed ultrices ac, sodales eu augue. Aliquam velit orci, vulputate sed tristique sit amet, fermentum at velit. Etiam ultricies urna bibendum nisl dignissim nec tempus augue placerat. Sed placerat, elit a blandit mollis, orci quam ultrices magna, id mattis est nunc at libero. Suspendisse commodo urna ornare mi ornare lobortis. Nulla ultrices nibh id enim dapibus ullamcorper.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum dolor non dui facilisis pulvinar. Cras tincidunt commodo est, sollicitudin tristique enim gravida in. Duis lobortis pretium felis in rutrum. Donec est nisi, semper in dapibus at, dignissim sed quam. Vivamus volutpat, lectus vitae viverra pharetra, nisi arcu posuere est, rhoncus porta tortor magna in orci. Duis ultricies massa nec orci egestas aliquet vel non ipsum. Mauris cursus, ante nec suscipit fringilla, nibh leo adipiscing ante, eleifend laoreet ante felis nec quam. Ut euismod sapien vitae nisi mattis tristique. Proin mauris nibh, faucibus sed ultrices ac, sodales eu augue. Aliquam velit orci, vulputate sed tristique sit amet, fermentum at velit. Etiam ultricies urna bibendum nisl dignissim nec tempus augue placerat. Sed placerat, elit a blandit mollis, orci quam ultrices magna, id mattis est nunc at libero. Suspendisse commodo urna ornare mi ornare lobortis. Nulla ultrices nibh id enim dapibus ullamcorper.</p>
			</div>
		</td>
	</tr>
	<tr>
		<td  colspan="3">
			<div align="center">
				<input id="accept" type="submit" value="Accept & Continue" />
			</div>
		</td>
	</tr>
	</div>
</table>
</form>

This worked exactly as I needed it to.  However, I was told to bring the image button back to submit the form.  Which is where I am now.

[dfowler]

Here is what I have tried and isn't working currently.  I first put the button inside a div with the id 'button'.  Here is the new script I tried:

  $(function(){
    $('#button).attr('style','display:none');
    $('#terms').scroll(function(){
     if(this.scrollHeight > $(this).innerHeight() + $(this).scrollTop()) {
        var display = 'display:inline';
     } else {
        var display = 'display:none';
     }
      $('#button').attr('style', display);
    });
  });

It's not working at all.  My knowledge of javascript is pretty limited, so I'm sure there are 900 things wrong with what I posted above.