HTML Form - 1001 ways to submit a Form and handle the corresponding Event
Table of Contents
1 - About
This page talks and shows all the ways on how to submit a form.
2 - Articles Related
3 - Submit Method
How a form can be submitted ?
3.1 - HTML element
One way is to include a input element of type submit that creates a event when clicked.
3.2 - Function
The second way is to do it programmatically via one of this two Javascript functions:
- form.requestSubmit( [ submitter ] ) Requests to submit the form. Unlike submit(), this method includes interactive constraint validation and firing a submit event, either of which can cancel submission. The submitter argument can be used to point to a specific submit button, whose formaction, formenctype, formmethod, formnovalidate, and formtarget attributes can impact submission. Additionally, the submitter will be included when constructing the entry list for submission; normally, buttons are excluded.
- form.submit(): Submits the form, bypassing interactive constraint validation and without firing a submit event.
4 - Process
Basically, when a form is submitted:
- the data in the form is converted into the structure specified by the enctype attribute (by default: application/x-www-form-urlencoded The data will be send in Url encoding format: custname=Denise+Lawrence&custtel=555-321-8642&…
- and sent to the destination specified by the action attribute
- with the method passed in the method attribute.
Reference in the specification
<form method="post"
enctype="application/x-www-form-urlencoded"
action="https://pizza.example.com/order.cgi">
<p><label>Customer name: <input name="custname"></label></p>
..........
<button type="submit">Send</button>
</form>
5 - HowTo and Example
You can submit a form with the following elements:
5.1 - Submit Input
The input/submit element with a inline handler that prevent the submit process by preventing the default behavior.
handleSubmit = (event) => {
// to stop the submit process and to not get a 404
event.preventDefault();
// The value of the suhbmitter
submitterValue = event.submitter.value;
// You can also get the value of the elements via event.target.elements
console.log('Form Submitted with the button `'+submitterValue+'`');
}
<form onSubmit="handleSubmit(event)" >
<input type="submit" value="Send Request" accesskey="s" />
<input type="submit" value="Delete Request" accesskey="d"/>
</form>
5.2 - Button
You can add a submit behavior to a button element by adding a type attribute to submit ( reset works also)
<form onSubmit='console.log("Hello Button"); return false;'>
<button type="submit">Click Me</button>
</form>
5.3 - Image
input/image: A graphical submit button.
<form onSubmit="console.log('Stop poking me!'); return false;">
<input
type="image"
src="https://datacadamia.com/wiki/_media/resume/nico.jpg"
alt="nico submit button"
height=50
width=50
/>
</form>
5.4 - Svg
To use a SVG icon as a submit control element, enclose it in a button element.
/** To delete the button default cosmetic **/
button {
background: none;
border: 0;
}
<form onSubmit="console.log('Deleted!'); return false;">
<button>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"></path></svg>
</button>
</form>
5.5 - Anchor (HyperLink)
You can submit a form with a little bit of Javascript from a anchor (link)
Example:
<form onsubmit="console.log('Submitted with a link!'); return false;">
<a href="#" onclick="this.closest('form').requestSubmit(); return false;">Submit from a link</a>
</form>
6 - How to get the data from Javascript ?
- The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method.
- From the event:
- event.submitter.value - the submitter value
- event.target.elements - holds the elements and their values
7 - Which button has submitted (clicked)
When a submit input element is used to submit
whichButton = (event) => {
event.preventDefault();
console.log("Submitted with the input element: "+event.submitter.value);
};
<form onSubmit="whichButton(event)" >
<input type="submit" name="action" value="Send" />
<input type="submit" name="action" value="Cancel" />
</form>
8 - Security
8.1 - Submit on Load
A form can be submitted on load making CSRF attack on post possible.
<form onSubmit="console.log('Submitted on load!'); return false;">
</form>
window.onload = function() {
document.forms[0].requestSubmit();
};