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

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

上面的解决方案不起作用，因为提交会将页面重定向到表单的端点并等待响应重定向。 我看到这是一个老问题，但被问到最多，甚至我也知道答案。仍然是我正在实施的解决方案。 我尝试使用 Nonce 确保它的安全，但如果您不在乎，则不需要。

方法一： 您需要弹出表单。

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

然后你就打开了表单。

正常提交表单。

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

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

方法二：

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

方法三：

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

Answer 2

也可以这样试试

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

}

Answer 3

我知道这是一个老问题，但我在遇到类似问题时偶然发现了它，我只是想分享一下我是如何最终实现您要求的结果的，以便未来的人们可以选择最适合他们情况的方法。

首先，我利用表单中的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 4

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

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

我已经在我的机器上执行了代码，它也适用于 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>