How to make a submit out of a <a href...>...</a> link?
JavascriptHtmlForm SubmitUrl LinkJavascript Problem Overview
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"...>?
Javascript Solutions
Solution 1 - Javascript
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>
Solution 2 - Javascript
<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.
Solution 3 - Javascript
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>
Solution 4 - Javascript
http://webdesign.about.com/od/htmltags/p/bltags_inputimg.htm">input type=image will do it for you.
Solution 5 - Javascript
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>
Solution 6 - Javascript
<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.
Solution 7 - Javascript
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.
Solution 8 - Javascript
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>
Solution 9 - Javascript
Dont forget the "BUTTON" element wich can handle some more HTML inside...
Solution 10 - Javascript
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!