Can I Use Images Instead of Buttons?

zbert

Let's say I have a form with 4 buttons on it: Add, Subtract, Multiply, and Divide. When a user clicks a button, it initiates the form action and takes me to my PHP script where I use a switch statement to branch into the appropriate code. I can get this to work fine.

But let's say I don't want to use the standard HTML buttons and want to use images instead. How do I pass a value based on the image that is clicked?

How can I get what image button was clicked?

<?php
switch($button)
{
    case "add":
    	$answer = $var1 + $var2;
    	echo ("Your answer is $answer.");
    	break;
    case "subtract":
    	$answer = $var1 - $var2;
    	echo ("Your answer is $answer.");
    	break;
    case "multiply":
    	$answer = $var1 * $var2;
    	echo ("Your answer is $answer.");
    	break;
    case "divide":
    	$answer = $var1 / $var2;
    	echo ("Your answer is $answer.");
    	break;
    default:
    	echo ("You've failed but var1 is $var1 and var2 is $var2");
}
?>

Can somebody point me to some sample code or tutorials?

Thanks,

--zbert

Bunkermaster

<script language="jscript">
<!--
function blahSubmit( actionParam ){
	window.blah.action = "calculate.php?Type=" + actionParam;
	window.blah.submit();
}

-->
</script>
<form action="" method="post" id="blah">

<IMG alt="+" src="plus.gif" onclick="blahSubmit( 'Add' )" >
<IMG alt="-" src="minus.gif" onclick="blahSubmit( 'Substract' )" >

</form>

this will send your form to the action page with the calculation type as a query string and will allow you to use IMGs as buttons...

zbert

I have been trying the code you suggested but it doesn't pass the actionParam to the action page. My two original variables get passed ok but not the actionParam.

My code as follows:

<html>

<head>
<title>Testing Basic PHP Capabilities</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="jscript">

</script>
</head>

<body bgcolor="#FFCC66" text="#000000">
<h1>Simple Math Operations</h1>
<p>Enter 2 numbers into the fields below. Then choose an operator.</p>

<form action="" method="get" id="blah">
<table width="48%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td width="26%">First number</td>
<td width="32%">
<input type="text" name="var1">
</td>
<td width="42%">
<img alt="add" src="icons/add.gif" onclick="blahSubmit('add')">
</td>
</tr>
<tr>
<td width="26%">Second number</td>
<td width="32%">
<input type="text" name="var2">
</td>
<td width="42%">
<img alt="subtract" src="icons/subtract.gif" onclick="blahSubmit('subtract')">
</td>
</tr>
<tr>
<td width="26%"> </td>
<td width="32%"> </td>
<td width="42%">
<img alt="multiply" src="icons/multiply.gif" onclick="blahSubmit('multiply')">
</td>
</tr>
<tr>
<td width="26%"> </td>
<td width="32%"> </td>
<td width="42%">
<img alt="divide" src="icons/divide.gif" onclick="blahSubmit('divide')">
</td>
</tr>
</table>
</form>
<p> </p>
</body>
</html>

Any ideas why?

--zbert

Bunkermaster

Change this :
<form action="" method="post" id="blah">
and it works 🙂

zbert

You're the best! It works like a charm. I added the get in there because I wanted to see the query string. All works fine now.

--zbert

chinni_77

If you just want to use an image instead of a normal html button, use this:

Bunkermaster

¬_¬

hu what?

zbert

Originally posted by chinni_77
If you just want to use an image instead of a normal html button, use this:

<Input type="image" src="../images/sign_save.gif" name="save_button" value="Save"></br>

As far as I can tell, the Input type of Image does not have a Value attribute. It definitely doesn't work in my posted code above.

--zbert

TTT

you have to remember that Netscape doesn't recognize submit button if it's image (if you use more than one submit on same page and compare which has been clicked).

so button has to be recognized from x or y cordinat, i have never done this with php but i think that it works like it works in cfm.

if(isset(x.pictureName))
or
if(isset(y.pictureName))

zbert

Good catch TTT. I was humming along until I checked out the code in Mozilla. Browser compatibility sucks! Will we ever see the day when all browsers recognize the same code??? :mad:

--zbert

MrAlaska

From the HTML specs
http://www.w3.org/TR/html401/interact/forms.html#submit-button

image
Creates a graphical submit button. The value of the src attribute specifies the URI of the image that will decorate the button. For accessibility reasons, authors should provide alternate text for the image via the alt attribute.
When a pointing device is used to click on the image, the form is submitted and the click coordinates passed to the server. The x value is measured in pixels from the left of the image, and the y value in pixels from the top of the image. The submitted data includes name.x=x-value and name.y=y-value where "name" is the value of the name attribute, and x-value and y-value are the x and y coordinate values, respectively.

If the server takes different actions depending on the location clicked, users of non-graphical browsers will be disadvantaged. For this reason, authors should consider alternate approaches:

Use multiple submit buttons (each with its own image) in place of a single graphical submit button. Authors may use style sheets to control the positioning of these buttons.
Use a client-side image map together with scripting.

This page is a little nicer to read and discusses browser compatibility:
http://blooberry.com/indexdot/html/tagpages/i/inputimage.htm