Compatible Browsers:
Example: View Code Demo
<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Confirm User Read Agreement Before Submission</title>
<script>
<!--
// Begin Confirm User Read Agreement Before Submission
// == This Script Free To Use Providing This Notice Remains == //
// == This Script Has Been Found In The http://www.SnapBuilder.com Free Public Codes Library == //
// == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == //
// == Created by: Mozilla Developer Network : https://developer.mozilla.org/ : Creative Commons License == //
function checkReading () {
if (checkReading.read) { return; }
checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
checkReading.noticeBox.innerHTML = checkReading.read ?
"Thank you for reading the text." : /* change this message to your needs */
"Please, scroll down and read all of the following text."; /* change this message to your needs */
}
onload = function () {
var oToBeRead = document.getElementById("rules");
checkReading.noticeBox = document.createElement("span");
document.registration.accept.checked = false;
checkReading.noticeBox.id = "notice";
oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
oToBeRead.onscroll = checkReading;
checkReading.call(oToBeRead);
}
-->
</script>
<style>
BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000;}
#content {margin:0px 15px 0px 15px; padding:15px 15px 15px 15px;}
#notice {display:inline-block;margin-bottom:12px;border-radius:5px;width:600px;padding:5px;border:2px #921D1F solid;}
#rules {width:600px;height:130px;padding:5px;border:#007730 solid 2px;border-radius:5px;}
</style>
</head>
<body>
<div id="content">
<h3>Confirm User Read Agreement Before Submission</h3>
<form name="registration">
<p>
<textarea id="rules">This is just some rambling rules text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling rules text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling rules text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling rules text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling rules text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling rules text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling rules text placed here to provide enough text for this codes demonstration purpose.
</textarea>
</p>
<p>
<input type="checkbox" name="accept" id="agree" /> <label for="agree">I agree</label> <input type="submit" id="nextstep" value="Next" />
</p>
</form>
<p>
[ This code example from <a href="http://snapbuilder.com/code_snippets/snippet.php?sid=182">Confirm User Read Agreement Before Submission Code Snippet</a> page. ]
</p>
</div>
</body>
</html>