我构建了这个函数,当用户单击按钮时执行;它将一个列表和 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
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>
任何帮助都会非常好! :)
最佳答案
按钮的默认 type=
为 submit
- 因此,通过省略 type=
,系统会添加 type=submit
,所以你的按钮:
<button id="spawnbtn" onClick="spawnSilly();">Add Chapter</button>
实际上是
<button type='submit' id="spawnbtn" onClick="spawnSilly();">Add Chapter</button>
明确指定类型以停止提交表单:
<button type='button' id="spawnbtn" onClick="spawnSilly();">Add Chapter</button>
关于javascript - 单击提交按钮之前表单不断重定向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55757818/