How to make an image-button run a PHP script?

Question

What's the best practice to create an image button that sends a value and runs a php script (that executes a mySQL query) when clicked. The button has to be an image and not a default submit type of button. I've been googling this for a few days and I still can't find a sutable answer. I could use GET and make a few image buttons (images with links that contain values) on the page that redirect to itself which then I can collect with

if (isset($_GET['variable'])) 

but I don't really want the user to see the values. I tried creating a form which has only one button in it that when clicked will reload the page and I could capture and use the value with

if (isset($_POST['submit_value'])) {$var = $_POST['submit_value']; }

but I can't seem to make this work, at least not when the button is an image. So if anyone knows a decent way to do this, please share. It doesn't have to be AJAX e.g. page reload is perfectly fine. I'm guessing that I need JavaScript to do this but I don't really know JavaScript so a working example would be nice.

---

SELF-ANSWER

Thank you for all of your answers. I found that the simplest working way to go with is to create a form with an input type of image that makes the submit and an input type of hidden that carries that value.

<form action="some_page.php" method="POST">
    <input type="hidden" name="variable" value="50" />
    <input type="image" src="image.png" name="submit" />
</form>

And on the PHP side I use this to catch the value.

if (isset($_POST['variable'])) { $var = $_POST['variable']; }

This is the most suitable solution for my problem. Thank you all again for your speedy responses.

Solution 1

Image buttons are pretty much a mess! :(

I would suggest using CSS to put background-image to ordinary <input type="submit">. This way value will always be visible (eg. sent in request) when user submits the form.

For example:

.myImageSubmitButton{
    width: 100px;
    height: 22px;
    background: url(images/submit.png) no-repeat;
    border: none;
    /** other CSS **/
}

the bad thing here is that you must set width and height according to image used...

Solution 2

if it must be a <button> you can redirect the form to another script like this:

<form action="somescript.php" method="POST" name="myform">
    <input type="submit" name="submit" value="normal submit">
    <button name="foo" type="button" value="bar" 
        onclick="document.myform.action = 'someotherscript.php'; 
                 document.myform.submit()">
        <img src="someimage.png">
    </button>
</form>

or change a hidden field and post the form to the same page like this:

<form action="somescript.php" method="POST" name="myform">
    <input type="submit" name="submit" value="normal submit">
    <input type="hidden" name="action" id="hidden_action" value="normal_action">
    <button name="foo" type="button" value="bar" 
        onclick="document.getElementById('hidden_action').value = 'special_action'; 
                 document.myform.submit()">
        <img src="someimage.png">
    </button>
</form>

Solution 3

Just a note: if the user wants to, they CAN retrieve the values, for example with Firebug. This cannot be changed.

Also, HTML buttons can be images. See this.

Or use XMLhttprequest on an image wih onclick. There are many tutorials for XMLHTTPRequest. For example this.