提交到iframe后清除表单
Clear Form after submit to iframe
我有一个表单需要提交到另一个域,像这样:
<form id="myform" action="https://example.com" target="myiframe" method="POST">
<input type="text" name="email" value="">
<input type="text" name="name" value="">
<input type="text" name="phone" value="">
<input type="submit" name="submit" value="Submit">
</form>
和iframe:
<iframe style="display:none;" name="myiframe" src=""></iframe>
这个工作很好,但在提交表单后,它保持填写。那么,提交后如何清除(重置)表单呢?
使用事件侦听器触发提交和清除。
首先,将提交按钮更改为具有适当id的常规按钮(您应该对其他元素执行相同操作):
<input type="button" name="submitButton" id="submitButton" value="Submit" />
然后用JavaScript将事件监听器绑定到按钮:
<script type="text/javascript">
document.getElementById('submitButton').addEventListener('click', function ()
{
handleTheForm;
}, false);
</script>
其中handleTheform
为方法,定义如下:
<script type="text/javascript">
function handleTheForm()
{
document.forms[0].submit(); // Submit the form.
document.forms[0].reset(); // Clear the form.
}
</script>
Edit要处理Enter按钮,只需为按钮添加一个事件侦听器并检查正在按下的键:
<script type="text/javascript">
document.addEventListener('keypress', function (e)
{
var key = e.which || e.keyCode;
var enterKey = 13;
if (key == enterKey)
{
handleTheForm;
}
});
</script>
你的最终图片应该看起来像这样:
<form id="myform" action="https://example.com" target="myiframe" method="POST">
<input type="text" name="email" id="email" value="" />
<input type="text" name="name" id="name" value="" />
<input type="text" name="phone" id="phone" value="" />
<input type="button" name="submitButton" id="submitButton" value="Submit" />
</form>
<script type="text/javascript">
function handleTheForm()
{
document.forms[0].submit(); // Submit the form.
document.forms[0].reset(); // Clear the form.
}
document.getElementById('submitButton').addEventListener('click', function ()
{
handleTheForm;
}, false);
document.addEventListener('keypress', function (e)
{
var key = e.which || e.keyCode;
var enterKey = 13;
if (key == enterKey)
{
handleTheForm;
}
});
</script>
您可能需要tweek一些东西,但由于我还没有设法测试这个
这个解决方案适用于你的问题
// code from answer with bind() transfered to plain javascript
function SubmitWithCallback(form, frame, successFunction) {
var callback = function () {
if(successFunction)
successFunction();
frame.removeEventListener('load', callback, false);
};
frame.addEventListener('load', callback, false);
form.submit();
}
您可以使用jQuery by
轻松实现这一点$("#formId").reset();
相关文章:
- 如何在使用AngularJS更改下拉值时清除表单中的数据
- 在Chrome中重新加载页面后清除表单输入值
- Angularjs:提交后清除表单无效
- 我无法使用 .reset() 清除表单
- 我无法从引导模式中清除表单数据
- 如何在我的create.js.erb中重置/清除表单
- 如何使用javascript删除项目和清除表单
- 当没有表单名称时,如何在AngularJS中清除表单
- 如何不清除表单jQuery中禁用的输入
- 使用 jQuery 重置/清除表单
- 提交 angularjs 后清除表单
- 在 cakephp 1.3 中提交后清除表单
- MVC 3 剃刀无法使用验证类清除表单值
- JavaScript -- 提交值后清除表单
- 如何编辑我的 js,以便在输出输出之前清除表单
- 提交后清除表单中的文本字段
- Chrome扩展-点击清除表单文本
- 提交时未清除表单
- 如何在验证后清除表单
- 单击运行清除表单的JS函数的按钮后,视图无法恢复