Problems with <form> in Safari - only first click will POST to _blank target

Question

I am using PHP to generate 10 forms on a page which attach an image as the button and POST hidden values to a _blank target. This works ok in Firefox, all 10 buttons submit and post to a new window. In Safari however only the first button i click will work (whichever one I choose) after that none of the buttons (forms) submit and POST to a new window (!!! whats going on??)

Heres the code -

$id=getId();
echo "<form name=\"clickthrough$id\" action=\"click_through.php\" method=\"POST\" target=\"_blank\"><input type=\"image\" src=\"images/buttons/buynow_a.gif\" name=\"buynow\"/><input type=\"hidden\" name=\"id\" value=\"".$id."\"/></form>";

Nothing strange here - the id is actually the id of a song in my database which i have simplified for showing here - but I included it on the end of the form name just incase this was causing the problem.

So to recap I end up with 10 buy now buttons on a page - all of which should post through to a PHP script. The scripts work fine. However in safari once i have pressed any buy now button all of the others stop working (until I refresh the page)

why is this?

-- here is the final html that is generated for the buttons

<form name="clickthrough1728" action="click_through.php" method="POST" target="_blank"><input type="image" src="images/buttons/buynow_a.gif" name="buynow"/><input type="hidden" name="id" value="1728"/><input type="hidden" name="location" value="UK"/></form>

<form name="clickthrough1724" action="click_through.php" method="POST" target="_blank"><input type="image" src="images/buttons/buynow_a.gif" name="buynow"/><input type="hidden" name="id" value="1724"/><input type="hidden" name="location" value="UK"/></form>

<form name="clickthrough1718" action="click_through.php" method="POST" target="_blank"><input type="image" src="images/buttons/buynow_a.gif" name="buynow"/><input type="hidden" name="id" value="1718"/><input type="hidden" name="location" value="UK"/></form>

....

I have just tried copying this to a new html file and testing and the same thing happens - the first click will open a new window but no buttons after that will post the form

Answer 1

Initial guess: the _blank isn't being treated as a special value, but instead is being treated as the same window, so that the first post goes to a new window, and subsequent ones (try to) go to the first window.

I would try giving each button a target of _blank_$i or something, so that each button has a unique target.

Answer 2

A Quick check with the following code works just fine (Safari 5 on Mac)

for($id = 1; $id < 11; $id++) {
   echo "<form name=\"clickthrough$id\" action=\"sandbox/_TestServer.php\" method=\"POST\" target=\"_blank\">
   <input type=\"image\" src=\"images/buttons/buynow_a.gif\" name=\"buynow\"/>
   <input type=\"hidden\" name=\"id\" value=\"".$id."\"/>
   </form>";
}

so it could be your $id. Generate the html and show it like Pekka suggested

Edit I can't tell you what goes wrong in safari-windows-land but i've changed the code as follows an tested it on a VM (Win XP, Safari5) and it works:

for($id = 1; $id < 11; $id++) {
   echo "<form name=\"clickthrough$id\" action=\"_TestServer.php?$id\" method=\"post\" target=\"_blank\">
   <input type=\"image\" src=\"add.png\" name=\"buynow\"/>
   <input type=\"hidden\" name=\"id\" value=\"".$id."\"/>
   </form>";
}

every form got its "unique" action target ?$id and this seams to do the trick

Edit Link and Files removed

Answer 3

OK I worked out that this is only a problem on Safari on a PC, I have tested this on a Mac and it works ok too. Still if anyone has any idea how to fix this please help.

Answer 4

I wonder if this is due to the doctype you're using for the page. The target attribute is deprecated and is only available in XHTML Transitional, XHTML Frameset or HTML 4. Are you using XHTML Strict? Maybe that would cause this strangeness, although it seems like a shot in the dark...

Answer 5

There could be a way to do this in Javascript. Try adding this code in your form element:

<form onsubmit="window.open('about:blank', 'somename', 'width=300,height=300)" target="somename"<!-- Rest of form code here -->> 

You would obviously need a uniquely named window for each form and to reference that window in the target. This should degrade pretty well too. In the event of Javascript not being available it should behave as your code does currently, with the problems on Safari on a PC. Depending on how many users you have using that browser this may or may not be acceptable to you.