在弹出窗口中提交表单,然后关闭弹出窗口

Question

当我开始使用它时,这似乎是微不足道的!我的目标是:

• 当用户单击按钮时,在新窗口中打开表单.
• 提交表单后,关闭弹出窗口并返回原始页面.相反的顺序也很好 - 也就是说,如果弹出窗口关闭然后表单提交,我没问题.

这是我如何做到这一点:

<form action="/system/wpacert" method="post" enctype="multipart/form-data" onsubmit="return closeSelf()" name="certform">
                <div>Certificate 1: <input type="file" name="cert1"/></div>
                <div>Certificate 2: <input type="file" name="cert2"/></div>
                <div>Certificate 3: <input type="file" name="cert3"/></div>

                <div><input type="submit" value="Upload"/></div>
            </form>

并且Javascript看起来像这样:

<script type="text/javascript">
function closeSelf(){
    self.close();
    return true;
}
</script>

这似乎在IE8和Chrome上运行良好; 但Firefox拒绝提交表格; 它只是关闭弹出窗口.我可能做错了什么？

编辑:

忘记发布代码打开弹出窗口.这里是:

<div><input type="submit" value="Upload Certificates" onclick="popupUploadForm()"/>

和相应的javascript:

function popupUploadForm(){
        var newWindow = window.open('/cert.html', 'name', 'height=500,width=600');
    }

Answer 1

我已经在我的机器上执行了代码,它也适用于IE和FF.

function closeSelf(){
    // do something

    if(condition satisfied){
       alert("conditions satisfied, submiting the form.");
       document.forms['certform'].submit();
       window.close();
    }else{
       alert("conditions not satisfied, returning to form");    
    }
}


<form action="/system/wpacert" method="post" enctype="multipart/form-data" name="certform">
       <div>Certificate 1: <input type="file" name="cert1"/></div>
       <div>Certificate 2: <input type="file" name="cert2"/></div>
       <div>Certificate 3: <input type="file" name="cert3"/></div>

       // change the submit button to normal button
       <div><input type="button" value="Upload"  onclick="closeSelf();"/></div>
</form>

Answer 2

我知道这是一个老问题,但是当我遇到类似的问题时,我偶然发现了它,并且只想分享我如何结束你所要求的结果,以便未来人们可以选择最适合他们情况的方法.

首先,我利用onsubmit表单中的事件,并传递this给函数,以便更容易处理这个特定的表单.

<form action="/system/wpacert" onsubmit="return closeSelf(this);" method="post" enctype="multipart/form-data"  name="certform">
    <div>Certificate 1: <input type="file" name="cert1"/></div>
    <div>Certificate 2: <input type="file" name="cert2"/></div>
    <div>Certificate 3: <input type="file" name="cert3"/></div>

    <div><input type="submit" value="Upload"/></div>
</form>

在我们的函数中,我们将提交表单数据,然后我们将关闭窗口.这将允许它提交数据,一旦完成,它将关闭窗口并返回到原始窗口.

<script type="text/javascript">
  function closeSelf (f) {
     f.submit();
     window.close();
  }
</script>

希望这有助于某人.请享用!

选项2:此选项将允许您通过AJAX提交,如果成功,它将关闭窗口.这可以防止窗口在提交数据之前关闭.致信http://jquery.malsup.com/form/,了解他们在jQuery Form Plugin上的工作

首先,从表单/提交按钮中删除您的onsubmit/onclick事件.在表单上放置一个ID,以便AJAX可以找到它.

<form action="/system/wpacert" method="post" enctype="multipart/form-data"  id="certform">
    <div>Certificate 1: <input type="file" name="cert1"/></div>
    <div>Certificate 2: <input type="file" name="cert2"/></div>
    <div>Certificate 3: <input type="file" name="cert3"/></div>

    <div><input type="submit" value="Upload"/></div>
</form>

其次,你要把这个脚本放在底部,不要忘记引用插件.如果表单提交成功,它将关闭窗口.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<script src="http://malsup.github.com/jquery.form.js"></script> 

    <script>
       $(document).ready(function () {
          $('#certform').ajaxForm(function () {
          window.close();
          });
       });
    </script>