Trouble enabling/disabling submit button according to checkbox (JavaScript)

Question

I am trying to enable/disable my submit button based on whether or not the confirmation checkbox is checked. The simplified version works just fine on jsfiddle but for some reason it doesn't work in my actual code. Here is the original code:

<div class="form-group">
    <div class="col-md-offset-3 col-md-6">
        <label>
            <input type="checkbox" id="confirm">The above information is correct.
        </label>
    </div>
</div>        
<div class="form-group" style="float:right">
    <input type="submit" class="btn btn-primary" id="sbmBtn" value="Submit" disabled>
    <input type="reset" class="btn btn-default" id="clrBtn" value="Clear">
</div>

I used the same method as I did in the functioning jsfiddle code (with the correct IDs of course), but it doesn't seem to work.. I even copy pasted my jsfiddle code into my editor, saved, and opened the page and it didn't work either.

Anyone have any ideas as to what the problem is?

EDIT: Also here is the javascript:

var checker = document.getElementById('confirm');
var sbm = document.getElementById('sbmBtn');
checker.onchange = function () {
    if(this.checked) {
        sbm.disabled = false;
    } 
    else {
        sbm.disabled = true;
    }
}

EDIT 2: This is the correct link --> http://jsfiddle.net/94Dur/1/

Laya - I dropped your code in jsFiddle with no changes, but it seems the checkbox does work (it correctly toggles the button's disabled/enabled state). Here's fiddle: jsfiddle.net/94Dur/1 — BinaryCat
– BinaryCat, Commented Jul 31, 2014 at 18:56
@BinaryCat As I said, it works fine in jsfiddle but for some reason when I save my code and open the actual page in browser, it doesn't work. — Laya302
– Laya302, Commented Jul 31, 2014 at 18:59
I guess I misread your post - anyway, do you get any exception/error in the browser console? What browser are you using? (IE, FF, Chrome, etc) — BinaryCat
– BinaryCat, Commented Jul 31, 2014 at 19:01
@BinaryCat There's no error, the Submit button just stays disabled. I'm using Chromium (Chrome on Ubuntu). — Laya302
– Laya302, Commented Jul 31, 2014 at 19:02
I was wondering if you were actually looking at the Developer Console on your browser (it's F12 on Chrome). Just because you don't see anything on the browser screen doesn't mean there's no error. Just something worth checking. Also, I wonder if the above code is everything you have in the file. Because the JS reference to either the submit button or the checkbox could be in conflict with other part of your DOM tree. — BinaryCat
– BinaryCat, Commented Jul 31, 2014 at 19:10

kaspermoerch · Accepted Answer · 2014-08-01 13:06:45Z

1

The code should work when you run it from a file in your browser.

I suspect that you have added the JavaScript before the <body> of your page. This would mean that the selector document.getElementById('confirm') is run before the page is loaded, meaning it wouldn't find the element, which again would result in the onchange-function not being added to the element.

You should try doing this:

window.onload = function() {
    var checker = document.getElementById('confirm');
    var sbm = document.getElementById('sbmBtn');
    checker.onchange = function () {
        if(this.checked) {
            sbm.disabled = false;
        } 
        else {
            sbm.disabled = true;
        }
    } 
}

This will make sure that your JavaScript is not run until the content of the page has been loaded.

answered Aug 1, 2014 at 13:06

kaspermoerch

16.7k4 gold badges48 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Laya302 Over a year ago

I have <body> <form> ... </form> <script> ... </script> </body> Is this wrong?

kaspermoerch Over a year ago

That should be okay, though I still think you should try my suggested solution.

Laya302 Over a year ago

Thanks, I realized what my mistake was. It was working in jsfiddle just fine, so the only explanation was that there was a typo somewhere... I am using a low-end text editor to write my code, so it wasn't obvious but after 10 minutes of searching through code I found <scipt> instead of <script>. How frustrating. Thanks for the help though.

Collectives™ on Stack Overflow

Trouble enabling/disabling submit button according to checkbox (JavaScript)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related