CODEWITHSUNDEEP
javascripthtmlformspopup
Lightness Races in Orbit
Lightness Races in Orbit

Reputation: 385295

Submitting form from popup to new tab, then closing the popup, prevents form submission

I haven't quite been able to pin this one down, as others are reporting success in Chrome, but I have reproduced the problem in Chrome 44 and not in Firefox 33.1. Turning on Incognito Mode (i.e. no extensions), and making an exemption in the Popup Blocker settings had no effect.

I have a popup window with a form, and the target of the form is _blank. The intention is that the form submission will go to a new tab in the parent window. The popup then closes itself.

However, the new tab is not opening unless I remove the code to make the popup close itself.

I imagine I'm triggering popup prevention somewhere (particularly because I can't reproduce via a local file:/// URL; only with remote content), but I haven't been able to work out why closing the popup window after submission would ruin the submission itself. I can't see anything relevant in the developer console.

I also tried, instead of the onsubmit, adding to the submit button onclick="setTimeout('window.close()',1);return true;", with the same effect; in fact, this is the terrible code actually found in the application I'm trying to debug.

What's going on?

Here's a terrible self-contained testcase that reproduces the problem.

var trigger = null;
var popup   = null;

window.onload = function() {
  trigger = document.getElementById('trigger');
  trigger.onclick = function() {
    popup = window.open('', 'thePopup', 'width=450,height=450');
    if (popup == null) {
      console.error("Failed to open popup window :(");
    }
    else {
      populatePopup();
    }
  };
};

function populatePopup() {
  popup.document.write('<html><body>');
  popup.document.write('<form method="GET" action="http://google.com/?q=test" target="_blank" onsubmit="window.close()">');
  popup.document.write('<input type="submit" value="Click here now" />');
  popup.document.write('</form>');
  popup.document.write('</body></html>');
}
<a href="#" id="trigger">Click here</a>

(Sadly, due to the popup factor, this snippet won't run at all, at least not in my browser. However, the frame content may be copy/pasted verbatim into a file to be tested.)

Upvotes: 2

Views: 2253

Answers (1)

Shilly
Shilly

Reputation: 8589

You can try this form target kludge if you can't use ajax calls: Basically, you set the target of the form to an iframe you include in the popup. This will make the result of your form submit, namely the google page you're grabbing, to be shown in the iframe. You can then add an event listener to the load event of this iframe on the onsubmit event of the form.

<form method="GET" action="http://google.com/?q=test" target="after" onsubmit="close()">
<input type="submit" value="Click here now" />
</form>
<iframe id="after" name="after"></iframe>
<script>
function close() {
    document.querySelector('#after').addEventListener('load', function() {
        window.close();
    });
}
</script>

Upvotes: 2

Related Questions