CODEWITHSUNDEEP
javascriptjqueryhtml
Rafaela Rodrigues
Rafaela Rodrigues

Reputation: 45

Clear form data after submission

I'm new to programming and I'm using google spreadsheets to receive data from a simple registration form on my static site. Everything is working but I would like to reset the form data after sending the data. I already researched right here in the forum and I did not find any solution that did not erase the data for sending in the reset.

<script>
  const scriptURL = 'url-sheet'
  const form = document.forms['submit-to-google-sheet']

  form.addEventListener('submit', e => {
    e.preventDefault()
    fetch(scriptURL, { method: 'POST', body: new FormData(form)})
      .then(response => console.log('Success!', response))
      .catch(error => console.error('Error!', error.message))
  })
</script>

<form class="apply" id="apply" name="submit-to-google-sheet">
        <div class="j-row apply-field">
          <div class="j-col j-col-3">
            <label for="Gamertag">Gamertag <span class="gold" title="Required field">*</span></label>
          </div>
          <div class="j-col j-col-8 push-1">
            <input type="text" name="gamertag" placeholder="gamertag" maxlength="12" required>
          </div>
        </div>
        <div class="j-row apply-field">
          <div class="j-col j-col-3">
            <label for="Discord">Discord <span class="gold" title="Required field">*</span></label>
          </div>
          <div class="j-col j-col-8 push-1">
            <input type="text" name="discord" placeholder="usuário" maxlength="32" required>
            <span class="gold">#</span>
            <input type="number" name="id" placeholder="1234" maxlength="6" required>
          </div>
        </div>
        <div class="j-row apply-field">
          <div class="j-col j-col-3">
            <label for="Refferal">Reference?</label>
          </div>
          <div class="j-col j-col-8 push-1">
            <input type="text" name="ref" placeholder="Name" maxlength="20">
          </div>
        </div>
        <input type="text" name="submit" style="display:none" />
        <div class="j-row apply-field">
          <div class="j-col j-col-12">
            <button class="button full-width black" type="submit">Submit</button>
          </div>
        </div>
      </form>

Upvotes: 3

Views: 3790

Answers (3)

Engrtunze
Engrtunze

Reputation: 30

try document.getElementById("apply").reset();

<script>
  const scriptURL = 'url-sheet'
  const form = document.forms['submit-to-google-sheet']

  form.addEventListener('submit', e => {
    e.preventDefault()
    fetch(scriptURL, { method: 'POST', body: new FormData(form)})
      .then(response => console.log('Success!', response))
      .catch(error => console.error('Error!', error.message))
      
      document.getElementById("apply").reset();
  })
  
</script>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

To set the form back to its initial state call reset() on it. Given your logic it would make sense to do this after the AJAX request was successful, so place the call in the then() handler function:

form.addEventListener('submit', e => {
  e.preventDefault()
  fetch(scriptURL, { method: 'POST', body: new FormData(form)}).then(response => {
    console.log('Success!', response)
    form.reset();
  }).catch(error => console.error('Error!', error.message))
})

Upvotes: 5

B. Cratty
B. Cratty

Reputation: 1991

Add this to your javascript:

$( '#apply' ).each(function(){
    this.reset();
});

Upvotes: 0

Related Questions