I've tried working with some code from JSFiddle, and it is working fine.
Although when I try and implement it in HTML, it doesn't work the same way.
Here's what I have so far:
Javascript:
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
HTML:
<h1>Button should be enabled if at least one checkbox is checked</h1>
<input type="checkbox" id="checkme"/><input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " disabled/>
You need to wrap the script inside window.onload event to make sure that the dom elements are available.
window.onload = function() {
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function(){
if(this.checked) sendbtn.disabled = true;
else sendbtn.disabled = false;
}
}
<input type="checkbox" id="checkme"/>
<input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " />
Your javascript needs to be in <script> tags. It's not clear if they are or not by your question, so I'll assume they're not:
<html>
<head><title>Still learning</title></head>
<body>
<script type="text/javascript">
window.onload = function() {
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
};
</script>
<h1>Button should be enabled if at least one checkbox is checked</h1>
<input type="checkbox" id="checkme"/><input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " disabled/>
</body>
</html>
Read up on html basics
This one: Uncaught TypeError: Cannot set property 'onchange' of null
Your javascript is executing before the html finishes completely loading.
This is why document.getElementById('checkme') is returning null. Put the function into a window.onload and insert the script into the <head> like this.
<html>
<head><title>Still learning</title>
<script>
window.onload = function() {
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
};
</script>
</head>
<body>
<h1>Button should be enabled if at least one checkbox is checked</h1>
<input type="checkbox" id="checkme"/><input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " disabled/>
</body>
</html>
It should work now. See this fiddle: http://jsfiddle.net/brbcoding/n9z5D/
Related
Hello I want to disable two buttons when the checkbox is checked but for it result I must click two times in the checkbox hope someone can help me.
Thanks.
var checker = document.getElementById('checkme');
var button = document.getElementById('button');
var button2 = document.getElementById('button2');
document.getElementById("button").disabled = true;
document.getElementById("button2").disabled = true;
checker.onchange = function() {
button.disabled !! this.checked;
button2.disabled !! this.checked;
};
Your code is wrong. You have to assign the checkbox status to button:
var checker = document.getElementById('checkme');
var button = document.getElementById('button');
var button2 = document.getElementById('button2');
document.getElementById("button").disabled = true;
document.getElementById("button2").disabled = true;
checker.onchange = function() {
button.disabled = !this.checked;
button2.disabled = !this.checked;
};
<input type='checkbox' id='checkme' />
<button id='button'>Button 1</button>
<button id='button2'>Button 2</button>
simply use this code
<input type="checkbox" id="checkme" onChange="state_change(this.checked)">
<input type="button" id="button" value="button1">
<input type="button" id="button2" value="button2">
<script type="text/javascript">
function state_change(check){
document.getElementById('button').disabled = check;
document.getElementById('button2').disabled = check;
}
</script>
I suggest defining 'button' and 'button2' inside the function, otherwise it could be overwritten if you define 'button' somewhere else.
Instead of manually initializing the disabled state you can simply call the onchange function directly, which will make possible modifications to the code easier, you generally want to avoid having the same code in multiple places.
var checker = document.getElementById('checkme');
checker.onchange = function() {
var button = document.getElementById('button');
var button2 = document.getElementById('button2');
button.disabled = !this.checked;
button2.disabled = !this.checked;
};
checker.onchange();
<input type="checkbox" id="checkme">
<button id = "button">button</button>
<button id = "button2">button2</button>
Ha ha ha who say thissendbtn2.disabled = !!this.checked; Hope this help you. .
Why a = !! b because !!= not not and = true, then write a=b.
I want to disable the submit button for 5 seconds before it becomes clickable. The script works and make the button unclickable for 5 second, but the problem is it doesn't submit the form.
Please help.
<form id="frm_wanted_search">
<input type="submit" onclick="lockoutSubmit(this)" name="school_name" id="btn_book_search" value="Search">
</form>
<script>
function lockoutSubmit(button) {
var oldValue = button.value;
button.setAttribute('disabled', true);
button.value = '...processing...';
setTimeout(function(){
button.value = oldValue;
button.removeAttribute('disabled');
}, 5000) }
</script>
try below code
<form name ="form1" id="frm_wanted_search">
<input type="submit" onclick="lockoutSubmit(this)" name="school_name" id="btn_book_search" value="Search">
</form>
<script>
function lockoutSubmit(button) {
event.preventDefault();
var oldValue = button.value;
button.value = '...processing...';
setTimeout(function(){
button.value = oldValue;
document.form1.submit();
}, 5000)
}
</script>
Try this, the idea is you bind the page load event, do some stuff on the button, and trigger a timer on it.
window.onload = disableButton;
var button = document.getElementById("btn_book_search");
var oldValue = button.value;
function disableButton() {
button.value = '...processing...';
button.disabled = true;
setTimeout(function(){
button.value = oldValue;
button.removeAttribute('disabled');
}, 5000);
}
<form id="frm_wanted_search">
<input type="submit" name="school_name" id="btn_book_search" value="Search">
</form>
I'm fairly new to JavaScript and I have been Googling all day for this but I only found how to enable and disable one textbox using one checkbox. I tweaked the code a bit to work with what I want and here is what I got. I'm thinking of instructing JS function to follow only the id of the checkbox, but I can't seem to figure out how to do it.
Here is my code:
JavaScript
<script>
function enableText(checked){
if(!checked){
document.getElementById('sel1').disabled = true;
document.getElementById('txt1').disabled = false;
}
else{
document.getElementById('sel1').disabled = false;
document.getElementById('txt1').disabled = true;
}
}
function enableText(checked){
if(!checked){
document.getElementById('sel2').disabled = true;
document.getElementById('txt2').disabled = false;
}
else{
document.getElementById('sel2').disabled = false;
document.getElementById('txt2').disabled = true;
}
}
</script>
HTML
<form name=sr2 method=post>
<select name="pt" id="sel1">
<option>test</option>
</select>
<input type="checkbox" name="cb1" checked="checked" onclick="enableText(this.checked)">
Others
<input type="text" name="pt" id="txt1" disabled="disabled">
<select name="dept" id="sel2">
<option>test</option>
</select>
<input type="checkbox" name="cb2" onclick="enableText(this.checked)" checked="checked">
Others
<input type="text" name="dept" id="txt2" disabled="disabled">
</form>
My question is how can I set the function in js to instruct cb1 to only enable txt1 and disable sel1 and cb2 to only enable txt2 and disable sel2? My code works but, for some reason, it enables txt1 and txt2 and disables sel1 and sel2 at the same time.
Any help is greatly appreciated.
You have created two functions with the same name: enableText. Simplifying your code:
function enableText(checked, index){
var sel = true, txt = false;
if(checked) {
sel = false;
txt = true;
}
document.getElementById('sel' + index).disabled = sel;
document.getElementById('txt' + index).disabled = txt;
}
And in your HTML:
onclick="enableText(this.checked, 1)"
And change the 2nd parameter for the next items.
A second version of your function with ternaries, but with the same purpose:
function enableText(checked, index) {
document.getElementById('sel' + index).disabled = (checked ? false : true);
document.getElementById('txt' + index).disabled = (checked ? true : false);
}
This question already has answers here:
Enable/Disable submit button if checkbox is checked/unchecked?
(3 answers)
Closed 8 years ago.
Please i need a script that can work with the HTML code bellow to disable/enable the button when a checkbox is checked or unchecked,
<input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " />
please pals i don't mean the button to be disabled when checked, but rather the other way round.
You can use onchangeevent of the checkbox to enable/disable button based on checked value
<input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " />
<input type="checkbox" onchange="document.getElementById('sendNewSms').disabled = !this.checked;" />
You will have to use javascript, or the JQuery framework to do that. her is an example using Jquery
$('#toggle').click(function () {
//check if checkbox is checked
if ($(this).is(':checked')) {
$('#sendNewSms').removeAttr('disabled'); //enable input
} else {
$('#sendNewSms').attr('disabled', true); //disable input
}
});
DEMO: http://jsfiddle.net/T6hvz/
HTML
<input type="checkbox" id="checkme"/><input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " />
JS
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function() {
sendbtn.disabled = !!this.checked;
};
DEMO
brbcoding have been able to help me with the appropriate coding i needed, here is it
HTML
<input type="checkbox" id="checkme"/>
<input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />
Javascript
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
// when unchecked or checked, run the function
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
Here is a clean way to disable and enable submit button:
<input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " />
<input type="checkbox" id="disableBtn" />
var submit = document.getElementById('sendNewSms'),
checkbox = document.getElementById('disableBtn'),
disableSubmit = function(e) {
submit.disabled = this.checked
};
checkbox.addEventListener('change', disableSubmit);
Here is a fiddle of it in action: http://jsfiddle.net/sYNj7/
I recommend using jQuery as it will do all the heavy lifting for you. The code is fairly trivial.
$('input:checkbox').click(function () {
if ($(this).is(':checked')) {
$('#sendNewSms').click(function () {
return false;
});
} else {
$('#sendNewSms').unbind('click');
}
});
The trick is to override the 'click' event and effectively disable it. You can also follow it up with some CSS magic to make it look "disabled". Here is the code in JavaScript in case you need it. It's not perfect but it gets the point across.
var clickEvent = function () {
return false;
};
document.getElementById('#checkbox').onclick(function () {
if (document.getElementById('#checkbox').checked) {
document
.getElementById('#sendNewSms')
.onclick(clickEvent);
} else {
document
.getElementById('#sendNewSms')
.removeEventListener('click', clickEvent, false);
}
});
I've a script:
<form id="myform">
<input type="text" value="" id="input1">
<input type="text" value="" id="input2">
<input type="submit" value="submit">
</form>
<img id="image" src="http://mydomain.com/empty.gif" />
<script>
$(document).ready(function () {
$("#myform").submit(function (ev) {
ev.preventDefault();
var val1 = $("#input1").val();
var val1 = $("#input2").val();
$("#image").attr("src", "http://mydomain.com/image?val1="+val1+"&val2="+val2);
});
});
</script>
How would it look like if written in JavaScript?
<img id="image" src="http://mydomain.com/empty.gif" />
<script>
window.onload = function() { // Not all browsers support DOMContentLoaded
document.getElementById("myform").onsubmit = function() {
var val1 = document.getElementById("input1").value;
var val2 = document.getElementById("input2").value;
document.getElementById("image").src="http://mydomain.com/image?val1="+val1+"&val2="+val2;
return false;
};
};
</script>
If you NAME the fields you can use
window.onload = function() {
document.getElementById("myform").onsubmit = function() {
document.getElementById("image").src="http://mydomain.com/image?val1="+this.input1.value+"&val2="+this.input2.value;
return false;
};
};
You MAY want to escape the two values