Reputation: 1651
Instead of a submit button I have a link:
<form>
<a href="#"> submit </a>
</form>
Can I make it submit the form when it is clicked?
Upvotes: 162
Views: 838784
Reputation: 2102
My suggestion is:
<form action="/logout" method="POST">
<button type="submit" style="display:none;">Log Out</button>
<a href="/logout" onclick="event.preventDefault();this.closest('form').submit();">Log Out</a>
</form>
Upvotes: 7
Reputation: 1164
HTML & CSS - No Javascript Solution
Make your button appear like a Bootstrap link
HTML:
<form>
<button class="btn-link">Submit</button>
</form>
CSS:
.btn-link {
background: none;
border: none;
padding: 0px;
color: #3097D1;
font: inherit;
}
.btn-link:hover {
color: #216a94;
text-decoration: underline;
}
Upvotes: 6
Reputation: 29444
The best way is to insert an appropriate input tag:
<input type="submit" value="submit" />
<form id="form-id">
<button id="your-id">submit</button>
</form>
var form = document.getElementById("form-id");
document.getElementById("your-id").addEventListener("click", function () {
form.submit();
});
Enclose the latter JavaScript code by an DOMContentLoaded
event (choose only load
for backward compatiblity) if you haven't already done so:
window.addEventListener("DOMContentLoaded", function () {
var form = document.... // copy the last code block!
});
Add an onclick
attribute to the link and an id
to the form:
<form id="form-id">
<a href="#" onclick="document.getElementById('form-id').submit();"> submit </a>
</form>
Whatever way you choose, you have call formObject.submit()
eventually (where formObject
is the DOM object of the <form>
tag).
You also have to bind such an event handler, which calls formObject.submit()
, so it gets called when the user clicked a specific link or button. There are two ways:
Recommended: Bind an event listener to the DOM object.
// 1. Acquire a reference to our <form>.
// This can also be done by setting <form name="blub">:
// var form = document.forms.blub;
var form = document.getElementById("form-id");
// 2. Get a reference to our preferred element (link/button, see below) and
// add an event listener for the "click" event.
document.getElementById("your-id").addEventListener("click", function () {
form.submit();
});
Not recommended: Insert inline JavaScript. There are several reasons why this technique is not recommendable. One major argument is that you mix markup (HTML) with scripts (JS). The code becomes unorganized and rather unmaintainable.
<a href="#" onclick="document.getElementById('form-id').submit();">submit</a>
<button onclick="document.getElementById('form-id').submit();">submit</button>
Now, we come to the point at which you have to decide for the UI element which triggers the submit() call.
A button
<button>submit</button>
A link
<a href="#">submit</a>
Apply the aforementioned techniques in order to add an event listener.
Upvotes: 266
Reputation: 353
here's the best solution to your question: inside the form you have these code:
<li><a href="#">Singup</a></li>
<button type="submit" id="haha"></button>
in the CSS file, do this:
button{
display: none;
}
in JS you do this:
$("a").click(function(){
$("button").trigger("click");
})
There you go.
Upvotes: 0
Reputation: 41
<form id="mailajob" method="post" action="emailthijob.php">
<input type="hidden" name="action" value="emailjob" />
<input type="hidden" name="jid" value="<?php echo $jobid; ?>" />
</form>
<a class="emailjob" onclick="document.getElementById('mailajob').submit();">Email this job</a>
Upvotes: 3
Reputation: 1552
document.getElementById("theForm").submit();
It works perfect in my case.
you can use it in function also like,
function submitForm()
{
document.getElementById("theForm").submit();
}
Set "theForm" as your form ID. It's done.
Upvotes: 2
Reputation: 61
this works well without any special function needed. Much easier to write with php as well. <input onclick="this.form.submit()"/>
Upvotes: 6
Reputation: 4940
If you use jQuery and would need an inline solution, this would work very well;
<a href="#" onclick="$(this).closest('form').submit();">submit form</a>
Also, you might want to replace
<a href="#">text</a>
with
<a href="javascript:void(0);">text</a>
so the user does not scroll to the top of your page when clicking the link.
Upvotes: 78
Reputation: 1039528
You could give the form and the link some ids and then subscribe for the onclick
event of the link and submit
the form:
<form id="myform" action="" method="POST">
<a href="#" id="mylink"> submit </a>
</form>
and then:
window.onload = function() {
document.getElementById('mylink').onclick = function() {
document.getElementById('myform').submit();
return false;
};
};
I would recommend you using a submit button for submitting forms as it respects the markup semantics and it will work even for users with javascript disabled.
Upvotes: 26