How to make a submit out of a <a href…>…</a> link?

StackOverflow https://stackoverflow.com/questions/275039

Question

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

Was it helpful?

Solution 

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

OTHER TIPS

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>

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>

input type=image will do it for you.

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>

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

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.

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>

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

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!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top