在表单提交后关闭弹出窗口并在父窗口触发点击事件

Question

我有一个父窗口，我使用window.open()打开一个弹出窗口，并使用window.opener方法监视该弹出窗口的返回结果。这里有两个问题:

1. 在我的弹出窗口中，有一个提交按钮，负责表单的提交功能，我希望等待提交完成并在提交后关闭此弹出窗口。
2. 当表单被提交且弹出窗口被关闭时，我正在获取其中一个文本框的值，并在我的父窗口中使用它自动模拟搜索。

代码:

// parent window handling of information returned from the pop-up window
function HandlePopupResult(value) {
    alert("The field value is: " + value);
    $("input[value='Search']").trigger("click");
}

//pop-up window handling of information to be returned to the parent window on submission
$("#myForm").submit(function() {
    window.opener.HandlePopupResult($("#field").val());
    window.close();
});

我的问题是：我该如何确保提交已完成，以便我触发父窗口中的搜索单击并关闭此弹出窗口？请告诉我。

我最终能够正确地将信息发送回父表单，但我只需要确保我的提交已成功。有没有建议可以确保我仅在提交成功后触发事件？

干杯。

- Neophile

---

在https://dev59.com/iGgu5IYBdhLWcg3wJT9I中的任何选项对您有效吗？ - Ramón Gil Moreno

不是真的。我认为我即将得到答案。我会发布它。 - Neophile

抱歉，我没有及时回复你的问题。因为我所在的地方是一个假日周末，所以直到今天我才回来。我在下面发布了一些额外的信息，希望能对你有所帮助。 - Fata1Err0r

Answer 1

你打开的新窗口（弹出窗口）将在提交时加载一个新的HTML页面（jQuery submit调用的函数在表单发送到服务器之前执行）。

你应该在弹出窗口中加载的新页面内执行操作。

- Ramón Gil Moreno

---

有没有办法告诉我提交事件已经完成，我可以在表单本身执行其他任务？ - Neophile

我进行了一些小研究，发现在这个问题(https://dev59.com/iGgu5IYBdhLWcg3wJT9I)中有最全面的解释来描述你所提到的情况。但请注意，针对每个解决方法都会有很多"对我没用"的评论，因此那里展示的替代方案(除了我回答中的方案)看起来不可靠。 - Ramón Gil Moreno

Answer 2

这对未来的其他人会很有帮助。我自己能够通过修改上面的代码为下面给出的代码来实现这一点：

// parent window handling of information returned from the pop-up window
function HandlePopupResult(value) {
    alert("The field value is: " + value);
    $("input[value='Search']").trigger("click");
}

将表单提交更改为AJAX post调用，以确保表单提交已发生，然后执行我剩余的任务：处理弹出窗口的结果，之后关闭弹出窗口。效果非常好！

//pop-up window handling of information to be returned to the parent window on submission
$("#myForm").submit(function() {
        $.ajax({
          type: 'POST',
          url: $(this).attr('action'),
          data: $(this).serialize(),
          success: function(data) {
            window.opener.HandlePopupResult($("#field").val());
            window.close();
          }
        });
        return false;
      });

- Neophile

Answer 3

另一种简化的方法是使用$.post方法。虽然可以节省几行代码，但实现的效果是相同的。

$.post( url, data, callback);

$.post( $( "#myForm" ).attr('action'), $( "#myForm" ).serialize(), function(){
        window.opener.HandlePopupResult($("#field").val());
        window.close();
});

你可以将它放在你的.submit中作为 AJAX 请求的简写替代，或者将其放入自己的函数中，然后从表单中调用。

<form onsubmit="submitHandler(this); return false" name="myForm" id="myForm">

你还可以与 JSON 结合使用，在将数据发送回主页面之前添加一些功能/验证，这在许多情况下都很有帮助。此外，这是一个很棒的方式，可以将数据从 PHP（或其他你使用的语言）脚本返回到你的 JS/jQuery 中。

$.post( $( "#myForm" ).attr('action'), $( "#myForm" ).serialize(), function(data){
      if(data.status == 'failed')
      {
        // Lets present an error, or whatever we want
      }
      else
      {
       // Success! Continue as we were
        window.opener.HandlePopupResult($("#field").val());
        window.close();
      }
}, 'json');

- Fata1Err0r