60

I got an image with which links to another page using <a href="..."> <img ...> </a>.

How can I make it make a post like if it was a button <input type="submit"...>?

Danny Beckett
  • 20,529
  • 24
  • 107
  • 134
fmsf
  • 36,317
  • 49
  • 147
  • 195

10 Answers10

118

More generic approatch using JQuery library closest() and submit() buttons. Here you do not have to specify whitch form you want to submit, submits the form it is in.

<a href="#" onclick="$(this).closest('form').submit()">Submit Link</a>
Paulius Zaliaduonis
  • 5,059
  • 3
  • 28
  • 23
  • good answer but might have concern on recommended practice... http://stackoverflow.com/questions/1070760/javascript-function-in-href-vs-onclick – ken May 31 '14 at 00:56
  • 4
    Just make sure you use closest() when you need to move up the DOM and find() when you need to traverse down the DOM – yardpenalty.com Apr 08 '16 at 02:45
  • 2
    I would add a `return false;` at the end of the `onclick` to avoid scrolling to the top of the page. – Sébastien Jun 30 '16 at 14:49
34
<input type="image" name="your_image_name" src="your_image_url.png" />

This will send the your_image_name.x and your_image_name.y values as it submits the form, which are the x and y coordinates of the position the user clicked the image.

Paige Ruten
  • 172,675
  • 36
  • 177
  • 197
28

It looks like you're trying to use an image to submit a form... in that case use <input type="image" src="...">

If you really want to use an anchor then you have to use javascript:

<a href="#" onclick="document.forms['myFormName'].submit(); return false;">...</a>

Greg
  • 316,276
  • 54
  • 369
  • 333
9

input type=image will do it for you.

Tim Howland
  • 7,919
  • 4
  • 28
  • 46
7
 <html>

 <?php

 echo $_POST['c']." | ".$_POST['d']." | ".$_POST['e'];

 ?>

 <form action="test.php" method="POST">
      <input type="hidden" name="c" value="toto98">
      <input type="hidden" name="d" value="toto97">
      <input type="hidden" name="e" value="toto aaaaaaaaaaaaaaaaaaaa">

      <a href="" onclick="document.forms[0].submit();return false;">Click</a> 
 </form>

</html>


So easy.




So easy.
Jiky1
  • 79
  • 1
  • 2
7

Untested / could be better:

<form action="page-you're-submitting-to.html" method="POST">
    <a href="#" onclick="document.forms[0].submit();return false;"><img src="whatever.jpg" /></a>
</form>
Shawn
  • 19,465
  • 20
  • 98
  • 152
2

What might be a handy addition to this is the possibility to change the post-url from the extra button so you can post to different urls with different buttons. This can be achieved by setting the form 'action' property. Here's the code for that when using jQuery:

$('#[href button name]').click(function(e) {
    e.preventDefault();
    $('#[form name]').attr('action', 'alternateurl.php');
    $('#[form name]').submit();
});

The action-attribute has some issues with older jQuery versions, but on the latest you'll be good to go.

Grit
  • 61
  • 5
  • 1
    $('#[form name]') should be $('form[name=formname]'); and the #[href] thing should be completely different – Rob Aug 03 '16 at 12:29
1

Something like this page ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>BSO Communication</title>

<style type="text/css">
.submit {
    border : 0;
    background : url(ok.gif) left top no-repeat;
    height : 24px;
    width : 24px;
    cursor : pointer;
    text-indent : -9999px;
}
html:first-child .submit {
    padding-left : 1000px;
}
</style>
<!--[if IE]>
<style type="text/css">
.submit {
    text-indent : 0;
    color : expression(this.value = '');
}
</style>
<![endif]-->
</head>

<body>
    <h1>Display input submit as image with CSS</h1>

    <p>Take a look at <a href="/2007/07/26/afficher-un-input-submit-comme-une-image/">the related article</a> (in french).</p>
    <form action="" method="get">
        <fieldset>
            <legend>Some form</legend>
            <p class="field">
                <label for="input">Some value</label>

                <input type="text" id="input" name="value" />
                <input type="submit" class="submit" />
            </p>
        </fieldset>
    </form>

    <hr />
    <p>This page is part of the <a href="http://www.bsohq.fr">BSO Communication blog</a>.</p>

</body>
</html>
VonC
  • 1,262,500
  • 529
  • 4,410
  • 5,250
1

Dont forget the "BUTTON" element wich can handle some more HTML inside...

Pablo Cabrera
  • 5,749
  • 4
  • 23
  • 28
0

We replace the submit button with this all the time on forms:

<form method="post" action="whatever.asp">
<input type=...n

<input type="image" name="Submit" src="/graphics/continue.gif" align="middle" border="0" alt="Continue">
</form>

Clicking the image submits the form. Hope that helps!

Kateriana
  • 1
  • 4
  • 1
    Is this answer any different from the accepted answer? we want to avoid giving "the same thing works for me too" style answers on SO. – Michael Edenfield Jan 18 '13 at 22:37