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