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.

AJAX is much, much cleaner than making individual forms for each button. Also, why don't you want the user to see the contents of the request? — Blender
– Blender, Commented Feb 9, 2012 at 17:00
@Blender there's no need to create individual forms for each button. — Kaii
– Kaii, Commented Feb 9, 2012 at 17:12

Jovan Perovic · Accepted Answer · 2012-02-09 17:03:10Z

3

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...

answered Feb 9, 2012 at 17:03

Jovan Perovic

20.2k5 gold badges47 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kaii · Accepted Answer · 2012-02-09 17:15:26Z

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>

axiomer · Accepted Answer · 2012-02-09 17:04:13Z

1

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.

answered Feb 9, 2012 at 17:04

axiomer

2,1361 gold badge17 silver badges27 bronze badges

Comments

Stelian Matei · Accepted Answer · 2012-02-09 17:02:56Z

0

You can make a POST form and use the image as a submit button without javascript:

<input type="image" src="myimage.gif" name="submit">

answered Feb 9, 2012 at 17:02

Stelian Matei

11.6k3 gold badges28 silver badges29 bronze badges

Comments

martti d · Accepted Answer · 2012-02-09 17:04:19Z

0

invoke a submit using onclick event on the image

<img src="image.jpg" onclick="document.formname.submit();" />

answered Feb 9, 2012 at 17:04

martti d

2,6722 gold badges20 silver badges20 bronze badges

Comments

thecodedeveloper.com · Accepted Answer · 2012-02-09 17:05:24Z

0

make submit button with image like that

  <input type="submit" style="background-image:url(image); border:none;   
 width:10px;height:10px; color:transparent;" value=" " name="submit_value"/>

answered Feb 9, 2012 at 17:05

thecodedeveloper.com

3,2505 gold badges40 silver badges69 bronze badges

Comments

Sean · Accepted Answer · 2012-02-09 17:06:13Z

0

I think the only two ways of doing this are with gets (like you've stated) or with a form where the image button is an input with type submit.

I'm pretty sure you can change the styling of a submit button so that it has a background image, if not then ignore my ignorance.

answered Feb 9, 2012 at 17:06

Sean

6,5099 gold badges49 silver badges70 bronze badges

Collectives™ on Stack Overflow

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

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related