发布到MongoDB后清除表单输入

问题描述

我创建了一个将数据发布到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>

解决方法

如果添加任意时差，该时差应适用于大多数现代浏览器。过去只有Chrome对此有问题，但我知道FireFox现在也有问题。鉴于新的Edge基于Chromium，我认为您会遇到类似的问题而不会有所抵触。

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

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