提交后重置 HTML 表单
Posted
技术标签:
【中文标题】提交后重置 HTML 表单【英文标题】：Reset HTML form after submit 【发布时间】：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表单代码！ 可能重复：***.com/questions/8701812/… Clear form fields with jQuery的可能重复 可能 jQuery 不够用。 @HarishST 刚刚添加，请查看更新后的问题 【参考方案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))
);
【讨论】：
以上是关于提交后重置 HTML 表单的主要内容，如果未能解决你的问题，请参考以下文章