PNewCode Posted February 12, 2023 Share Posted February 12, 2023 (edited) Hello all of you awesome people! The last couple of days I've been tackling the issue of preventing a user from moving forward, unless they click on the tick box to agree to the terms. However, the button is allowing them to continue even if they do not click the box. Any thoughts on why? PS, I'm including the whole page because I can't figure out where on it I have messed up. It's not that much anyways. Many thanks for your time <html> <head> <title> </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <div align="center"> <p> <style type="text/css"> body {background:none transparent; } </style> <style> .button { background-color: #422F55; /* Medium Purple */ border: none; color: white; padding: 5px; text-align: center; text-decoration: none; display: inline-block; font-size: 35px; margin: 4px 2px; cursor: pointer; } .button {border-radius: 25%;} </style> <script> document.addEventListener('contextmenu', event => event.preventDefault()); </script> <img src="stop.png" width="380" height="353"></p> <table width="70%" border="0" cellspacing="0" cellpadding="20" background="faded.png"> <tr align="center" valign="middle"> <td> <font face="Verdana, Arial, Helvetica, sans-serif" color="#FFFFFF"> <p><b>* TERMS AND CONDITIONS TO UPLOAD MUSIC AND IMAGES *</b></p> <p>By continuing to upload music to this website, and to be added to the music player for the pubic and / or members to view and hear, you agree to that you are the owner of all rights of any image or audio that you are uploading and you are associated with the artists that are legal participants in the material that you are uploading.<br> You also understand that failure to abide by this may result in your account to be permanantly deleted without notice, and cannot be reversed. If this action is taken, then any tokens and all information and images that are associate with your account will be removed and cannot be reversed nor refunded. You also understand that this may result in a permanant ban from the website as well.</p></font> </td> </tr> </table> <p> <form action="form.php"><script> var cb = document.getElementById("cb"), button = document.getElementById("button"); button.disabled = true; cb.onclick = function(){ if(cb.checked checked){ button.disabled = false; } else{ button.disabled = true; } }; </script> <input type="checkbox" id="cb" name="checkbox"> <font face="Arial, Helvetica, sans-serif" color="#FFFFFF">I Have Read And Agree To The Terms And Conditions<br> (check the box if you agree and want to continue)</font><br> <input type="submit" id="button" value="CONTINUE" name="submit" class="button"> </form> </div> </body> </html> Edited February 12, 2023 by PNewCode Quote Link to comment https://forums.phpfreaks.com/topic/315904-agree-to-continue-tick-isnt-working/ Share on other sites More sharing options...
PNewCode Posted February 12, 2023 Author Share Posted February 12, 2023 Here is the resolution I went with to make this happen <p> <form action="form.php"> <script> let submitBtn = document.querySelector("button"); document.querySelector("input").addEventListener("click", function(){ if(this.checked){ submitBtn.disabled = false; } else { submitBtn.disabled = true; } }); </script> <input type="checkbox" id="tick" onchange="document.getElementById('terms').disabled = !this.checked;" /> <font face="Arial, Helvetica, sans-serif" color="#FFFFFF">I Have Read And Agree To The Terms And Conditions<br> (check the box if you agree and want to continue)</font><br> <button type="submit" class="button" name="terms" id="terms" disabled>CONTINUE</button> </form> Quote Link to comment https://forums.phpfreaks.com/topic/315904-agree-to-continue-tick-isnt-working/#findComment-1605575 Share on other sites More sharing options...
requinix Posted February 12, 2023 Share Posted February 12, 2023 Any errors in the browser's developer console? And what year was this page made? 1995? Looking at it makes me want to take a shower. Quote Link to comment https://forums.phpfreaks.com/topic/315904-agree-to-continue-tick-isnt-working/#findComment-1605577 Share on other sites More sharing options...
cyberRobot Posted February 22, 2023 Share Posted February 22, 2023 The JavaScript code is likely running before the DOM is loaded. The following page provides more information (and examples) for detecting when the DOM is loaded:https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event As requinix mentioned, the browser's developer console is a good place to see if there are errors. Note that you'll need to temporarily remove (or comment out) the following line from your code to use the console: document.addEventListener('contextmenu', event => event.preventDefault()); Quote Link to comment https://forums.phpfreaks.com/topic/315904-agree-to-continue-tick-isnt-working/#findComment-1605885 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.