javascript - Open page in new window without popup blocking

Question

Hope you can help a bit here... I have a form that translate a word in a field, populate the field with the translated term and then do submit action all in one submit button.

the submit is being made by jquery. problem is the target page is being blocked as all 3 major browsers treat it as popup, Do you know how to let it open just as a new tab or new window ? I don't want to set the target as _self as I want people to have my site open as well.

I believe the problem is in this string:

document.forms.form1.submit();

but I also know there should be a way to rephrase it so the target won't be treated as a popup.

this is the script:

<script type="text/javascript">

$(function transle() {
  $('#transbox').sundayMorningReset();
  $('#transbox input[type=button]').click(function(evt) {
    $.sundayMorning(
      $('#transbox input[type=text]').val(), {
        source: '',
        destination: 'ZH',
        menuLeft: evt.pageX,
        menuTop: evt.pageY
      },
      function(response) {
        $('#transbox input[type=text]').val(response.translation);

        //document.getElementById("form1").submit();
        document.forms.form1.submit();

      }
    );
  });
});

</script>

and this is the form:

<table id="transbox" name="transbox" width="30px" border="0" cellspacing="0" cellpadding="0">
  <form action="custom-page" method="get" name="form1" target="_blank" id="form1">

    <tr>
      <td>
        <input id="q" name="q" type="text" class="search_input" onFocus="if (this.value == 'Evening dress') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Evening dress';}" value="Evening dress" />
      </td>
      <td>
        <input type="button" value="Find" style="color: #333; width: 157px; font-weight:bold"></input>
      </td>
    </tr>

  </form>
</table>

EDIT

I have tried all of these strings to submit:

document.getElementById("form1").submit();
document.forms.form1.submit();
form1.submit();

all ends up with the target being popup blocked. please, is there any other way I should do the code to not let it popup ?

maybe should use the onsubmit to make jQuery ? someone knows how ?

Answer 1

A browser will only open a tab/popup without the popup blocker warning if the command to open the tab/popup comes from a trusted event. That means the user has to actively click somewhere to open a popup.

In your case, the user performs a click so you have the trusted event. You do lose that trusted context, however, by performing the Ajax request. Your success handler does not have that event anymore. The only way to circumvent this is to perform a synchronous Ajax request which will block your browser while it runs, but will preserve the event context.

In jQuery this should do the trick:

$.ajax({
 url: 'http://yourserver/',
 data: 'your image',
 success: function(){window.open(someUrl);},
 async: false
});

Here is your answer: Open new tab without popup blocker after ajax call on user click