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

Share Improve this question Follow asked Oct 23, 2018 at 16:36 Rafaela RodriguesRafaela Rodrigues 4522 silver badges55 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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>