提交表单后重置表单数据

Question

我有这个用于 html/css 表单的代码，它有一个正在运行的脚本，它将输入表单的数据输入到谷歌表中。 现在的问题是，在提交表单数据后，名称、Email、电话等值字段应该变为空白，但在此表单中，即使点击提交按钮后仍显示最后输入的数据。 在表单数据提交到谷歌表后，我希望表单自行重置（字段应为 go 空白）。

谁能给我发送我想要的 output 的更正完整代码

 const scriptURL = 'https://script.google.com/macros/s/AKfycbxkgWotCMyvIKoT9aGtPCndZdHtHrq8i972t9CKAVjO6xC7T0I/exec' const form = document.forms['google-sheet'] form.addEventListener('submit', e => { e.preventDefault() fetch(scriptURL, { method: 'POST', body: new FormData(form) }).then(response => alert("Thanks for Contacting us... We Will Contact You Soon...")).catch(error => console,error('Error.', error.message)) })

 .register.nav-tabs.nav-link:hover { border: none; }.text-align { margin-top: -3%; margin-bottom: -9%; padding: 10%; margin-left: 30%; }.form-new { margin-right: 22%; margin-left: 20%; }.register-heading { margin-left: 21%; margin-bottom: 10%; color: #e9ecef; }.register-heading h1 { margin-left: 21%; margin-bottom: 10%; color: #e9ecef; }.register { background: -webkit-linear-gradient(left, #055a4f, #00c6ff); margin-top: 3%; padding: 3%; border-radius: 2.5rem; }.btnSubmit { width: 50%; border-radius: 1rem; padding: 1.5%; color: #fff; background-color: #03612e; border: none; cursor: pointer; margin-right: 6%; color: rgb(246, 246, 252); margin-top: 4%; }

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> </head> <body> <div class="container register"> <div class="row"> <div class="col-md-12"> <div class="tab-pane fade show active text-align form-new" id="home" role="tabpanel" aria-labelledby="home-tab"> <h3 class="register-heading">Connect Google Spreadsheet to HTML</h3> <div class="row register-form"> <div class="col-md-12"> <form method="post" autocomplete="off" name="google-sheet"> <div class="form-group"> <input type="text" name="Name" class="form-control" placeholder="Your Name *" value="" required="" /> </div> <div class="form-group"> <input type="text" name="Email" class="form-control" placeholder="Your Email *" value="" required="" /> </div> <div class="form-group"> <input type="number" name="Phone" class="form-control" placeholder="Your Contact Number *" value="" required="" /> </div> <div class="form-group"> <input type="submit" name="submit" class="btnSubmit btn-block" value="Login" /> </div> </form> </div> </div> </div> </div> </div> </div> </body> </html>

Answer 1

const form = document.forms['google-sheet']

form.addEventListener('submit', e => {
  e.preventDefault()
  fetch(scriptURL, {
      method: 'POST',
      body: new FormData(form)
    })
    .then(
          response => alert("Thanks for Contacting us..! We Will Contact You Soon..."), 
          form.trigger('reset')
     )
    .catch(error => console.error('Error!', error.message))
})```

提交表单后重置表单数据

问题描述

1 个解决方案

解决方案1
0 2021-04-06 21:17:12

提交表单后重置表单数据

问题描述

1 个解决方案

解决方案1 0 2021-04-06 21:17:12

解决方案1
0 2021-04-06 21:17:12