Javascript 提交到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>

这项工作很好，但在提交表格后，它仍然保持填写状态。

---

那么，如何在提交后清除（重置）表单呢？

您可以通过使用jQuery轻松实现这一点

$("#formId").reset();

希望这有帮助…

适用于您的问题

// 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();
}

使用触发提交和清算

首先，将submit按钮更改为具有适当id的常规按钮（您应该对其他元素执行相同操作）：

编辑要处理Enter按钮，只需为按钮添加一个事件侦听器，并检查按下的键：

<script type="text/javascript">
    document.addEventListener('keypress', function (e)
    {
        var key = e.which || e.keyCode;
        var enterKey = 13;
        if (key == enterKey)
        {
            handleTheForm;
        }
    });
</script>

文档.添加的文本列表器（'keypress'，函数（e）
{
var key=e.which | e.keyCode；
var-enterKey=13；
如果（键==输入键）
{
手形；
}
});

您的最终图片应该如下所示：

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

函数handleTheForm（）
{
document.forms[0]。submit（）；//提交表单。
document.forms[0].reset（）；//清除表单。
}
document.getElementById（'submitButton'）。addEventListener（'click'，function（）
{
手形；
}，假）；
文档.添加的文本列表器（'keypress'，函数（e）
{
var key=e.which | e.keyCode；
var-enterKey=13；
如果（键==输入键）
{
手形；
}
});

---

您可能需要尝试一些东西，但因为我还没有成功地测试它。

您尝试过onsubmit事件吗？我尝试过，我输入了onsubmit=“clearFunction（）”表单，它对您有效吗？我可以把它作为一个答案吗？不，这将在数据传输之前清除表单。由于

reset

是本机FormElement方法，您首先需要丢失包装该表单的jQuery对象，即

$（'#formId'）[0]。reset（）

；可以检查我编辑过的答案。是的，我在考虑这个问题，但是，我不能重定向，因为这个url用于从很多地方获取帖子数据，必须像现在这样。我将这个概念改为一个更合适的解决方案，应该适合你。是的，这个onclick方法可以工作。我尝试了这个方法，但问题是，当有人点击“回车”时，表单将不起作用。按钮有一个特殊的事件侦听器案例。看看我的编辑。据我所知，提交功能是同步的。它将首先提交，然后清除。返回false将防止发生多次提交。我可能错了，但我不认为so@user3654631-我找到了一个简单的解决方案，可以满足您的期望。函数bind（）只需要作为事件从jQuery传输到普通javascripthandler@user3654631-我更新为纯javascript，并从以前的尝试中删除了垃圾。该实现需要onsubmit=“SubmitWithCallback（document.myform，document.getElementById（“myiframe”），this.clear）”；“假设您将iframe的id更改为myiframe

<script type="text/javascript">
    function handleTheForm()
    {
        document.forms[0].submit(); // Submit the form.
        document.forms[0].reset(); // Clear the form.
    }
</script>

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