Form keeps redirecting before submit button is clicked

Question

I have built this function, that executes when a user clicks a button; it inserts a list, and 2 button elements, into an ordered list wrapped in a form. however whenever i click the spawn button, it momentarily spawns the new elements, and then instantly redirects to the action/processing php page of the form, which redirects back to the previous page due to fields not being filled etc. I have not pressed submit, so I am confused as to why its processing the form?

here is my JS function:

 function spawnSilly() //spawn chapters function { var div = document.createElement("LI"); //creating elements var input = document.createElement("INPUT"); var button = document.createElement("BUTTON"); var del_button = document.createElement("BUTTON") input.setAttribute("type", "text"); //setting attributes input.setAttribute("name", "chapterInput" + stringNumber); input.setAttribute("placeholder", "Title"); input.setAttribute("id", "var timestamp = new Date().getUTCMilliseconds();") button.setAttribute("type", "button"); button.setAttribute("onClick", "redirect()"); button.setAttribute("id", "var timestamp = new Date().getUTCMilliseconds();") button.innerHTML = "Edit"; div.setAttribute("id", "var timestamp = new Date().getUTCMilliseconds();") del_button.setAttribute("id", "var timestamp = new Date().getUTCMilliseconds();") del_button.innerHTML = "Delete Chapter"; del_button.setAttribute("onClick", "removeElement(this.id)") div.appendChild(input) //appending to list div.appendChild(button) div.appendChild(del_button); var chapterNumber = getCount(document.getElementById('spawnList'), false) //setting number of chapter var number = $('#spawnList').children(); //fetching number of children in list var stringNumber = String(number) //setting chapter number to string for name attribute in input var list = document.getElementById("spawnList"); list.insertBefore(div, list.childNodes[number]); //inserting one after another var newChapterNumber = chapterNumber + 1; //setting elements class as their chapter number input.setAttribute("class", newChapterNumber); button.setAttribute("class", newChapterNumber); div.setAttribute("class", newChapterNumber); del_button.setAttribute("class", newChapterNumber); input.setAttribute("index", newChapterNumber); button.setAttribute("index", newChapterNumber); div.setAttribute("index", newChapterNumber); del_button.setAttribute("index", newChapterNumber); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="title-processing.php" method="post"> <ol id="spawnList"> </ol> <button id="spawnbtn" onClick="spawnSilly();">Add Chapter</button> <button type="submit" name="Submit">Save</button> </form> 

Any help would be so great! :)

Answer 1

The default type= for a button is submit - so by omitting type= the system adds type=submit , so your button:

<button id="spawnbtn" onClick="spawnSilly();">Add Chapter</button>

is actually

<button type='submit' id="spawnbtn" onClick="spawnSilly();">Add Chapter</button>

specify the type explicitly to stop your form being submitted:

<button type='button' id="spawnbtn" onClick="spawnSilly();">Add Chapter</button>