Cannot get rid of page reload in html/javascript form

Question

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>

Does this answer your question? [JavaScript code to stop form submission](https://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission) — Peter Krebs, Jun 09 '21 at 11:59
Thanks for the link, but no, it does not, since I have included `return false;` commands in all functions. The problem is related to the dynamical creation of the buttons, as explained by deepakchethan below. — tfv, Jun 09 '21 at 17:11
@zer00ne I have tried to cut down the script as far as possible to only show the error. The reason why the script is so verbose and hardcoded is that it gets produced by a python programm analyzing a database, but this is irrelevant for the error discussed. deepakchethan has answered my question below, but thanks for your efforts! — tfv, Jun 10 '21 at 04:16
Should've mentioned Python or better yet include a Python tag, then there'd be no confusion. — zer00ne, Jun 10 '21 at 16:55

score 1 · Accepted Answer · answered Jun 09 '21 at 12:14

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>

Thanks for this explanation, I had already assumed that this is not the typical "stop submission be returning `false` value" problem and had a feeling that it was related to the dynamical creation of the buttons, but did not find your solution! — tfv, Jun 09 '21 at 17:08

Cannot get rid of page reload in html/javascript form

1 Answers1