Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I agree check box

    Hey everyone, I am having some difficulty adding an "I agree" check box to my site so that when clicked it will make my submit button active. I don't know the correct IF ELSE code or if there is something different to use. The submit button already has its own id and name. I just cannot figure out the code to make that work. Any help would be appreciated. Thanks.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    one way...

    Code:
    <body>
    
    I agree <input type="checkbox" onclick="ableIt(this)"/>
    <input type="submit" id="sub" disabled/>
    
        <script>
            function ableIt(cb) {
    		document.getElementById("sub").disabled = cb.checked?false:true;
            }
        </script>
    
    </body>

  • #3
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you, I'll try that.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You need the submit button active to start with and then disable it from JavaScript. Then activate it again when the checkbox is checked.

    If you start with it inactive then anyone without JavaScript will not be able to submit.

    You need to check again on the server anyway.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    You need to check again on the server anyway.
    Good idea

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by xelawho View Post
    one way...

    Code:
    <body>
    
    I agree <input type="checkbox" onclick="ableIt(this)"/>
    <input type="submit" id="sub" disabled/>
    
        <script>
            function ableIt(cb) {
    		document.getElementById("sub").disabled = cb.checked?false:true;
            }
        </script>
    
    </body>
    This code is badly written; referencing a function before it's been created can cause errors. (I just tested this to make sure by placing a large script before the validation script and clicking the checkbox immediately after the page loaded and that resulted in an invalid function reference error.)

    In fact, a script isn't needed for anything other than backward compatibility if the required attribute is supported.

    Here's a script that fixes the premature reference issue and incorporates the required attribute with a scripted fallback that includes the changes fellgall suggested:

    Code:
    <!doctype html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>Demo</title>
    	</head>
    	<body>
    		<form>
    			<label><input id="agreementCheckbox" type="checkbox" required> I agree to stuff.</label>
    			<button id="submitButton">Submit Form</button>
    		</form>
    		<script>
    			var submitButton = document.getElementById("submitButton");
    			var agreementCheckbox = document.getElementById("agreementCheckbox");
    			if (typeof agreementCheckbox.required === "undefined") {
    				function validateForm() {
    					if (agreementCheckbox.checked === true) {
    						submitButton.removeAttribute("disabled");
    					}
    					else {
    						submitButton.setAttribute("disabled", "");
    					}
    				}
    				submitButton.setAttribute("disabled", "");
    				agreementCheckbox.addEventListener("click", validateForm);
    			}
    		</script>
    	</body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    xelawho (12-28-2013)

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Quote Originally Posted by Arbitrator View Post
    referencing a function before it's been created can cause errors.
    thanks. I hadn't thought of that.

    unfortunately, backwards compatibility needs a little more work. Here's what I see in IE8:

    if you add the "required" attribute to the checkbox, the submit button doesn't disable. No errors, just no disabling. If anybody knows why that it is, I'm curious.
    And of course ye olde IE doesn't like addEventListener.

    This works in all my browsers, though...
    Code:
    <body>
    		<form>
    			<label><input id="agreementCheckbox" type="checkbox" > I agree to stuff.</label>
    			<button id="submitButton">Submit Form</button>
    		</form>
    		<script>
    			var submitButton = document.getElementById("submitButton");
    			var agreementCheckbox = document.getElementById("agreementCheckbox");
    			if (typeof agreementCheckbox.required === "undefined") {
    				function validateForm() {
    					if (agreementCheckbox.checked === true) {
    						submitButton.removeAttribute("disabled");
    					}
    					else {
    						submitButton.setAttribute("disabled", "");
    					}
    				}
    				submitButton.setAttribute("disabled", "");
    				agreementCheckbox.onclick = validateForm; 
    			} else {
    			agreementCheckbox.setAttribute("required", "");
    			}
    		</script>
    	</body>

  • Users who have thanked xelawho for this post:

    Arbitrator (12-28-2013)

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by xelawho View Post
    unfortunately, backwards compatibility needs a little more work. Here's what I see in IE8:
    I don't ordinarily write code with IE8 in mind; there are just too many things that that browser doesn't support for me to want to bother. Last time I tried to, I said "screw it" and removed the IE8-specific code after I remembered that IE8 doesn't support HSLA or RGBA color values.

    Quote Originally Posted by xelawho View Post
    if you add the "required" attribute to the checkbox, the submit button doesn't disable. No errors, just no disabling. If anybody knows why that it is, I'm curious.
    It's a moot point if IE8 support isn't a concern, but I investigated this anyway since I've never seen this particular issue.

    Apparently, the problem is that IE8 will assign unrecognized HTML attributes a corresponding property on the element's object with a string value matching the attribute value, so the typeof agreementCheckbox.required === "undefined" check fails to achieve the intended result. (agreementCheckbox.required === "" is true.) Changing the conditional to the more specific typeof agreementCheckbox.required !== "boolean" addresses the issue.

    This behavior is gone in IE10. I don't know about IE9 since the Virtual Hard Disk I downloaded for it at modern.IE some time ago was actually a (second) copy of IE10 despite the file names beginning with "IE9.Win7.For.WindowsHyperV"...

    So, the revised, IE8-compatible code is as follows:

    Code:
    <!doctype html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>Demo</title>
    	</head>
    	<body>
    		<form>
    			<label><input id="agreementCheckbox" type="checkbox" required> I agree to stuff.</label>
    			<button id="submitButton">Submit Form</button>
    		</form>
    		<script>
    			var submitButton = document.getElementById("submitButton");
    			var agreementCheckbox = document.getElementById("agreementCheckbox");
    			if (typeof agreementCheckbox.required !== "boolean") {
    				function validateForm() {
    					if (agreementCheckbox.checked === true) {
    						submitButton.removeAttribute("disabled");
    					}
    					else {
    						submitButton.setAttribute("disabled", "");
    					}
    				}
    				submitButton.setAttribute("disabled", "");
    				if (typeof agreementCheckbox.addEventListener === "function") {
    					agreementCheckbox.addEventListener("click", validateForm);
    				}
    				else { // typeof agreementCheckbox.attachEvent === "object"
    					agreementCheckbox.attachEvent("onclick", validateForm);
    				}
    			}
    		</script>
    	</body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    yeah, old IE is a pain. I think that's pretty much agreed.

    And going back too many versions is way too much work for the payoff.

    But here's why I think IE8 is worth accommodating:
    I still run XP. Which is ancient now, but does everything I need it to and none of the bells and whistles of later versions of windows are exciting enough to make me want to shell out more hundreds of dollars to Big Bill.

    But one of the things that XP can't do is run anything higher than IE8. Which I don't care about because IE sits at about number 5 on my preferred browser list. But still, what I describe above seems to be such a simple combination of factors that I find it hard to believe that there isn't a sizable group of people in the same boat.

    Browser usage stats are all over the place, of course. And tech sites that report just their own visitors are obviously courting sampling error. This site claims to track 15,000 page views on each of 70,569 websites, which seems reasonably wide. And they give XP usage at 16.55% and IE8 at 7.24%. Interestingly, IE10 only ranks 2% higher than 8.

    But 7.24% is one in twelve, give or take. And that seems enough to make it worth thinking about, painful as that may be

  • #10
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by xelawho View Post
    I still run XP. Which is ancient now, but does everything I need it to and none of the bells and whistles of later versions of windows are exciting enough to make me want to shell out more hundreds of dollars to Big Bill.
    I was as well until about a week ago when my computer crashed with motherboard problems. Since I was upgrading hardware I decided to upgrade Windows as well since I was going to have to upgrade from XP soon in any case. Microsoft is dropping all support for XP in about three months time so the next security hole discovered after that will not be fixed.

    That should have an impact on the number of people using IE8.

    I wouldn't expect IE10 use to be all that high. Now that Internet Explorer automatically updates itself to the latest version the same way all the other browsers do, most people not limited to IE8 would be running IE11. That the stats are showing such a high percentage for IE10 indicates that they are not all that recent.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #11
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Quote Originally Posted by felgall View Post
    I wouldn't expect IE10 use to be all that high. Now that Internet Explorer automatically updates itself to the latest version the same way all the other browsers do, most people not limited to IE8 would be running IE11. That the stats are showing such a high percentage for IE10 indicates that they are not all that recent.
    yeah, it all gets very flaky once you start talking percentages. The pages I'm looking at *claim* to have numbers from Nov 2013 onwards and report IE11 usage at between 1.3 and 6.5% but who knows what's representative, really - I guess the only way to get close would be to get as many numbers as possible and average them out

  • #12
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by xelawho View Post
    But 7.24% is one in twelve, give or take. And that seems enough to make it worth thinking about, painful as that may be
    As an unpaid volunteer, for me, if isn't. The only time I bother is when IE8 is specifically brought up as a subject. Feel free to shadow my posts with IE8-compatible versions of my or your own code though, if you feel it necessary.

    As felgall alluded to, Microsoft support for Windows XP Service Pack 3 is ending in April, so users shouldn't be using the entire OS soon due to the resulting security ramifications. (On Windows Vista and Windows 7, where IE8 support is also available, IE users should be using IE9 and IE11, respectively.)

    Quote Originally Posted by xelawho View Post
    I still run XP.
    Time to join us in the future before you get hacked.

    I've used Vista, 7, 8, and 8.1 as my desktop software and all of them are an improvement over XP, IMO.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #13
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Quote Originally Posted by Arbitrator View Post
    Time to join us in the future
    *sigh* I guess you're right

  • #14
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you all for the information. I added the I agree text box so it matches up with my submit form. But I am not sure now what code to use to have the submit button inactive until the box is checked. is there something I need to change, or add into it?

  • #15
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by Thor0170 View Post
    But I am not sure now what code to use to have the submit button inactive until the box is checked. is there something I need to change, or add into it?
    I posted code that does just that twice.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •