CODEWITHSUNDEEP
javascript
Brittany Kaup
Brittany Kaup

Reputation: 11

How can I disable the submit button?

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>

Upvotes: 0

Views: 7658

Answers (4)

thgaskell
thgaskell

Reputation: 13226

There are a few things that could be improved:

  1. You should close all your input tags to avoid any issues rendering the HTML document.
  2. 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.
  3. The closing bracket for disable() is between the closing brackets for the for-loop andtoggleCheckboxes().
  4. 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).
  5. 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;

};

Upvotes: 1

Black Maggie
Black Maggie

Reputation: 497

How to disable html button using JavaScript?

I think this previous solution can help you dynamically disable something

Upvotes: 0

Raptor
Raptor

Reputation: 54212

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/

Upvotes: 0

AgilE
AgilE

Reputation: 592

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;

Upvotes: 0

Related Questions