发布到 MongoDB 后清除表单输入

Question

我创建了一个将数据发布到 MongoDB 数据库的表单。问题是，当我发布时，我希望刷新输入字段而不必刷新整个页面。

当我调用函数 resetBooks() 时，我认为它会先清除表单，然后再发布任何内容，对吗？

如何获取表单来发布数据，然后清除输入字段。

<div class="booksInput">
  <h4>Add a book</h4>

  <form id="bookForm" method="post" action="/books" 
      target="hiddenFrame" onsubmit="resetBooks()">
       <input class="form-control" name="title" type="text" placeholder="book title">
       <input class="form-control" name="author" type="text" placeholder="author">
       <input class="form-control" name="description" type="text" placeholder="short description">
       <button class="btn btn-primary" type="submit" value="Add Book">Submit</button>
  </form>

</div>

<script>
  function resetBooks(){
    document.getElementById('bookForm').reset();
    };

  app.post("/", (req, res)=>{
  let myBook = new Book (req.body);
  myBook.save()
  .then(item =>{
    res.send("Book saved to database");
  })
  .catch(err=>{
    res.status(err).send("unable to save to database");
   });
  });

</script>

Answer 1

如果您添加一个适用于大多数现代浏览器的任意时间偏移量。以前只有 Chrome 有这个问题，但我知道 FireFox 现在也有。由于新的 Edge 是基于 Chromium 的，我认为您会遇到类似的问题而不会产生影响。

我附上了一些来自 Firefox 请求的屏幕截图，因为小提琴对于表单提交来说太可怕了。

function resetBooks(){
    setTimeout(function(){ document.getElementById('bookForm').reset();}, 100);    
};