How can I disable the submit button?

Question

Here is the code How can I disable the submit button. It doesn't appear to be working for us.I want to be able to have the button disabled when the page is brought up. Do you have any ideas on how we can fix this?

// Script 10.5 - pizza.js
// This script creates a master checkbox.

// Function called when the checkbox's value changes.
// Function toggles all the other checkboxes.
function toggleCheckboxes() {
'use strict';

// Get the master checkbox's value:
var status = document.getElementById('toggle').checked;

// Get all the checkboxes:
var boxes = document.querySelectorAll('input[type="checkbox"]');

// Loop through the checkboxes, starting with the second:
for (var i = 1, count = boxes.length; i < count; i++) {

    // Update the checked property:
    boxes[i].checked = status;

} // End of FOR loop.
}
} // End of toggleCheckboxes() function.

function disabled () {
    if ('')
    {document.getElementById('submit').disabled = false;}
    else
    {document.getElementById('submit').disabled = true;}


// Establish functionality on window load:
window.onload = function() {
'use strict';

// Add an event handler to the master checkbox:
document.getElementById('toggle').onchange = toggleCheckboxes;

document.getElementById('submit').disabled = disabled;

};

Here is the html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Operating Systems</title>
<!--[if lt IE 9]>
<script </script>
<![endif]-->
</head>
<body>
<!-- Script 10.4 - pizza.html -->
<form action="#" method="post" id="theForm">
<fieldset><legend>Create Your Own Pizza</legend>
<div><label>Toppings</label> <input type="checkbox" name="toggle" id="toggle"        value="toggle"> All/None
<p><input type="checkbox" name="ham" id="ham" value="ham"> Ham
<input type="checkbox" name="mushrooms" id="mushrooms" value="mushrooms"> Mushrooms
<input type="checkbox" name="onions" id="onions" value="onions"> Onions
<input type="checkbox" name="sausage" id="sausage" value="sausage"> Sausage
<input type="checkbox" name="greenPeppers" id="greenPeppers" value="greenPeppers">  Green Peppers </p>
</div>
<input type="checkbox" name="terms" id="terms" required> I agree to the terms, whatever they are.
<input type="submit" name="submit" value="Submit" id="submit">
</fieldset>
<div id="output"></div>
</form>
<script src="js/utilities.js"></script>
<script src="js/pizza.js"></script>
<script src="js/modal.js"></script>
</body>
</html>

{document.getElementById('submit').disabled = false;} else {document.getElementById('submit').disabled = true;} is what we have been using and its not helping — Brittany Kaup, Apr 16 '13 at 02:55
As a side note don't rely on javascript to disable a submit button exclusively. Anyone can edit your javascript on their page instance and remove the disabled attribute, or submit the form from a 3rd party website. Make sure you also have server-side security checks setup to prevent things from happening that shouldn't if someone tampers with your form. — Danny, Apr 16 '13 at 03:32

score 1 · Accepted Answer · answered Apr 16 '13 at 10:42

There are a few things that could be improved:

You should close all your input tags to avoid any issues rendering the HTML document.
The for-loop should run until i < (boxes.length - 1) to avoid selecting the ToS checkbox. Or you could target just the toppings with querySelectorAll('p input[type="checkbox"]') and start from var i = 0.
The closing bracket for disable() is between the closing brackets for the for-loop andtoggleCheckboxes().
In disabled() #terms is selected, you want to check if it is checked or not. If it is, enable the submit button (disabled = false), else disable it (disabled = true).
Finally, you'll want to assign disabled() to the #terms' onclick function so it is called every time the checkbox is toggled.

Demo: http://jsfiddle.net/4Rwfs/1

HTML

<form action="#" method="post" id="theForm">
<fieldset>
    <legend>Create Your Own Pizza</legend>
    <div>
        <label>Toppings</label>
        <input type="checkbox" name="toggle" id="toggle" value="toggle">All/None</input>
        <p>
            <input type="checkbox" name="ham" id="ham" value="ham">Ham</input>
            <input type="checkbox" name="mushrooms" id="mushrooms" value="mushrooms">Mushrooms</input>
            <input type="checkbox" name="onions" id="onions" value="onions">Onions</input>
            <input type="checkbox" name="sausage" id="sausage" value="sausage">Sausage</input>
            <input type="checkbox" name="greenPeppers" id="greenPeppers" value="greenPeppers">Green Peppers</input>
        </p>
    </div>
<input type="checkbox" name="terms" id="terms" required> I agree to the terms, whatever they are.</input>
<input type="submit" name="submit" value="Submit" id="submit"></input>
</fieldset>
<div id="output"></div>
</form>

JavaScript

// Script 10.5 - pizza.js
// This script creates a master checkbox.

// Function called when the checkbox's value changes.
// Function toggles all the other checkboxes.
function toggleCheckboxes() {
'use strict';

// Get the master checkbox's value:
var status = document.getElementById('toggle').checked;

// Get all the checkboxes:
var boxes = document.querySelectorAll('p input[type="checkbox"]');

// Loop through the checkboxes, starting with the second:
    for (var i = 0, count = boxes.length; i < count; i++) {

        // Update the checked property:
        boxes[i].checked = status;

    } // End of FOR loop.
} // End of toggleCheckboxes() function.

function disabled () {
    if (document.getElementById('terms').checked)
    {document.getElementById('submit').disabled = false;}
    else
    {document.getElementById('submit').disabled = true;}
}

// Establish functionality on window load:
window.onload = function() {
'use strict';

// Add an event handler to the master checkbox:
document.getElementById('toggle').onchange = toggleCheckboxes;

document.getElementById('submit').disabled = true;

document.getElementById('terms').onchange = disabled;

};

Thanks! That was very helpful – Brittany Kaup Apr 16 '13 at 14:55 — Brittany Kaup, Apr 16 '13 at 14:55

score 0 · Answer 2 · answered Apr 16 '13 at 02:55

If you want to disable the submit button on page load, try adding this:

document.getElementById('submit').disabled = true;

The following line doesn't make sense unless the disabled function returns a boolean:

document.getElementById('submit').disabled = disabled;

For example, this would work if you wanted the submit button to disable on click.

document.getElementById('submit').onclick = disabled;

score 0 · Answer 3 · answered Apr 16 '13 at 03:08

0

The problem is not in the disable line.

What did you trying to do with if('') { ? Also, in your onload function, there is a line :

'use strict';

What are you trying to do again?

See : http://jsfiddle.net/ByKEJ/

answered Apr 16 '13 at 03:08

Raptor

48,613
43
209
344

Exactly that is the part that we can not figure out – Brittany Kaup Apr 16 '13 at 03:10
so what are you saying we need to fix the if('')? well to what? – Brittany Kaup Apr 16 '13 at 03:20
@BrittanyKaup, Yes. You'd want want to provide it with the condition for when you'd want the submit button to be disabled. – thgaskell Apr 16 '13 at 03:30
yes we understand that but we've tried putting everything in there. – Brittany Kaup Apr 16 '13 at 03:32
1

Could you edit your post to show us what you've tried? Also the HTML would be helpful as well. – thgaskell Apr 16 '13 at 03:37

score 0 · Answer 4 · edited May 23 '17 at 11:50

0

How to disable html button using JavaScript?

I think this previous solution can help you dynamically disable something

edited May 23 '17 at 11:50

Community

1
1

answered Apr 16 '13 at 03:27

Black Maggie

486
2
15

It would be helpful if what goes in the if was told to us – Brittany Kaup Apr 16 '13 at 03:29

How can I disable the submit button?

4 Answers4

HTML

JavaScript