Page 1 of 1

more on images as form buttons

Posted: Mon Dec 15, 2003 9:02 am
by hibbeac1
Recently i found through the use of this a way of using buttons as images. i.e.

<input type="image" src="images/add.png">
<input type="hidden" name="add">
for HTML

and to process it (php):-
if (isset($_POST['add'])) {
}

this works if you have one button on the form. But if you have more than one it seems not to work. i.e if you add a delete button and have the hidden name as delete and process it using php. After trying that whatever button you press it runs both. Is there a way you can separate the two, so they will process when each individual button is pressed.

Also a second question-how can i make an image button act like a generic reset button and reset all the fields.

thanks.

Posted: Mon Dec 15, 2003 9:40 am
by microthick
Can you not add the Name attribute to image submit buttons?

Anyway, if you can't you can do it this way:

Code: Select all

<script language="JavaScript">
function setAction(myAction) &#123;
     document.myForm.formaction.value = myAction;
     document.myForm.submit();
&#125;
</script>

<form name="myForm" method="post" action="whatever.php">
<input type="hidden" name="formaction" value="update">
<input type="image" src="someimage.gif" onClick="setAction('update')">
<input type="image" src="anotherimage.gif" onClick="setAction('delete')">
</form>
Basically this defines two submit buttons, one for submit and one for delete. When either is clicked, the JS function is called to change the value of the formaction form field.

Then in your PHP on the following page you can go:

Code: Select all

<?php
if (isset($_POST&#1111;"formaction"]) && $_POST&#1111;"formaction"] != "") &#123;
     if ($_POST&#1111;"formaction"] == "update") &#123;
         // do something
     &#125; else if ($_POST&#1111;"formaction"] == "delete") &#123;
        // do something else
    &#125;
&#125;
?>

Posted: Mon Dec 15, 2003 9:41 am
by Bill H
For the button:

Code: Select all

&lt;input type=image src="images/ar_delete.gif" name="Delete"&gt;
&lt;input type=image src="images/ar_process.gif" name="Process"&gt;
And then to process it:

Code: Select all

<?php
if (isset($_POST['Delete_x'])) 
{
     // do whatever
}
elseif (isset($_POST['Process_x'])) 
{
     // do whatever else
}
?>
When the user clicks on an image, what is sent is the x and y coordinates of the point on the image at which he clicked. That is why the "Delete_x" in the isset() call.

Edit: this doesn't require Javascript, nor do you need hidden inputs.
:wink:

Posted: Tue Dec 16, 2003 2:27 am
by twigletmac
Just make sure you have a default condition - some browsers count pressing on enter as something different to clicking a button and will therefore not set a $_POST element for any of the buttons.

Mac

Posted: Wed Dec 17, 2003 9:17 am
by hibbeac1
Thanks