{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 霸刀☆藐视天下 的问题《Disable/Enable button conditionally based on scrol》','https://www.manongdao.com/q-592736.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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>
Using normal JS it adds a few things we need to check. Consider the following:
var textElement = document.getElementsByName("licenseAgreement")[0]Now that we have the element,
textElement.scrollHeighttextElement.scrollTop + textElement.offsetHeight >= textElement.scrollHeightAttaching and event listener at the start provides us with the following:
Enabling the checkbox when the condition is met.
Finally a small time example : JSFiddle