Page 1 of 1

POST from dynamically generated buttons

Posted: Mon Mar 07, 2011 12:25 pm
by mattward1979
Hello!

I am working on a page that queries a DB for image details and displays them with their own dynamically generated Delete button, but I am struggling with handling the POST from the buttons..

The page "works" in so much as the content is generated correctly, but I cant find a way to differentiate between the buttons when POSTing...

Code: Select all

 
for ( $i = 0 ; $i < mysql_num_rows($result) ; $i++ ) 
		{
		  
		?>
		<div id = "middleBox">
		<form action="deleteImage.php" method="post" enctype="multipart/form-data"> 
		<br />
		<?php

        $row = mysql_fetch_assoc($result);
		echo '<img src="getImage.php?id=' . $row['id'] . '" alt="' . $row['alt'] . '" title="' . $row['name']  .'"/>  ' . "\n";
		$imageName = $row['name'];
		echo $imageName;
		
		?>
		<br />
		<input type="hidden" name="imageName" id="imageName" value = "Button"/><br /><br />
		<input type="submit" value="Delete image" />
		</div> 		
		<?php
the code just loops around the result set, and generates a DIV for each image and button.

What I would like is for the button press to pass the $imageName to the DeleteImage.php form, but because the logic is applied once the page is fully created, the $imageName is always the Last image to be created...

I tried assigning Value of each button to "Button<?php echo $i ?> etc, but it still does the same.. always the last one generated.

And help would be most appreciated!!

Re: POST from dynamically generated buttons

Posted: Mon Mar 07, 2011 1:24 pm
by califdon
You cut off the code you posted so we can't see the end of your for loop, but presumably it's right after what you showed. You can't have multiple Submit buttons for the same form, like that. Also you can't have multiple HTML elements with the same id property. There are several alternatives. The way I would probably do it is to not use a Submit button at all, rather use a plain button that calls a short Javascript function that receives the value to be passed, then calls the submit() method of the form and passes the value in the query string (this would require changing the form method to GET) or, alternately, populates a hidden form field. I would also recommend using the usual while loop syntax instead of the for loop. Something more like this:

Code: Select all

...
<script type='text/javascript'>
function mysubmit(myvalue);
   document.getElementById("myhidden").value = myvalue;
   document.myform.submit();
</script>
</head>
<body>
   ...
   ...
<div id = "middleBox">
   <form name='myform' action="deleteImage.php" method="post" enctype="multipart/form-data">
   <input type='hidden' id='myhidden' value='' />
<?php
while($row = mysql_fetch_assoc($result)) {
   echo "<div class = 'middleBox'>";
   echo '<img src="getImage.php?id=' . $row['id'] . '" alt="' . $row['alt'] . '" title="' . $row['name']  .'"/>  ' . "\n";
   $imageName = $row['name'];
   echo "<br />$imageName<br />";
   echo "<input type='button' value='Delete Image' onClick='mysubmit(\"$imageName\");' /></div>";
}
?>
   </form>
Disclaimer: I haven't tested this.

Re: POST from dynamically generated buttons

Posted: Tue Mar 08, 2011 10:42 am
by mattward1979
Thanks for the suggestion!

I managed to get it working though, as I had failed to close the Forms within the loop, so they were all essentially submitting the same information.

Code: Select all

for ( $i = 0 ; $i < mysql_num_rows($result) ; $i++ ) 
{
?>
<div id = "middleBox">
<form action="deleteImage.php" method="post" enctype="multipart/form-data"> 
<br />
<?php

$row = mysql_fetch_assoc($result);
echo '<img src="getImage.php?id=' . $row['id'] . '" alt="' . $row['alt'] . '" title="' . $row['name']  .'"/>  ' . "\n";

$imageName = $row['name'];
echo $imageName;		
?>
<br />
<input type="hidden" name="imageName" id="imageName" value = "<?php echo $row['name']?>"/><br /><br />
<input type="submit" value="Delete image" />
</form>
</div> 		
<?php
	
}	   

So now that the Form is within the loop, posting the different variables from the individual buttons is possible!