提交表单后重置表单数据

Question

I have this code for html/css form which has a Script running which enters the data entered the form into a google sheet.我有这个用于 html/css 表单的代码，它有一个正在运行的脚本，它将输入表单的数据输入到谷歌表中。 Now the problem is that after submitting the form data The value fields such as Name, Email, Phone should become blank but in this form it still shows the last data entered even after hitting submit button.现在的问题是，在提交表单数据后，名称、Email、电话等值字段应该变为空白，但在此表单中，即使点击提交按钮后仍显示最后输入的数据。 I want the form to reset itself ( the fields should go blank ) after the form data has been submitted to a google sheet.在表单数据提交到谷歌表后，我希望表单自行重置（字段应为 go 空白）。

Can anyone send me the corrected complete code for my intended output谁能给我发送我想要的 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