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.
Related
I want to disable textarea when button is pressed and enable it back again when another button is pressed. Right now I can disable it but I can't get it to be enabled again.
HTML:
<textarea rows='14' id="value"> </textarea>
<button class="continue" onclick="return cont()">CONTINUE</button>
<button class="clear" onclick="return clear()">CLEAR</button>
JS:
function cont(){
document.getElementById("value").value = 'hello';
document.getElementById("value").readOnly = true;
setTimeout('cont()',1000);
}
function clear(){
document.getElementById("value").readOnly = false;
document.getElementById("value").value = 'empty';
setTimeout('clear()',1000);
}
Why is my clear button not working?
you can do that functionality like this:
HTML:
<textarea rows='14' id="value"> </textarea>
<button class="continue">CONTINUE</button>
<button class="clear">CLEAR</button>
JS:
const continueButton = document.querySelector('.continue');
const clearButton = document.querySelector('.clear');
const textArea = document.querySelector('#value');
continueButton.addEventListener('click', function(e) {
textArea.value = 'hello'
textArea.disabled = true
});
clearButton.addEventListener('click', function(e) {
textArea.value = ''
textArea.disabled = false
});
change setTimeout('clear()',1000) to setTimeout('clear',1000)
I have a dblclick listener that adds values into an html input field. I also have an on change function that is supposed to enable a submit button when the value in that html input field changes. However, sblclicking, and therefore adding a value into the input field, does not enable the submit button. The button does become enabled if I click in the input field and edit the value by hand, though.
Is there a work around so that the dblclick listener can also trigger the on change function?
document.addEventListener("dblclick", function(){
document.getElementById("name").value = "Hello World!";
});
document.getElementById("name").onchange = function() {
document.getElementById("send").disabled = false;
}
<input id="name" type="text">
<input type="submit" id="send" value="Submit" disabled>
Changing input values dynamically needs explicit event generation.
var el = document.getElementById('name')
el.value = 'something';
el.dispatchEvent(new Event('change'));
Jsbin link
You can create an event to dispatch on the element on document dblclick. Also use oninput instead of onchange like the following way:
document.addEventListener("dblclick", function(){
document.getElementById("name").value = "Hello World!";
var event = document.createEvent('Event');
event.initEvent('input', true, true);
document.getElementById("name").dispatchEvent(event);
});
document.getElementById("name").oninput = function() {
document.getElementById("send").disabled = false;
}
<input id="name" type="text">
<input type="submit" id="send" value="Submit" disabled>
you can do like this ...
document.getElementById("name").onchange = function() {
document.getElementById("send").disabled = false;
}
document.addEventListener("dblclick", function(){
document.getElementById("name").value = "Hello World!";
if ("createEvent" in document) {
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
document.getElementById("name").dispatchEvent(evt);
}
else
document.getElementById("name").fireEvent("onchange");
});
<input id="name" type="text">
<input type="submit" id="send" value="Submit" disabled>
Normally properties modified by javascript do not trigger html change events.
So what you can do is call the code that activates your button from the change handler and the doubleclick handler. If the code was more complex you could wrap it in a function and call it from both handlers.
document.addEventListener("dblclick", function(){
document.getElementById("name").value = "Hello World!";
document.getElementById("send").disabled = false;
});
document.getElementById("name").onchange = function() {
document.getElementById("send").disabled = false;
}
Did you try adding the onchange method to your initial function?
For example:
document.getElementById("name").onchange = function() {
document.getElementById("send").disabled = false;
}
document.addEventListener("dblclick", function(){
document.getElementById("name").value = "Hello World!";
if ("createEvent" in document) {
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
document.getElementById("name").dispatchEvent(evt);
}
else
document.getElementById("name").fireEvent("onchange");
});
Use oninput instead of change
document.addEventListener("dblclick", function() {
document.getElementById("name").value = "Hello World!";
});
document.getElementById("name").oninput = function() {
document.getElementById("send").disabled = false;
}
<input id="name" type="text">
<input type="submit" id="send" value="Submit" disabled>
DEMO here
I'm trying to cross out text next to the checkbox button when the checkbox is clicked by the user. But when I test it, for some reason nothing is happening. I want to check if the box is checked. If it is then I want to to cross that item next to that check box. This function, however does not work. Can someone please explain what I'm doing wrong? thanks.
function myFunction() {
var editButton = document.createElement("button");
//button.delete
var deleteButton = document.createElement("button");
var item = document.getElementById("todoInput").value
var checkBox = document.createElement("input");
checkBox.type = "checkbox";
checkBox.id = "checkbox"
var text = document.createTextNode(item)
var newItem = document.createElement("li")
newItem.className = "addedClass"
newItem.appendChild(text)
if (item === "") {
alert("please fill in the blanks");
} else {
var crap = document.getElementById("todoList")
crap.appendChild(newItem)
var addhere = document.getElementById("todoList")
addhere.appendChild(checkBox);
}
function updateItem() {
if (document.getElementById(checkbox).checked) {
document.getElementById(todoList).style.textDecoration = "line-through"
}
}
}
<form name="myForm" id="todoForm">
<input id="todoInput" name="fname" required>
<button type="button" onclick="myFunction()">OK</button>
</form>
<ol id="todoList"></ol>
first handle event and call the update function and this snippet for you need to add event to checkbox. i hope it should help you thanks.
function myFunction()
{
var item=document.getElementById("todoInput").value
var checkBox = document.createElement("input");
checkBox.type = "checkbox";
checkBox.id="checkbox"
checkBox.onchange=updateItem
var text=document.createTextNode(item)
var newItem=document.createElement("li")
newItem.className="addedClass"
newItem.appendChild(text)
if (item === "")
{
alert("please fill in the blanks");
}
else
{
var crap=document.getElementById("todoList")
crap.appendChild(newItem)
var addhere=document.getElementById("todoList")
addhere.appendChild(checkBox);
}
function updateItem()
{
if (document.getElementById("checkbox").checked)
{
document.getElementById("todoList").style.textDecoration="line-through"
}
}
}
<html>
<form name="myForm" id="todoForm">
<input id="todoInput" name="fname" required >
<button type="button" onclick="myFunction()">OK</button>
</form>
<ol id ="todoList">
</ol>
</html>
you can use other wise HTML5 element for the same purpose.
<strike>not yet available!</strike>
Your code has lot of issues,
Some of the fixes / improvements I have done,
You are missing } or closed inappropriately in your code for myFunction().
Always try to use id for element on which you are going to process. I have added an id on li. (The text node)
function myFunction()
{
var item=document.getElementById("todoInput").value
var checkBox = document.createElement("input");
checkBox.type = "checkbox";
checkBox.id="checkbox"
var text=document.createTextNode(item)
var newItem=document.createElement("li")
newItem.id = "textEl";
newItem.className="addedClass"
newItem.appendChild(text)
if (item === "") {
alert("please fill in the blanks");
}
else{
var crap=document.getElementById("todoList")
crap.appendChild(newItem)
var addhere=document.getElementById("todoList")
addhere.appendChild(checkBox);
document.addEventListener('change', function (e) {
updateItem();
});
}
}
function updateItem()
{
if (document.getElementById("checkbox").checked)
{
document.getElementById("textEl").innerHTML = document.getElementById("textEl").innerHTML.strike();
}
}
<html>
<form name="myForm" id="todoForm">
<input id="todoInput" name="fname" required >
<button type="button" onclick="myFunction()">OK</button>
</form>
<ol id ="todoList">
</ol>
</html>
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'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/