Reset form data after submitting form

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. 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. I want the form to reset itself ( the fields should go blank ) after the form data has been submitted to a google sheet.

Can anyone send me the corrected complete code for my intended 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))
})```

Reset form data after submitting form

Question

1 answers

solution1
0 2021-04-06 21:17:12

Reset form data after submitting form

Question

1 answers

solution1 0 2021-04-06 21:17:12

solution1
0 2021-04-06 21:17:12