关闭表单提交时打开的弹出窗口 window 并触发点击父窗口 window

Question

我有一个父级 window 从那里我使用 window.open() 打开弹出窗口 window 并且我正在监视该弹出窗口的 return使用 window.opener 方法向上 window。我在这里有两个问题：

在我的弹出窗口 window 上，有一个提交按钮负责表单的提交功能，我想等待提交完成并关闭此弹出窗口 window 提交。
当提交表单并关闭弹出窗口 window 时，我正在获取其中一个文本框值并在我的父 window 中使用它来尽快自动模拟搜索因为弹出 window 已关闭。

代码：

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

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

我终于能够将信息正确地发送回我的父表单，但我只需要确保我的提交完成。关于确保仅在提交成功后触发我的事件有什么建议吗？

干杯。

Answer 1

您打开的新 window（弹出窗口）将在提交时加载一个新的 HTML 页面（执行 jQuery submit 调用的功能 before 表单发送到服务器）。

您应在弹出窗口中加载的新页面中执行操作 window。

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 调用以确保表单提交已经发生，然后执行我的剩余任务处理弹出窗口的结果 window 然后我关闭弹出窗口 window。很有魅力！

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

Answer 3

另一种简化方法是使用 $.post 方法。节省了几行，但达到了同样的效果。

$.post(url,数据,回调);

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

您可以将其放入 .submit 作为 shorthand 替换 AJAX 请求，或者将其放入您从表单调用的自己的函数中。

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

您还可以将它与 JSON 结合使用，以便在将内容发送回您的主页之前进一步添加一些内容 functionality/validation，这在许多情况下可能会有帮助。同样，它是一种将数据从 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');

关闭表单提交时打开的弹出窗口 window 并触发点击父窗口 window

Close opened pop-up window on form submission and trigger click on the parent window

javascript

jquery

form-submit

window.open

window.opener