title: Launching a legitimate pop-up window on user click
body: <p>I know there are many threads about how to defeat pop-up blockers. In this case, I'm not really trying to do that. By default, browsers do not block -all- pop-ups. Legitimate ones such as when users click on it, are allowed. This is a good test: <a href="http://www.popuptest.com/goodpopups.html" rel="nofollow noreferrer">http://www.popuptest.com/goodpopups.html</a> (works in IE, Firefox, Chrome, Opera)</p>
  
  <p>How the above test site allows legitimate pop-up windows is by directly coupling the onclick event to the launch of a new window.</p>
  
  <p>In my case, I can't just launch the pop-up window. I need to check if the user's input, an alphanumeric passcode, is valid. How I've done is the input is checked via ajax and if it's valid, <code>window.open()</code> will be called to launch the window. Alas, all pop-up blockers block this.</p>
  
  <p>Is there another way I can do this? I don't want to launch a window if the input is invalid. If the input is invalid, the error message is shown on the immediate page, and not on the new pop-up window. It's silly to launch a window just to tell the user it's invalid.</p>
  
  <p>Any thoughts or suggestions how I can check the input, and also allow a legitimate pop-up window to be shown?</p>
  
  <p>Thanks.</p>
  
  <p><strong>Edited to include my (simplified) code</strong></p>
  
  <p>HTML form:</p>
  
  <pre><code>&lt;form id="form-passcode"&gt;
  &lt;input id="input-passcode" type="text" name="input-passcode" /&gt;&lt;a class="submit" onclick="javascript:passcode_check(); return false;" href="javascript:"&gt;Go&lt;/a&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Javascript (using jQuery):</p>
  
  <pre><code>function passcode_check() {
      var refPasscode = $('#input-passcode');
      var data = $('#form-passcode').serialize();
      $.ajax({
        url: check_passcode.php',
        data: data,
        dataType: 'json',
        type: 'post',
        success: function (j) {
          if (j.status == 1) {
            newwindow = window.open('http://google.com','Google','menubar=no,height=500,width=300,resizable=no,toolbar=no,location=no,status=no');
            if (window.focus) {newwindow.focus()}
          }
          else {
            // show error to end-user
          }
        }
      });
  }
  </code></pre>
  
  <p>}</p>
  
  <p>I've also experimented with a less ideal alternative, in which upon checking via ajax if the input is valid, I'll insert a link e.g. <code>&lt;a href="http://google.com" onclick="newwin(this.href);return false" onfocus="this.blur()"&gt;Launch&lt;/a&gt;</code> via <code>$('#form-passcode').html();</code> in which the user will subsequently click on to launch the pop-up. This works in all the browsers, though I would still love to make it more seamless for user..</p>
  
  <p>Thanks again, :)</p>