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

时间:2015-05-21 08:58:23

标签: javascript jquery form-submit window.open window.opener

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

  1. 在我的弹出窗口中,有一个提交按钮,用于处理表单的提交功能,我想等待提交完成并在提交时关闭此弹出窗口。
  2. 提交表单并关闭弹出窗口时,我将获取其中一个文本框值,并在弹出窗口关闭后立即使用父窗口中的值自动模拟搜索。 / LI>

    代码:

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

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

    我能够最终将信息正确地发送回我的父表单,但我只需要确保我的提交已完成。有关确保仅在提交成功后才启动我的活动的任何建议吗?

    干杯。

3 个答案:

答案 0 :(得分:0)

您打开的新窗口(弹出窗口)将在提交时加载一个新的HTML页面(在表单发送到服务器之前,执行jQuery submit调用的功能)

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

答案 1 :(得分:0)

这将有助于将来的其他人。我能够通过将上面的代码修改为下面给出的代码来实现这一点:

// 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帖子调用,以确保表单提交已经发生,然后执行我处理弹出窗口结果的剩余任务,然后关闭弹出窗口。像魅力一样工作!

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

答案 2 :(得分:0)

另一种简化方法是使用$.post方法。保存几行,但实现相同的目标。

$ .post(网址,数据,回调);

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

您可以将其作为AJAX请求的简写替换放在.submit内,或者将其放入您从表单调用的函数中。

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