javascript - 提交后重置 HTML 表单

标签 javascript html

const scriptURL = 'URL'
const form = document.forms['myform']

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))
});
<form name="myform">
  <div class="col-md-6 col-sm-6">
    <div class="form-group">
      <label for="email" class="sr-only">Email</label>
      <input name="email" class="form-control" type="email" placeholder="Email" required>
    </div>
  </div>
  <div class="col-md-6 col-sm-6">
    <button type="submit" class="btn btn-default btn-block">Subscribe</button>
  </div>
</form>

如何在处理表单提交后重置我的表单?

这是我目前正在做的事情:

 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))
                          })
                         $('#myform').reset(); // attempt to reset the form

我搜索了类似的线程并尝试了 $('#myform').reset(); 明明不行, 我是 Javascript 的新手,如果有人能指出我在哪里可以学习与此表单相关的主题,那就太好了

编辑:表单源

<form name="myform" id="myform">
    <div class="col-md-6 col-sm-6">
        <div class="form-group">
            <label for="email" class="sr-only">Email</label>
                <input name="email" class="form-control" type="email" placeholder="Email" required>
                </div>
    </div>
    <div class="col-md-6 col-sm-6">
        <button type="submit" class="btn btn-default btn-block">Subscribe</button>
    </div>
            </form>

我尝试了以下建议:

  $('#myform').val(''); // not responding
  $('#myform')[0].reset // not responding
  $('#myform').reset(); // not responding
  $('#myform').get(0).reset(); // not responding

  $('#myform').find("input:not([type="submit"), textarea").val(""); // resetting the whole page with performing submission task

  $('#myform')[0].reset() // not responding
  document.forms['myform'].val(""); // not responding
  document.getElementById('#myform').reset() // not responding

最佳答案

试试这个:

$('#myform').find("input:not([type="submit"), textarea").val("");

它将清除您表单的所有数据。但是如果你有预填值,你应该使用这个代码:document.getElementById('myform').reset()

Note: Use 'myform' as your form id attribute. ex: <form name="myform" id="myform">

关于javascript - 提交后重置 HTML 表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50015112/

相关文章:

php - 调整 php 代码以适应第二个 div

javascript - 在 HTML 中向 Angular 传递参数时如何引用 JavaScript 包?

html - polymer 元素 : paper-card image style under #shadow-root is not working

css - 将图像悬停在图像前面

javascript - 确定所有子元素的宽度

javascript - 在 React 组件中使用 JSS 合并样式

javascript - 在 vue.js 中使用 v-if 时,为什么我的 API 数据显示为未定义?

javascript - 使用jquery步骤,我们如何直接加载最后一步

html - 如何将多个图像与标题对齐?

javascript - Highcharts:如何将 y 轴移至中心(例如按性别和年龄组划分的人口)