Question

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

Answer 1

试试这个：

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

它会清除表单的所有数据。但如果您有预填充值，则应使用以下代码：document.getElementById('myform').reset()

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

Answer 2

你需要得到实际的形式而不是jQuery对象：

employer_id

Answer 3

要让javascript知道要重置的表单，您需要在表单中添加id，而不仅仅是名称。尝试，

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

Answer 4

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

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

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

Answer 6

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

如果你刚刚使用普通js，你可以使用document.getElementById('myForm').reset()，但仍然可以在表单中添加id标记

编辑：评论中指出的更正

Answer 7

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

您快到了。.getElementByID，所以您可以省略（'#myform'）中的＃

如果您使用document.getElementById('myform').reset();

，这将起作用

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

Answer 8

并非所有功能都需要jQuery

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

Answer 9

＆＃13;

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

＆＃13;

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

＆＃13;

你正在寻找这个吗？并在函数内部进行编码！或者，如果您不希望表单提交，您可以使用按钮 type =＆＃34; button＆＃34; 而不是＆＃34;提交＆＃34;还

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

Answer 11

尝试一下：

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

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

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

提交后重置HTML表单

12 个答案: