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

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 表单插件上的工作

首先，从表单/提交按钮中删除您的 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>

Answer 3

这是我最终这样做的方式：

        <div id="divform">
            <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><input type="button" value="Upload" onclick="closeSelf();"/></div>
            </form>
        </div>
        <div  id="closelink" style="display:none">
            <a href="javascript:window.close()">Click Here to Close this Page</a>
        </div>

function closeSelf(){
    document.forms['certform'].submit();
    hide(document.getElementById('divform'));
    unHide(document.getElementById('closelink'));

}

其中hide()和unhide()将style.display设置为'none'和'block' 。

不完全是我的想法，但暂时必须这样做。 适用于 IE、Safari、FF 和 Chrome。

Answer 4

顶部的解决方案将不起作用，因为提交会将页面重定向到表单的端点并等待响应重定向。 我看到这是一个老问题，但最常见的问题，甚至我也知道答案。仍然是我正在实施的解决方案。 我试图用 Nonce 来保证它的安全，但如果你不在乎，那就不需要了。

方法一：需要弹出表单。

document.getElementById('edit_info_button').addEventListener('click',function(){
        window.open('{% url "updateuserinfo" %}','newwindow', 'width=400,height=600,scrollbars=no');
    });

然后你打开表格。

正常提交表格。

然后返回一个包含具有严格内容安全策略的 htmlfile 的 HTTPResponse。 包含以下脚本的变量。 Nonce 包含一个 Base64 128 位或更大的随机生成的字符串，用于向服务器发出的每个请求。

<script nonce="{{nonce}}">window.close()</script>

方法二：

或者您可以重定向到另一个应该关闭的页面......其中已经包含window.close()脚本。 这将关闭弹出窗口。

方法三：

否则，最简单的方法是使用 Ajax 调用（如果您对 one.use 感到满意）。使用then()并检查您对来自服务器的httpresponse的条件。成功时关闭窗口。

Answer 5

也这样试试

covertPostSub("/xyz/test.jsp","?param1=param1&param2=param2","_self","true");
covertPostSub("/xyz/test.jsp","?param1=param1&param2=param2","_blank","true");

var convPop = null;
function covertPostSub(action,paramsTosend,targetIframe,isWindow){
    var Popup = null;
    var form = document.createElement("form");
    form.setAttribute("method", "POST");
    form.setAttribute("id","TheForm");
    form.setAttribute("action", action);
    form.setAttribute("target", targetIframe);
    var params = paramsTosend;
    params = params.substring(1, params.length);
    params = params.split("&");
    for(var key=0; key<params.length; key++) {
        var sa = params[key];
        sa = sa.split("=");
        var xs = (sa[1]);

        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", sa[0]);
            hiddenField.setAttribute("value",xs);

            form.appendChild(hiddenField);
         }
    }
    document.body.appendChild(form);
    form.style.display = "none";
    if(isWindow){
        window.open('', "formpopup","width=900,height=590,toolbar=no,scrollbars=yes,resizable=no,location=0,directories=0,status=1,menubar=0,left=60,top=60");
        form.target = 'formpopup';
        form.submit();
    }else{
        form.submit();
    }

}