disable radio button initially javascript - javascript

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>

Related

Input type Radio checked not work if open in new window

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>

How do i check if a specific Radio button is checked among the other radio buttons using Javascript?

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>

Add Radio buttons to Html form using Javascript or Jquery

In my HTML code I have
<form id="approve">
<input name="myDate" id="monthYearPicker" />
<button type="button"onclick="monthlytimesheets()">Submit</button>
</form>
In my Javascript file I have the following:-
function monthlytimesheets() {
$.post('http://localhost:8000/timer/monthly_timesheet/',
function(returnedData) {
for(i=0;i<returnedData.length;i++) {
for(j=i+1;j<returnedData.length;j++) {
if(returnedData[i]['id']==returnedData[j]['id']) {
returnedData.splice(j,1)
}
}
}
});
Now i want my returnedData[i]['full_name'] rendered on html page as radio buttons. How can i do that. How do you dynamically create radio buttons from JS? Also can i assign values to these radio buttons?
you can create radio buttons easily using jquery as you want. I wrote a code to show how to create radio button dynamically. automatically and when a button clicked.change the inside conditions as your needs. try below code.
<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
<!-- Example one , add radio button using jquery automatically-->
<h1>Example one , add radio button using jquery automatically</h1>
<form id="approve">
<input name="myDate" id="monthYearPicker" />
<div class="lastone"></div>
</form>
<br><br><hr>
<!-- Example two, add radio button using jquery when button click-->
<h1>Example two, add radio button using jquery when button click-</h1>
<form id="approveone">
<input name="myDate" id="monthYearPicker" />
<div class="lasttwo"></div>
<input type="button" id="addradio" value="submit">
</form>
</body>
<script type="text/javascript">
$(document).ready(function(){
for(var i=0;i<5;i++)
{
var labelname = "radio button"+i;
var value = i;
var create = $('<input type="radio" value="'+value+'"><label>'+labelname+'</label><br>');
$(".lastone").append(create);
}
});
$(document).ready(function(){
$("#addradio").click(function(){
for(var i=0;i<9;i++)
{
var labelname = "radio button"+i;
var value = i;
var create = $('<input type="radio" value="'+value+'"><label>'+labelname+'</label><br>');
$(".lasttwo").append(create);
}
});
});
</script>
</html>
You can create elements dynamically like this
var content = document.createElement('div');
var newElement = document.createElement('input');
newElement.setAttribute('type', 'radio');
newElement.value = "Your value"; ///Here you can assigned value to the radio button
content.appendChild(newElement);
Create a function that returns a radio element. Similar question was already asked.
It can be found here: How do you dynamically create a radio button in Javascript that works in all browsers?
function createRadioElement(name, checked) {
var radioHtml = '<input type="radio" name="' + name + '"';
if ( checked ) {
radioHtml += ' checked="checked"';
}
radioHtml += '/>';
var radioFragment = document.createElement('div');
radioFragment.innerHTML = radioHtml;
return radioFragment.firstChild;
}
Note that this is the snipped from the answer of the posted link, published by Prestaul.
Would have postet it as comment, but need 50rep to comment...
function monthlytimesheets()
{
var name = $('#monthYearPicker').val();
$('#approve').append('<input type="radio" />'+name);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="approve">
<input name="myDate" id="monthYearPicker" />
<button type="button"onclick="monthlytimesheets()">Submit</button>
</form>

I need the javascript checkboxes.click(function()) to start when the page first loads

I am using the following js code to disable the form submit button until at least one checkbox selection is checked.
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
The problem is the code doesn't work when the page first loads. When the user first comes to the page, he is able to click submit but if he checks something and then unchecks everything the submit is then disabled.
It looks like I need the code to start when the page first loads. Any suggestions?
Add submitButt.attr("disabled", !checkboxes.is(":checked")); to disable the the submit button at first. Also, better wrap it in either domready or onload to ensure jQuery can access the fully rendered DOM.
$(function() {
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
// Add this line to set init status of the submit.
// submitButt.attr("disabled", true)); is ok as you don't have any checked checkbox when page loaded.
submitButt.attr("disabled", !checkboxes.is(":checked"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="checkbox" id="c1"/ >c1
<input type="checkbox" id="c2"/ >c2
<input type="checkbox" id="c3"/ >c3
<input type="submit" value="click" />
Since you are using jQuery use its ready function:
$(document).ready(function(){
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
});
That way code gets only executed when the page is loaded and jQuery is ready. So click handlers can be set upon checkboxes that actually exist.
2 options: 1) add in your html code the attribute "disabled"; 2) Use this code
document.addEventListener("DOMContentLoaded", function(event) {
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
});
You can use the following:
window.onload = function () {
submitButt.attr("disabled", !checkboxes.is(":checked"));
}
... and externalize the content into a function which is called for onload and for checkboxes.click.
Just create a function and call it on page load and on click of checkbook.
Note : you can change function name.
Please check below code snippet :
var checkboxes = $("input[type='checkbox']");
var submitButt = $("input[type='submit']");
var onloadCheckboxesCheck = function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
}
onloadCheckboxesCheck();
checkboxes.click(function() {
onloadCheckboxesCheck();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="lname">
<input type="checkbox" name="lname">
<input type="checkbox" name="lname">
<input type="checkbox" name="lname">
<input type="submit" value="Submit">
All you need is to trigger event:
$(function() {
$('input[type=checkbox]').on('change', function(e) {
$('input[type=submit]').prop('disabled', 0 === $('input[type=checkbox]:checked').length);
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="submit" />
.trigger('change') will fire change event on the checkbox.
$('input[type=checkbox]:checked') will give you list of checked, check-boxes

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>
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

Categories

Resources