display image in a button and send hidden values in a form with PHP

Question

I'm sorry for mi bad english, but I need to display an image in a button, then send hidden values in form post.

Mi code:

echo "<form method='post' action='index.php'>";
echo '<input id="prueba" type="submit" value="Submit">';
echo "<input type='hidden' name='opt' value='3'>";
echo "<input type='hidden' name='sede' value='".$sede."'>";
echo '</form>';

In my CSS:

#prueba{
    background-image:url(back.png);
    font-size:0;
    width:50px;
    height:50px;
}

Please help me.

What is wrong with this code? this should change background image of prueba submit button — Ali MasudianPour
– Ali MasudianPour, Commented Nov 17, 2014 at 20:19
whats the Problem? sending the form? to Display the Image in a button? — mech
– mech, Commented Nov 17, 2014 at 20:21
Try putting quotes for the image url: background-image:url("back.png"); — Dim13i
– Dim13i, Commented Nov 17, 2014 at 20:22
Even if this is not relevant with your question, you might also want to consider using PHP Sessions or cookies for storing and using data through different pages. — Dim13i
– Dim13i, Commented Nov 17, 2014 at 20:25
My problem is: the image is not display in the button and appear these characters "â€‹â€‹â€‹â€‹". But the subtmit button is working fine. — Alexander
– Alexander, Commented Nov 17, 2014 at 20:51

mark879 · Accepted Answer · 2014-11-17 21:45:41Z

How about simply displaying an image and use javascript to click the submit button?

Example 1: using "document.form.submit()'

echo "<form id='myform1' method='post' action='index.php'>";
echo '<a href="javascript:void(0);" ';
echo   ' onclick="document.getElementById(\'myform1\').submit();">';
echo  '<img src="back.png" width="50" height="50" />';
echo '</a>';
echo "<input type='hidden' name='opt' value='3' />";
echo "<input type='hidden' name='sede' value='".$sede."' />";
echo '</form>';

or, Example 2: use a hidden submit button (need jQuery)

echo "<form method='post' action='index.php'>";
echo '<a href="javascript:void(0);" onclick="$(\'#prueba\').trigger(\'click\');">';
echo  '<img src="back.png" width="50" height="50" />';
echo '</a>';
echo '<input id="prueba" type="submit" value="Submit" style="display:none" />';
echo "<input type='hidden' name='opt' value='3' />";
echo "<input type='hidden' name='sede' value='".$sede."' />";
echo '</form>';

or, Example 3: use CSS to display the image

echo "<form id='myform1' method='post' action='index.php'>";
echo '<a id="prueba" href="javascript:void(0);" ';
echo   ' onclick="document.getElementById(\'myform1\').submit();" />';
echo "<input type='hidden' name='opt' value='3' />";
echo "<input type='hidden' name='sede' value='".$sede."' />";
echo '</form>';

Billy · Accepted Answer · 2014-11-17 21:24:35Z

0

instead of input type= submit use

  <input type="image" src="back.png" alt="Submit">

answered Nov 17, 2014 at 21:24

Billy

2,4381 gold badge13 silver badges13 bronze badges

2 Comments

jankal Over a year ago

But this won't automatically submit the form. Nothing will happen on click. But you can add some jQuery there ;)

Billy Over a year ago

errr ,yes it will, according to the w3 here and w3schools, I quote type=image Defines an image as the submit button here

Collectives™ on Stack Overflow

display image in a button and send hidden values in a form with PHP

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related