### The best way
The best way is to insert an appropriate input tag:
<!-- language: lang-html -->
<input type="submit" value="submit" />
### The best JS way
<!-- language: lang-html -->
<form id="form-id">
<button id="your-id">submit</button>
</form>
<!-- language: lang-js -->
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][1]) if you haven't already done so:
window.addEventListener("DOMContentLoaded", function () {
var form = document.... // copy the last code block!
});
### The easy, not recommandable way (the former answer)
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>
### All ways
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.
1. A button
<button>submit</button>
2. A link
<a href="#">submit</a>
Apply the aforementioned techniques in order to add an event listener.
[1]: https://stackoverflow.com/questions/2414750/difference-between-domcontentloaded-and-load-events
### The best way
The best way is to insert an appropriate input tag:
<!-- language: lang-html -->
<input type="submit" value="submit" />
### The best JS way
<!-- language: lang-html -->
<form id="form-id">
<button id="your-id">submit</button>
</form>
<!-- language: lang-js -->
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][1]) if you haven't already done so:
window.addEventListener("DOMContentLoaded", function () {
var form = document.... // copy the last code block!
});
### The easy, not recommandable way (the former answer)
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>
### All ways
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.
1. A button
<button>submit</button>
2. A link
<a href="#">submit</a>
Apply the aforementioned techniques in order to add an event listener.
[1]: https://stackoverflow.com/questions/2414750/difference-between-domcontentloaded-and-load-events
