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

Posted 2023-03-05

【中文标题】关闭表单提交时打开的弹出窗口并触发单击父窗口

【英文标题】：Close opened pop-up window on form submission and trigger click on the parent window

【发布时间】：2015-08-02 20:12:34

【问题描述】：

我有一个父窗口，我正在使用 window.open() 打开一个弹出窗口，我正在使用 window.opener 方法监视该弹出窗口的返回。我在这里有两个疑问：

在我的弹出窗口中有一个提交按钮，负责处理表单的提交功能，我想等待提交完成并在提交时关闭此弹出窗口。 提交表单并关闭弹出窗口后，我将获取其中一个文本框值，并在弹出窗口关闭后立即在父窗口中使用该值来模拟搜索。

代码：

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

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

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

干杯。

【问题讨论】：

***.com/questions/11534690/… 的任何选项对您有效吗？

并非如此。我想我快要得到答案了。我会发布它。

抱歉，我没有尽快回复您的问题。我住的地方是一个假期周末，所以直到今天我才来。我在下面为您发布了一些附加信息，希望对您有所帮助。

【参考方案1】：

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

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

【讨论】：

有没有办法告诉我提交事件已完成，我可以在该表单中执行我的其他任务？

我做了一个小研究，你描述的情况最完整的解释都在这个问题中：***.com/questions/11534690/…。但请注意，对于每种解决方法，有很多 cmets “对我不起作用”，因此那里显示的替代方案（除了我的答案中的那个）看起来不可靠。

【参考方案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;
      );

【参考方案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');