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>

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>

• javascript
• jquery
• html

3 Answers 3

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))
})

Add this to your javascript:

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

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>