Question

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

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

Answer 2

将此添加到您的javascript中：

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

Answer 3

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

提交后清除表格数据

3 个答案: