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

Submit a form in a popup, and then close the popup

提问by curioustechizen

This seemed so trivial when I started off with it! My objective is this:

当我开始使用它时，这似乎微不足道！我的目标是这样的：

• When user clicks on a button, open up a form in a new window.
• Once the form is submitted, close the popup and return to the original page. The reverse order is fine too - i.e., I am okay if the popup is closed and then the form submits.

• 当用户单击按钮时，在新窗口中打开一个表单。
• 提交表单后，关闭弹出窗口并返回原始页面。相反的顺序也很好 - 即，如果弹出窗口关闭然后提交表单，我就可以了。

Here's how I'm doing this:

这是我的做法：

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

and the Javascript looks like this:

Javascript 如下所示：

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

This seems to work fine on IE8 and Chrome; but Firefox refuses to submit the form; it just closes the popup. What might I be doing wrong?

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

EDIT:

编辑：

Had forgotten to post the code the opens the popup. Here it is:

忘记发布代码打开弹出窗口。这里是：

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

And the corresponding javascript:

以及相应的javascript：

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

采纳答案by dku.rajkumar

I have executed the code in my machine its working for IE and FF also.

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

回答by Fata1Err0r

I know this is an old question, but I stumbled across it when I was having a similar issue, and just wanted to share how I ended achieving the results you requested so future people can pick what works best for their situation.

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

First, I utilize the onsubmitevent in the form, and pass thisto the function to make it easier to deal with this particular form.

首先，我利用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>

In our function, we'll submit the form data, and then we'll close the window. This will allow it to submit the data, and once it's done, then it'll close the window and return you to your original window.

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

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

Hope this helps someone out. Enjoy!

希望这可以帮助某人。享受！

---

---

Option 2: This option will let you submit via AJAX, and if it's successful, it'll close the window. This prevents windows from closing prior to the data being submitted. Credits to http://jquery.malsup.com/form/for their work on the jQuery Form Plugin

选项 2：此选项将让您通过 AJAX 提交，如果成功，它将关闭窗口。这可以防止在提交数据之前关闭窗口。感谢http://jquery.malsup.com/form/他们在 jQuery 表单插件上的工作

First, remove your onsubmit/onclick events from the form/submit button. Place an ID on the form so AJAX can find it.

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

Second, you'll want to throw this script at the bottom, don't forget to reference the plugin. If the form submission is successful, it'll close the window.

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

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

回答by curioustechizen

Here's how I ended up doing this:

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

        <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'));

}

Where hide()and unhide()set the style.displayto 'none'and 'block'respectively.

凡hide()和unhide()设置style.display，以'none'和'block'分别。

Not exactly what I had in mind, but this will have to do for the time being. Works on IE, Safari, FF and Chrome.

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

回答by Bhaskara Arani

Try like this as well

也这样试试

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

}