Search code examples
javascripthtmlformswindowmobile-safari

Can't open a second new tab using JS created forms on iPad


So I'm programatically creating a form in Javascript on click of a button. This part works fine.

When I'm detecting the user is using an iPad, I want to submit the form to a new window/tab in Safari. This also works, but just once. The second try it doesn't submit for some reason. The Safari debugger doesn't give me any errors, the <form> is created perfectly fine, but it just doesn't open the new window.

Some code I have:

    var form = document.createElement("form");

    var hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("name", "product_id");
    hiddenField.setAttribute("value", code);

    form.appendChild(hiddenField);

    // if user uses iPad (logic done in PHP)

    form.setAttribute('target', '_blank');

    form.setAttribute("action",'http://my-url.com');

    document.body.appendChild(form);

    setTimeout(function(){

        form.submit();
        document.body.removeChild(form);

    },250);

Again, it all works fine the first time, and the second time the form is properly created. It just doesn't submit. (or maybe it does, but the second time it doesn't open a new window

Also, I tried removing the setTimeout (which we need in the code), and the same issue still appears.

I also tried to add a different ID to every form

    form.id = 'form-' + new Date().getTime();

The ID is added fine, however, it doesn't solve the problem.

How can I let it work to do it twice?

edit:

Just did a quick test with changing the form.name. Both with a hardcoded or dynamic name, and both with the window closed, or still open, it doesn't submit the second time

edit2:

I'm using iOS7 on a Retina iPad using the iOS simulator


Solution

  • You are programmatically opening a second tab or windows for the same url. This counts as a pop up so gets blocked by the browser. Can you use a different url each time?