表单保持重定向，然后单击提交按钮

Question

我已经构建了此功能，该功能在用户单击按钮时执行；它将一个列表和2个按钮元素插入到以表格包装的有序列表中。但是，每当我单击“生成”按钮时，它都会立即生成新元素，然后立即重定向到表单的操作/处理php页面，由于未填写字段等，该页面会重定向回到上一页。 ，所以我对它为什么要处理表格感到困惑？

这是我的JS函数：

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

Answer 1

type=按钮的默认值为submit-，因此省略type=系统会添加type=submit，因此您的按钮为：<button&nbsp;id="spawnbtn"&nbsp;onClick="spawnSilly();">Add&nbsp;Chapter</button>实际上是<button&nbsp;type='submit'&nbsp;id="spawnbtn"&nbsp;onClick="spawnSilly();">Add&nbsp;Chapter</button>明确指定类型以停止提交表单：<button&nbsp;type='button'&nbsp;id="spawnbtn"&nbsp;onClick="spawnSilly();">Add&nbsp;Chapter</button>