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>
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;
};
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;
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/
How to disable html button using JavaScript?
I think this previous solution can help you dynamically disable something
Related
I have 1 radio item, and I want it to behave like a checkbox. So now, it gets selected but I couldn't bind it to prop state on click.
So I want to achieve is: when clicked on radio btn, it reverses its checked state.
Here is what I tried:
<form action="#">
<p>
<input name="group" type="radio" id="test" />
<label for="test">Red</label>
</p>
</form>
$(document).ready(function() {
$('#test').click(function() {
$('#test').prop('checked', !$('#test').prop('checked'))
})
})
What interesting is, if I create another button and bind it to change checked value, it works
<button id="faker" type="button">
Faker Btn
</button>
$('#faker').click(function() {
$('#test').prop('checked', !$('#test').prop('checked'))
})
Here is a fiddle: https://jsfiddle.net/55L52yww/81/
A radio can behave like a checkbox if you add a state attribute to the radio element like in:
<input name="group" type="radio" id="test" data-state="false"/>
Now, you can save the last state and compare with the current value in order to decide the action to do.
The snippet:
$('#test').on('click', function(e) {
var a = $(this).data('state');
var b = $(this).prop('checked');
if (a && b) {
b = false;
$(this).prop('checked', b);
}
$(this).data('state', b);
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<form action="#">
<p>
<input name="group" type="radio" id="test" data-state="false"/>
<label for="test">Red</label>
</p>
</form>
When you get into the function that was triggered by the radio button itself, the state of the checked property has already changed. That causes a problem on the first click, because the new state is true and therefore your function sets it back to false.
You can solve this by keeping track of the checked state yourself in a separate data attribute and checking that instead.
$(function() {
$('#test').click(function() {
var $this = $(this);
if ($this.data('previousState')) {
$this.prop('checked',false).data('previousState',false);
}
else {
$this.prop('checked',true).data('previousState',true);
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<form action="#">
<p>
<input name="group1" type="radio" id="test" />
<label for="test">Red</label>
</p>
</form>
My planing is click on button in link.html page (exp: Check option 2 in radio.html),
it will go to radio.html page and checked the option 2 radio.
I can checked the radio by click on button in radio.html page.
But if click button on link.html, i can't checked the radio when open the radio.html page.
I get a idea is use windows.open to open the radio.html, then use window.onload & document.getElementById to checked the radio.
But failed. Is my idea wrong?
Please help, TQVM.
Here is the radio.html code:
<html>
<body>
<input type="radio" name="option" id="opt1">
<label for="opt1">Option 1</label>
<input type="radio" name="option" id="opt2">
<label for="opt1">Option 2</label>
<input type="radio" name="option" id="opt3">
<label for="opt1">Option 3</label>
<input type="radio" name="option" id="opt4">
<label for="opt1">Option 4</label>
<br>
<br>
<button onclick="check1()">Check Option 1</button>
<br>
<button onclick="check2()">Check Option 2</button>
<br>
<button onclick="check3()">Check Option 3</button>
<br>
<button onclick="check4()">Check Option 4</button>
<br>
<script>
function check1() {
document.getElementById("opt1").checked = true;
}
function check2() {
document.getElementById("opt2").checked = true;
}
function check3() {
document.getElementById("opt3").checked = true;
}
function check4() {
document.getElementById("opt4").checked = true;
}
</script>
</body>
</html>
Here is the link.html code:
<html>
<body>
<button onclick="opencheck2()">Check Option 2 in radio.html</button>
<br>
<button onclick="opencheck3()">Check Option 3 in radio.html</button>
<br>
<script>
function opencheck2() {
var mywindow = window.open("radio.html","_self");
mywindow.onload = function(){
document.getElementById("opt2").checked = true;
}
}
function opencheck3() {
var mywindow = window.open("radio.html","_self");
mywindow.onload = function(){
document.getElementById("opt3").checked = true;
}
}
</script>
</body>
</html>
The simplest way to do this seems to be to add an event listener to the window that you are opening so that when it loads then the code can be triggered. Here's an example that will open this current SO page and replace the content with the word test (you would have to run this from the console as code snippets seem unable to open new windows):
var mywindow = window.open(document.URL);
mywindow.addEventListener('load', function() {
mywindow.document.getElementById('content').innerText = 'TEST';
});
Here's a modified version of your code that takes advantage of the same behaviour. I've also reduced it into one function where the buttons now pass a number representing the checkbox to be ticked rather than having multiple functions:
<html>
<body>
<button onclick="opencheck(2)">Check Option 2 in radio.html</button>
<br>
<button onclick="opencheck(3)">Check Option 3 in radio.html</button>
<br>
<script>
function opencheck(num) {
var mywindow = window.open("radio.html");
mywindow.addEventListener('load', function() {
mywindow.document.getElementById("opt" + num).checked = true;
}
}
</script>
</body>
</html>
I am trying to make javascript check if a specific Radio button is checked among the other radio buttons.
The validation method for checking if any radio button works perfectly:
This is a snippet the HTML code containing the radio buttons:
<form id = "buy" name = "buy" onsubmit = "return valiform()">
<input type="radio" name="Card_type" value="visa" > Visa </input>
<input type="radio" name="Card_type" value="mastercard" > Mastercard</input>
<input type="radio" name="Card_type" value="paypal" > Paypal </input>
<input type="submit" value="Confirm order">
</form>
This is the snippet of the Javascript code regarding the radio buttons:
<script type = "text/javascript">
function valiform(){
var visa = document.buy.Card_type;
var mastercard = document.buy.Card_type;
var paypal = document.buy.Card_type;
var message = "Error!\n";
function validateRadio (radios)
{
for (i = 0; i < radios.length; ++ i)
{
if (radios [i].checked) return true;
}
return false;
}
if(validateRadio (document.buy.Card_type))
{
}
else
{
message+= "Please select card.\n";
}
if(message != "Error!\n"){
alert(message);
return false;
}
}
</script>
So far the code works perfectly, but I want the code to check if specifically the Paypal radio button is selected. I cannot do it without inducing an error. Any ideas how to do it?
First change the paypal line to:
<label><input id="paypalRadio" type="radio" name="Card_type" value="paypal"> Paypal </label>
This use this code which will return true if a given radio button is checked:
document.getElementById('paypalRadio').checked
or you could do this without changing anything:
$("td[name=Card_type]")[2].prop("checked", true)
Instead of returning just true, you could have validateRadio() return the value of the checked button. Then you can assign this to a variable.
var selected = validateRadio(document.buy.Card_type);
if (selected == 'paypal') {
...
}
<input type="radio" name="Card_type" value="visa" > Visa </input> is invalid html; <input> is an empty element , where content is not permitted. You can use .addEventListener(), submit event attached to <form> element, .querySelectorAll(), Array.prototype.some(), check the element at index 2 from result of .querySelectorAll() to determine if input element having value equal to "paypal" is checked
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<form id="buy" name="buy">
<input type="radio" name="Card_type" value="visa" />
<input type="radio" name="Card_type" value="mastercard" />
<input type="radio" name="Card_type" value="paypal" />
<input type="submit" value="Confirm order">
</form>
<script type="text/javascript">
function valiform(event) {
event.preventDefault();
var radios = this.querySelectorAll("input[type=radio]")
var message = "Error!\n";
function validateRadio(radios) {
return Array.prototype.some.call(radios, function(input) {
return input.checked
})
}
if (validateRadio(radios)) {
if (radios[2].checked) {
alert(radios[2].value + " radio is checked")
}
event.target.submit();
} else {
message += "Please select card.\n";
}
if (message != "Error!\n") {
alert(message);
return false;
}
}
document.getElementById("buy").addEventListener("submit", valiform)
</script>
</body>
</html>
I'm trying to set the radio button to disable initially with javascript, Here is my code.
HTML:
document.getElementById("authorise1_radio").disabled = true;
document.getElementById("authorise2_radio").disabled = true;
<input checked class="radio_input" id="authorise1_radio" name="authorise1_radio" type="radio" value="authorise">
<label class="radio_label" for="authorise1_radio">Yes</label>
<input class="radio_input" id="authorise2_radio" name="authorise2_radio" type="radio" value="authorise">
<label class="radio_label" for="authorise2_radio">No</label>
I tried the same code in w3school.com and it works fine.
This is the code there:
document.getElementById("myRadio").disabled = true;
Radio Button:
<input type="radio" id="myRadio">
Try this: you can use javascript code below of html code of radio button. like following: (then it may works)
<input checked class="radio_input" id="authorise1_radio" name="authorise_radio" type="radio" value="authorise">
<label class="radio_label" for="authorise1_radio">Yes</label>
<input class="radio_input" id="authorise2_radio" name="authorise_radio" type="radio" value="authorise">
<label class="radio_label" for="authorise2_radio">No</label>
<script>
document.getElementById("authorise1_radio").disabled = true;
document.getElementById("authorise2_radio").disabled = true;
</script>
Just put the script between the <head> tags in your html
<head>
<script>
document.getElementById("radioButton").disabled = true;
</script>
</head>
It seems like there's nothing wrong with your code.
try using
document.getElementById("myRadio").readonly = true;
I guess that would do the trick.
Onclick change State
<body>
<script type="text/javascript">
var checked = 0;
function change() {
if (checked === 0) {
checked++;
}else {
document.getElementById("myRadioID").checked = false;
checked = 0;
}
}
</script>
Radio Button:
<input type="radio" id="myRadioID" onclick="javascript:change();"/>
</body>
Please put this below code in footer section
<script>
document.getElementById("authorise1_radio").disabled = true;
</script>
I have the following code:
<fieldset id="dificuldade">
<legend>Dificuldade:</legend>
<input type="radio" name="dificuldade" value="facil"> Fácil </input>
<input type="radio" name="dificuldade" value="medio"> Médio </input>
<input type="radio" name="dificuldade" value="dificil"> Difícil </input>
</fieldset>
<fieldset id="tipo">
<legend>Tipo de jogo:</legend>
<input type="radio" name="Tipodejogo" value="somar"> Somar </input>
<input type="radio" name="Tipodejogo" value="subtrair"> Subtrair </input>
<input type="radio" name="Tipodejogo" value="dividir"> Dividir </input>
<input type="radio" name="Tipodejogo" value="multiplicar"> Multiplicar </input>
</fieldset>
<input type="button" value="Começa" id="button" ></input>
</form>
and here is the jsfiddle with both the html and the js http://jsfiddle.net/3bc9m/15/ . I need to store the values of the 2 fieldset so I, depending on the values picked can generate a game, but my javascript isn't returning any of them. What is wrong? I've been told that JQuery is much easier but i can't use it.
Your code on jsFiddle seems to be working fine for the most part. The only thing was that the elements output and output2 don't exist on the page.
So this code that was supposed to display the selected values wasn't working:
document.getElementById('output').innerHTML = curr.value;
document.getElementById('output2').innerHTML = tdj.value;
The part that actually retrieves the selected values is working fine.
Just add those two elements to the page, like this:
<p>Selected Values:</p>
<div id="output"></div>
<div id="output2"></div>
An updated jsFiddle can be found here.
EDIT
If a radio button from only one of the sets is selected, the code fails. You could use this code to find the selected values instead:
document.getElementById('button').onclick = function() {
var dif = document.getElementsByName('dificuldade');
var tip = document.getElementsByName('Tipodejogo');
var difValue;
for (var i = 0; i < dif.length; i++) {
if (dif[i].type === "radio" && dif[i].checked) {
difValue = dif[i].value;
}
}
var tipValue;
for (var i = 0; i < tip.length; i++) {
if (tip[i].type === "radio" && tip[i].checked) {
tipValue = tip[i].value;
}
}
document.getElementById('output').innerHTML = difValue;
document.getElementById('output2').innerHTML = tipValue;
};
An updated jsFiddle is here.
Consider this post that adresses the issue. It shows a few javascript methods as well as how you would use it in jQuery.
How can I check whether a radio button is selected with JavaScript?
Is there a specific reason you want to break it down by fieldset instead of directly accessing the radio buttons by name?