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)
Related
I am trying to set up a form in which buttons fill input fields and in which those input fields can again be emptied by other "delete" buttons.
This works quite well, but I cannot get rid of one problem in a special action sequence:
If I press buttons "one" and "three", the corresponding input forms are filled properly, this is what I want.
Now if after that I press the "Delete A" button, one of two unwanted things happen:
If the command event.preventDefault() exists in line 15, then (only) the first input field gets cleared correctly and the buttons are restored. But when I then again press button "one", the complete form gets cleared and the word "three" vanishes from form 2.
If the command event.preventDefault() is deleted from line 15, then as soon as I press "Delete A", the complete form gets cleared and also the word "three" vanishes from form 2.
I do not want to clear the complete form to be reloaded at any stage.
EDIT: The problem is not a question of returning false values from functions to prevent form submission as discussed in JavaScript code to stop form submission . in fact all my fucntions are returning falsevalues.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
</head>
<script>
function evt_r(){
var task = document.getElementById("task_"+arguments[0]);
var tasklabel = arguments[0];
var texts = Array.from(arguments).slice(1)
var length = task.getElementsByTagName("button").length - 1;
event.preventDefault()
// remove existing buttons
for (let i =0; i < length; i++){
task.removeChild(task.getElementsByTagName("button")[0]);
}
// recreate all buttons from scratch
for (let i =texts.length-1; i >=0 ; i--){
btn = document.createElement("button");
btn.innerHTML = texts[i];
btn.onclick= "evt_"+String(tasklabel)+"_"+String(i)+"()";
btn.id="id_btn_"+String(tasklabel)+"_"+String(i);
task.insertBefore(btn, task.firstChild);
task.children[0].style.marginRight ="5px";
}
document.getElementById("id_task_"+String(tasklabel)).value="";
return false;
}
function evt_0_0(){
var elem = document.getElementById("id_btn_0_0");
event.preventDefault()
elem.parentNode.removeChild(elem);
document.getElementById("id_task_0").value=document.getElementById("id_task_0").value +"one "
return false;
}
function evt_0_1(){
var elem = document.getElementById("id_btn_0_1");
event.preventDefault()
elem.parentNode.removeChild(elem);
document.getElementById("id_task_0").value=document.getElementById("id_task_0").value +"two "
return false;
}
function evt_1_0(){
var elem = document.getElementById("id_btn_1_0");
event.preventDefault()
elem.parentNode.removeChild(elem);
document.getElementById("id_task_1").value=document.getElementById("id_task_1").value +"three "
return false;
}
function evt_1_1(){
var elem = document.getElementById("id_btn_1_1");
event.preventDefault()
elem.parentNode.removeChild(elem);
document.getElementById("id_task_1").value=document.getElementById("id_task_1").value +"four "
return false;
}
</script>
<body>
<ol>
<li style="margin-bottom:8px"><form id = "task_0" >
<button id="id_btn_0_0" onclick="evt_0_0()">one</button>
<button id="id_btn_0_1" onclick="evt_0_1()">two</button>
<button id="id_btn_0_r" onclick='evt_r("0", "one", "two")' style="margin-left:50px">Delete A</button>
<br>
<input id="id_task_0" style="margin-top:10px" ></input>
</form>
<li style="margin-bottom:8px"><form id = "task_1" >
<button id="id_btn_1_0" onclick="evt_1_0()">three</button>
<button id="id_btn_1_1" onclick="evt_1_1()">four</button>
<button id="id_btn_1_r" onclick='evt_r("1", "three", "four")' style="margin-left:50px">Delete B</button>
<br>
<input id="id_task_1" style="margin-top:10px" ></input>
</form>
</body>
</html>
The issue with your btn.onclick initialization in evt_r(). You are assigning it a string. Since your new buttons are in a form and not calling event.preventDefault() in this case, the page is refreshing. Try doing doing btn.onclick=new Function("evt_"+String(tasklabel)+"_"+String(i)+"()"); instead. So your html becomes:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
</head>
<script>
function evt_r(){
var task = document.getElementById("task_"+arguments[0]);
var tasklabel = arguments[0];
var texts = Array.from(arguments).slice(1)
var length = task.getElementsByTagName("button").length - 1;
event.preventDefault();
// remove existing buttons
for (let i =0; i < length; i++){
task.removeChild(task.getElementsByTagName("button")[0]);
}
// recreate all buttons from scratch
for (let i =texts.length-1; i >=0 ; i--){
btn = document.createElement("button");
btn.innerHTML = texts[i];
btn.onclick=new Function("evt_"+String(tasklabel)+"_"+String(i)+"()");
btn.id="id_btn_"+String(tasklabel)+"_"+String(i);
task.insertBefore(btn, task.firstChild);
task.children[0].style.marginRight ="5px";
}
document.getElementById("id_task_"+String(tasklabel)).value="";
return false;
}
function evt_0_0(){
var elem = document.getElementById("id_btn_0_0");
event.preventDefault()
elem.parentNode.removeChild(elem);
document.getElementById("id_task_0").value=document.getElementById("id_task_0").value +"one "
return false;
}
function evt_0_1(){
var elem = document.getElementById("id_btn_0_1");
event.preventDefault()
elem.parentNode.removeChild(elem);
document.getElementById("id_task_0").value=document.getElementById("id_task_0").value +"two "
return false;
}
function evt_1_0(){
var elem = document.getElementById("id_btn_1_0");
event.preventDefault()
elem.parentNode.removeChild(elem);
document.getElementById("id_task_1").value=document.getElementById("id_task_1").value +"three "
return false;
}
function evt_1_1(){
var elem = document.getElementById("id_btn_1_1");
event.preventDefault()
elem.parentNode.removeChild(elem);
document.getElementById("id_task_1").value=document.getElementById("id_task_1").value +"four "
return false;
}
</script>
<body>
<ol>
<li style="margin-bottom:8px"><form id = "task_0" >
<button id="id_btn_0_0" onclick="evt_0_0()">one</button>
<button id="id_btn_0_1" onclick="evt_0_1()">two</button>
<button id="id_btn_0_r" onclick='evt_r("0", "one", "two")' style="margin-left:50px">Delete A</button>
<br>
<input id="id_task_0" style="margin-top:10px" ></input>
</form>
<li style="margin-bottom:8px"><form id = "task_1" >
<button id="id_btn_1_0" onclick="evt_1_0()">three</button>
<button id="id_btn_1_1" onclick="evt_1_1()">four</button>
<button id="id_btn_1_r" onclick='evt_r("1", "three", "four")' style="margin-left:50px">Delete B</button>
<br>
<input id="id_task_1" style="margin-top:10px" ></input>
</form>
</body>
</html>
I have a form that permits to user to add textfield whenever he click on a button
I want to add link below every added textfield that allow to remove it
here is the script
<script>
function myFunction() {
let wrapper = document.getElementById("dynamic-question");
var input = document.createElement("input");
var del = document.createElement("button");
var div = document.createElement("div");
del.className = "del"
del.innerText = "X"
div.appendChild(input)
div.appendChild(del)
div.appendChild(document.createElement("br"));
div.appendChild(document.createElement("br"));
wrapper.appendChild(div)
}
document.getElementById("dynamic-question").addEventListener("click",function(e) {
if (e.target.className=="del") {
e.target.closest("div").remove()
}
})
</script>
and here the html code
<form id="myForm" method="POST" action="./gett">
<label for="question"> Question </label> <br>
<input class="champ" type="textarea" name="question" id="question" value=""><br><br>
<label for="ans"> Answers </label> <br>
<input type="text" name="ans1" id="ans1" value=""><br><br>
<input type="text" name="ans2" id="ans2" value=""><br><br>
<div id="dynamic-question"></div>
<button type="button" onclick="myFunction()">Add proposition</button> <br><br>
<input type="submit" value="submit">
</form>
type=button on the add
e.preventDefault() on the button to delete OR make type=button too
Use a container for the input, the BRs and the delete to get rid of them all in one go
Then call remove
function myFunction() {
let wrapper = document.getElementById("dynamic-question");
var input = document.createElement("input");
var del = document.createElement("button");
var div = document.createElement("div");
del.className = "del";
del.innerText = "X";
del.type="button";
div.appendChild(input);
div.appendChild(del);
div.appendChild(document.createElement("br"));
div.appendChild(document.createElement("br"));
wrapper.appendChild(div);
}
document.getElementById("dynamic-question").addEventListener("click",function(e) {
if (e.target.className=="del") {
e.preventDefault();
e.target.closest("div").remove();
}
})
<button type="button" onclick="myFunction()">Add</button>
<div id="dynamic-question"></div>
Individually like this - all nearest siblings needs to be removed including the BRs
function myFunction() {
let wrapper = document.getElementById("dynamic-question");
var input = document.createElement("input");
var del = document.createElement("button");
del.className = "del";
del.type="buttpn"
del.innerText = "X";
wrapper.appendChild(input);
wrapper.appendChild(del);
wrapper.appendChild(document.createElement("br"));
wrapper.appendChild(document.createElement("br"));
}
document.getElementById("dynamic-question").addEventListener("click",function(e) {
if (e.target.className=="del") {
e.preventDefault();
e.target.previousElementSibling.remove(); // remove field
e.target.nextElementSibling.remove(); // remove br
e.target.nextElementSibling.remove(); // remove br
e.target.remove();
}
})
<button type="button" onclick="myFunction()">Add</button>
<div id="dynamic-question"></div>
You can try creating link like button, you can attach a function to that button to remove like the following way:
function myFunction() {
let wrapper = document.getElementById("dynamic-question");
var form = document.getElementById("myForm");
var input = document.createElement("input");
var btn = document.createElement("button");
btn.textContent = "Remove";
btn.addEventListener('click', remove);
wrapper.appendChild(input);
wrapper.appendChild(btn);
wrapper.appendChild(document.createElement("br"));
wrapper.appendChild(document.createElement("br"));
}
function remove(){
this.previousSibling.remove(); //Remove the input
this.nextSibling.remove(); //Remove the first br
this.nextSibling.remove(); //Remove the second br
this.remove(); //Remove the button
}
button:not(:first-child) {
background:none!important;
color:inherit;
border:none;
padding:0!important;
font: inherit;
border-bottom:1px solid #444;
cursor: pointer;
}
<button type="button" onclick="myFunction()">Create</button>
<div id="dynamic-question"></div>
You can remove an element from the DOM like so:
To remove a specified element without having to specify its parent node:
function removeEl(id) {
let node = document.getElementById(id);
if (node.parentNode) {
node.parentNode.removeChild(node);
}
}
MDN Docs
So, in your case, you may want to add an ID when you are creating the textfield, so you are able to find it again and then remove it:
<script>
function myFunction() {
let wrapper = document.getElementById("dynamic-question");
var form = document.getElementById("myForm");
var input = document.createElement("input");
// Add id here
input.id = "[id_here]"
wrapper.appendChild(input)
wrapper.appendChild(document.createElement("br"));
wrapper.appendChild(document.createElement("br"));
}
</script>
Then you can call the function above like so:
removeEl("[id_here]")
Try this:
For each element you dynamically add, create a div and add a remove link with some class, then add a listener that when user clicks on the remove link, it removes the element, and the parent element (the div that the link and the input are inside).
//annonymous function
var btnAddField = document.getElementById("btnAddField");
var wrapper = document.getElementById("wrapper");
btnAddField.onclick = function() {
var div = document.createElement('div');
var input = document.createElement("input");
var removeLink = document.createElement("a");
removeLink.innerHTML = 'Remove input';
removeLink.className = "btn-remove";
div.append(input);
div.append(removeLink)
wrapper.append(div);
};
document.addEventListener('click',function(e){
if(e.target && e.target.className == 'btn-remove'){
e.target.parentNode.remove();
}
});
<div id="wrapper">
<button id="btnAddField">
Add input field
</button>
</div>
The code checks barcodes using a barcode scanner.
Search_code is filled by a user (keyboard) , and insert_code is filled automatically by a barcode scanner.
Currently, code works if both inputs are introduced in barcode scanner values which is not functional for me.
The code needs to run when:
search_code is entered manually ( keyboard ) and
insert_code is filled automatically by the barcode scanner
var search_code = document.getElementById('search_code');
var insert_code = document.getElementById('insert_code');
var result = document.getElementById('result');
var button = document.getElementById('button');
var audio = new Audio('sound.wav');
// respond to button click
button.onclick = function validate(e) {
e.preventDefault();
// show verification result:
if (search_code.value == insert_code.value) {
result.textContent = 'code ok';
result.className = "ok";
audio.play();
} else {
result.textContent = 'code is not ok';
result.className = "not-ok";
}
// clear input when wrong:
if (search_code.value !== insert_code.value) {
insert_code.value = '';
}
return false;
};
function clearField(input) {
input.value = "";
};
....
<form>
<input type="text" name="search_code" onfocus="clearField(this, this.placeholder='');" onblur="this.placeholder='introdu codul'" id="search_code" placeholder="introdu codul" autocomplete="off" value=""/><br/>
<input type="" name="insert_code" onfocus="clearField(this, this.placeholder='');" onblur="this.placeholder='scaneaza codul'" id="insert_code" placeholder="scaneaza codul" autocomplete="off" value=""/><br/><br/>
<input type="submit" id="button" name="button" value="verifica COD" />
</form>
</div>
<div id="result"></div>
</div>
<script src="js/action_input.js"></script>
</body>
</html>
Thank you!
To prevent a textbox from being filled by a bar-code reader simply disable onpaste event .
$(document).ready(function(){
$('#search_code').bind("cut copy paste",function(e) {
e.preventDefault();
});
});
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>