javascript - 提交后清空表单数据

Question

我是编程新手，我正在使用谷歌电子表格从我的静态网站上的一个简单注册表单接收数据。一切正常，但我想在发送数据后重置表单数据。我已经在论坛中进行了研究，但没有找到任何解决方案不会删除重置时发送的数据。

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

Answer 1

要将 form 设置回其初始状态，请对其调用 reset()。根据您的逻辑，在 AJAX 请求成功后执行此操作是有意义的，因此将调用放在 then() 处理函数中:

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