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

Question

I have a parent window from where I am opening a pop-up window using window.open() and I am monitoring the return of that pop-up window using the window.opener method. I have two queries here:

1. On my pop-up window, there is a submit button that takes care of the submit functionality of the form and I would like to wait for the submit to complete and close this pop-up window on submission.
2. When the form is submitted and the pop-up window is closed, I am fetching one of the text box values and using that in my parent window to simulate a search automatically as soon as the pop-up window is closed.

Code:

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

So my question is: How can I make sure that the submit is completed in order for me to trigger a search click in my parent window and close this pop-up window? Kindly let me know.

I am able to finally send information back to my parent form properly but I just need to make sure that my submit gets completed. Any suggestions on making sure that I fire my events only after the submit is successful?

Cheers.

Answer 1

The new window (popup) you have opened will load a new HTML page on submit (the function of the jQuery submit call is executed before the form is sent to the sever).

You shall do the actions within the new page being loaded in the popup window.

Answer 2

This would be helpful for others in the future. I was able to achieve this myself by just modifying the above code to the code given below:

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

Changed the form submission to an AJAX post call to ensure that the form submission has occurred and then carry out my remaining tasks of Handling the result of the pop-up window after which I close the popup window. Works like a charm!

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

Another way to simplify that some would be using the $.post method instead. Saves a few lines, but achieves the same thing.

$.post( url, data, callback);

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

You can either throw that inside of your .submit as a shorthand replacement for the AJAX request, or throw it into its own function that you call from your form.

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

You can also combine it with JSON to add some further functionality/validation before you have it sending things back to your main page, which could be helpful in many situations. As well, it's an awesome way of returning data from your PHP (or whatever you use) scripts back to your 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');