Menu
I need to activate a checkbox once a user has scrolled to the bottom of a terms and conditions section of a form. The will be a section in part of a checkout page for ecommerce site.
I have seen arguments on here about this, but per our lawyers, it has to be this way on our site for liability reasons. An accept button at the end of the scroll box would be the last resort, as it seems to confuse some of our users who think it is not there at all no matter how much info we give them about where the button is.
I sourced this code and manipulated it to try and get it to do what I wanted. My code is listed below. It doesn't work. I have successfully disabled the button, however I cannot seem to reactivate it.
I am pretty new to javascript and any help would be greatly appreciated.
<head>
<title>Scroll Test</title>
<script language="JavaScript">
</script>
</head>
<body>
<form name="form22" action="javascript: alert('Form submitted!');" onSubmit="return formValidation(this);">
<p>
License Agreement:<br />
<textarea name="licenseAgreement" rows="10" cols="45">This is my long, long license agreement where you agree to all of my demands.
This is my long, long license agreement where you agree to all of my demands.
This is my long, long license agreement where you agree to all of my demands.
This is my long, long license agreement where you agree to all of my demands.
This is my long, long license agreement where you agree to all of my demands.
This is my long, long license agreement where you agree to all of my demands.
This is my long, long license agreement where you agree to all of my demands.
This is my long, long license agreement where you agree to all of my demands.
This is my long, long license agreement where you agree to all of my demands.
</textarea>
</p>
<p>
<input name="button" type="checkbox" value="Submit" disabled> I agree
</p>
</form>
</body>
</html>
767
You can just add "disabled" to your button, and then when the user locks in their answer, enable it again. Additionally, it's not best practice to split your JavaScript into a bunch of different script tags. Put them all in one place.
The disabled attribute is a boolean attribute. When present, it specifies that the button should be disabled. A disabled button is unusable and un-clickable. The disabled attribute can be set to keep a user from clicking on the button until some other condition has been met (like selecting a checkbox, etc.).
$('#enabled'). click(function () { if ($('#submit-button').is(':disabled')) { $('#submit-button'). removeAttr('disabled'); } else { $('#submit-button'). attr('disabled', 'disabled'); } });
To stop a web page from scrolling to the top when a link is clicked that triggers JavaScript, we call preventDefault in the link's click handler. document. getElementById("#ma_link").
Using normal JS it adds a few things we need to check. Consider the following:
Get the LicenseAgreementElement:
var textElement = document.getElementsByName("licenseAgreement")[0]
Now that we have the element,
Get how much the licenseAgreement textarea scrolls to.
textElement.scrollHeight
We need to check if the user has scrolled the entire AgreementElement ie. The
scrollTop + heightof the actual element.
textElement.scrollTop + textElement.offsetHeight >= textElement.scrollHeight
Attaching and event listener at the start provides us with the following:
document.getElementsByName("licenseAgreement")[0].addEventListener("scroll", checkScrollHeight, false);
function checkScrollHeight(){
var textElement = document.getElementsByName("licenseAgreement")[0]
if ((textElement.scrollTop + textElement.offsetHeight) >= textElement.scrollHeight){
document.getElementsByName("button")[0].disabled = false;
}
}
Enabling the checkbox when the condition is met.
Finally a small time example : JSFiddle
175
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
