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>
return false;commands in all functions. The problem is related to the dynamical creation of the buttons, as explained by deepakchethan below.<script>doesn't belong there (in fact nothing belongs there), place it before the</body>tag. It's too difficult to ascertain purpose of code because: 1. function names are generic, 2. selectors/attributes look like hard coded variables in HTML, 3. All functions do basically the same thing?, 4. There's too much workaround to avoid default behavior when submit event is fired (do you even need to submit to a server?) I can give you a better solution but I need to understand your objective. It's obvious that effort has been put in code, you just need a better direction.