提交动态生成自 JavaScript

Question

我根据用户的操作从 JavaScript 动态生成以下表单：

<form id="editBookForm" onsubmit="editBookData()">
   <input type="text" name="isbn" placeholder="ISBN"  required />
   <input type="text" name="book" placeholder="Book..."  required />
   <button class ="btn">Update!</button>
</form>

editBookData function 是：

function editBookData(data) {
    console.log(data)
   //Some other work
}

如何防止默认提交行为并传递表单数据，以便我可以访问editBookData() function 中的表单数据？

没有 Jquery 请。 先感谢您。

Answer 1

您可以使用preventDefault()方法停止重新加载form ，并使用querySelector方法获取 function 中的表单输入文本values

现场演示：（无 jQuery）

 function editBookData(e) { e.preventDefault() //prevent default behaviour //get input value let isbn = document.querySelector('input[name="isbn"]').value let book = document.querySelector('input[name="book"]').value console.log(isbn, book) //Do Some other work with values }

 <form id="editBookForm" onsubmit="editBookData(event)"> <input type="text" name="isbn" placeholder="ISBN" required /> <input type="text" name="book" placeholder="Book..." required /> <button class="btn">Update!</button> </form>

Answer 2

使用event.preventDefault()来阻止提交表单，并使用FormData Web API 动态生成表单。

Event.preventDefault 参考
MDN 上的 FormData API

 function editBookData(event) { event.preventDefault(); let editBookForm = document.getElementById('editBookForm'); let formData = new FormData(editBookForm); for (item of formData.values()) { console.log(item); } //.... other things to do }

 <form id="editBookForm" onsubmit="editBookData(event)"> <input type="text" name="isbn" placeholder="ISBN" required /> <input type="text" name="book" placeholder="Book..." required /> <button class="btn">Update!</button> </form>