[英]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>
Wherea handleTheform
是一种方法,相应地定义:
<script type="text/javascript">
function handleTheForm()
{
document.forms[0].submit(); // Submit the form.
document.forms[0].reset(); // Clear the form.
}
</script>
编辑要处理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>
您可能需要花一些时间,但是由于我还没有对此进行测试。
此解决方案适用于您的问题
// 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通过以下方式轻松实现此目的
$("#formId").reset();
希望这可以帮助...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.