提交后重置 HTML 表单答案

【问题标题】：Reset HTML form after submit提交后重置 HTML 表单
【发布时间】：2018-10-05 12:11:19
【问题描述】：

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

【问题讨论】：

请提供HTML表单代码！
可能重复：stackoverflow.com/questions/8701812/…
Clear form fields with jQuery的可能重复
可能 jQuery 不够用。
@HarishST 刚刚添加，请查看更新后的问题

标签： javascript html

【解决方案1】：

试试这个：

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

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

注意：使用“myform”作为您的表单 ID 属性。例如：<form name="myform" id="myform">

【讨论】：

清空所有值真的和重置表单一样吗？预填充的值呢？
@Delowar 刚刚尝试了您的建议，似乎它正在重置整个页面而不仅仅是表单
如果你有预填充的值，你应该使用这个代码：document.getElementById('myform').reset();

【解决方案2】：

你需要获取实际的表单而不是 jQuery 对象：

$('#myform').get(0).reset();

【讨论】：

【解决方案3】：

为了让 javascript 知道要重置什么表单，您需要在表单中添加 id，而不仅仅是一个名称。试试吧，

<form name="myform" id="myform">

【讨论】：

【解决方案4】：

请注意，表单重置会将其恢复到呈现时的原始状态。如果您有预填充字段，这些字段将再次获得该值。除此之外，您还需要解决两件事：

$('#myform') 需要在 HTML 中使用 id="myform" 才能将表单作为 jQuery 对象。
reset() 仅适用于 HTML 表单对象，不适用于 jQuery 对象。将您的电话改为$('#myform')[0].reset() 或document.getElementById('myform').reset()。

【讨论】：

【解决方案5】：

清除表单的一种方法是将值设置为“空”，如下所示：

$('#myForm').val('');

那么表单输入里面就没有值了！

$('#myBtn').click(function () {
  $('#myForm').val('');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" value="hello world" id="myForm">

<button id="myBtn">myBtn</button>

【讨论】：

【解决方案6】：

document.getElementById('#myform').reset() // not responding

你快到了..getElementByID 所以你可以在 ('#myform') 中省略 #

如果您使用document.getElementById('myform').reset();，这将起作用

由于某种原因，reset() 仅适用于纯 JS 的 jquery。

【讨论】：

【解决方案7】：

jQuery 不是所有东西都需要的

<form action='server-script.cgi' onsubmit='this.submit();this.reset();return false;'>
  <blah>...</blah>
</form>

【讨论】：

【解决方案8】：

获取真实表格$('#myForm')[0].reset()
您需要在表单中添加一个 id 标签 <form id="myForm">

如果您只是使用纯 js，您可以使用 document.getElementById('myForm').reset()，但仍然在您的表单中添加一个 id 标签

编辑：评论中指出的更正

【讨论】：

即使使用 id，您的选择器对我来说似乎也是错误的。也使用 .get(0)。如果你真的有使用 jquery 的冲动，至少要保持一致。
你能详细说明你的意思是什么事件吗？
他们没有说事件 ;-)。您的 jQuery 语句并不完全正确。选择器中缺少#，您应该将reset() 作为函数调用。使用[0] 而不是get(0) 没有错：learn.jquery.com/using-jquery-core/faq/…

【解决方案9】：

document.getElementById("myform").addEventListener('submit',reset_form);

function reset_form(event) {
  //Your code goes here
  document.getElementById("myform").reset();
}

<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" id="myform" 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>

你在找这个吗？并在函数内部进行编码！或者，如果您不想提交表单，也可以使用按钮 type="button" 而不是“提交”。

【讨论】：

【解决方案10】：

由于form 已声明并在侦听器中重新使用，因此只需对其调用重置即可。

<html>
    <head>
        <script>
            window.onload = function(){
                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.reset() //Reset the form
                })
            }
        </script>
    </head>

    <body>
        <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>
    </body>
</html>

【讨论】：

【解决方案11】：

试试这个：

$('#yourInputID').val('');

这将通过其 ID 重置所选输入。

【讨论】：

【解决方案12】：

原因

当使用 fetch() 获取数据时，您只能从服务器获取响应对象。 fetch.then() 中的 reset() 不会执行。

解决方法

让事情顺利进行的一种方法是，您应该在此之前收集数据并将其保存在某个地方并重置表单，而不是在 fetch 中获取表单数据。

代码

form.addEventListener('submit', e => {
  e.preventDefault()

  const options = {
     method: 'POST',
     body: new FormData(form),
  }

  form.reset();

  fetch(scriptURL, options)
    .then(response => console.log('Success!', response))
    .catch(error => console.error('Error!', error.message))
  });

【讨论】：