javascript - 在 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 editBookData(data) {
    console.log(data)
   //Some other work
}

如何防止默认提交行为并传递表单数据，以便我可以访问 中的表单数据editBookData() 功能？
请不要使用Jquery!先感谢您。

Answer 1

您可以使用 preventDefault()方法停止form从重新加载和使用 querySelector获取表单输入文本的方法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>