CODEWITHSUNDEEP
javascripthtmlform-submiturl-link
fmsf
fmsf

Reputation: 37137

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

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

Upvotes: 60

Views: 273648

Answers (10)

Grit
Grit

Reputation: 61

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.

Upvotes: 2

Kateriana
Kateriana

Reputation: 1

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!

Upvotes: 0

Paulius Zaliaduonis
Paulius Zaliaduonis

Reputation: 5189

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>

Upvotes: 118

Jiky1
Jiky1

Reputation: 79

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

Upvotes: 7

Pablo Cabrera
Pablo Cabrera

Reputation: 5849

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

Upvotes: 1

VonC
VonC

Reputation: 1323733

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>

Upvotes: 1

Paige Ruten
Paige Ruten

Reputation: 176645

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

Upvotes: 34

Greg
Greg

Reputation: 321588

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>

Upvotes: 28

Shawn
Shawn

Reputation: 19793

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>

Upvotes: 7

Tim Howland
Tim Howland

Reputation: 7970

input type=image will do it for you.

Upvotes: 9

Related Questions