Hello,
I need to display 2 images and 2 corresponding radio buttons so that a user can select one choice and then submit. After submit, it should be posted to the server where some image metadata (size, etc.) will be stored in a db and the previous 2 images will be replaced with 2 new images (either from db or server-end processing to generate a new image) in the same html page.
My design is as follows:
Initially in the html page (first.php) I use the following to display 2 images side-by-side:
echo '<iframe name="result1" src="p1.jpg" frameborder="0" width="590" height="445"></iframe>';
echo '<iframe name="result2" src="p2.jpg" frameborder="0" width="590" height="445"></iframe>';
Then I use a html form to post the data as follows:
<form name="form1" method="post" action="zero.php">
<input type ="radio" name="image" value="left"> Left Image
<input type="radio" name="image" value="right"> Right Image
<input type="button" value="Submit Your Option" name="SubmitOption">
</form>
At the server end I have zero.php as follows:
if(isset($_POST['SubmitOption'])) {
$im1 = @imagecreatefromjpeg("pic1.jpg");
$im2 = @imagecreatefromjpeg("pic2.jpg");
header('Content-Type: image/jpeg');
imagejpeg($im1, NULL, 75);
imagejpeg($im2, NULL, 75);
echo '<iframe name="result1" src=" $im1 " ></iframe>';
echo '<iframe name="result2" src=" $im2 " ></iframe>';
imagedestroy($im1);
imagedestroy($im2);
unlink("pic1.jpg");
unlink("pic2.jpg");
I have avoided some of the unnecessary details such as pic1 and pic2 are generated by executing some image processing binaries using shell_exec();
The above code is obviously not working since it is not able to associate '$im1' with 'result1' and '$im2' with 'result2'.
The problem is: how will I get a handle of the iframe containers 'result1' and 'result2' in the zero.php file so that i can return the corresponding images to the original html page first.php.
I want the user to select one radio button and then press submit, and the zero.php should be invoked and performs all the background db job then create 2 new images and replace them with the iframe containers 'result1' and 'result2' declared in first.php while remaining in the initial page and not navigating to some other page.
With one image it works fine by attaching for target attribute as follows:
<form name="form1" method="post" action="zero.php" target="result1">
and then we don't need the
echo '<iframe name="result1" src=" $im1 " ></iframe>';
echo '<iframe name="result2" src=" $im2 " ></iframe>'; in zero.php
But then multiple target attributes ('result1' and 'result2') cannot be associated with a form and it is not working.
I have also tried with some naive options such as using 3 separate html forms and associating target="result1" and target="result2" with 2 of them and a third form with submit button to invoke a JS function which submits the other 2 forms. I also used separate server-end PHP scripts (one.php to return the first image in iframe 'result1' and two.php to return the second image in iframe 'result2').
<form name="form1" method="post" action="one.php" target="result1>
<form name="form2" method="post" action="two.php" target="result2">
But this process also doesn't work.
I know that I may have a bad design since it is probably a good idea to use AJAX calls but I need a simple functional interface without any sophistication (2 images side-by-side, 2 radio buttons and a submit button) since my primary objective is to gather the user-provided radio button option data and send to the server for storing in the db.
Is there any way to fix the above situation or the least possible modification to make it working with simplicity!
Your help is highly appreciated!
Thanks!
