提交到iframe后清除表单

时间:2014-07-22 16:08:55

标签: javascript html forms 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>

这项工作很好,但在提交表格后,它会保持填充状态。 那么,如何在提交后清除(重置)表单?

3 个答案:

答案 0 :(得分:1)

使用event-listener触发提交和清算。

首先,将提交按钮更改为具有正确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>

编辑要处理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 一些东西,但因为我还没有设法测试它。

答案 1 :(得分:0)

This solution适用于您的问题

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

答案 2 :(得分:-1)

您可以使用 jQuery

轻松实现此目的
$("#formId").reset();

希望这会有所帮助......