This page talks and shows all the ways on how to submit a form and handle the submit event in javascript.
How a form can be submitted ?
One way is to include a input element of type submit that
The second way is to do it programmatically via one of this two Javascript functions:
If you use the submit function of the form in place of requestSubmit, no submit event is raised and the form's onsubmit event handler is not run. 1)
Basically, when a form is submitted 2):
<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>
You can submit a form with the following elements:
The input/submit 3) element with a inline handler that prevent the submit process by preventing the default behavior.
handleSubmit = () => {
// 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+'`');
// to stop the submit process and to not get a 404
return false;
}
<form onSubmit="return handleSubmit();" >
<input type="submit" value="Send Request" accesskey="s" />
<input type="submit" value="Delete Request" accesskey="d"/>
</form>
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>
en-US/docs/Web/HTML/Element/input/image: A graphical submit button.
<form onSubmit="console.log('Stop poking me!'); return false;">
<input
type="image"
src="/_media/android-chrome-192x192.png"
alt="image submit button"
height=50
width=50
/>
</form>
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>
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>
If you use the submit function of the the form in place of requestSubmit, no submit event is raised and the form's onsubmit event handler is not run. 4)
See the specific page: HTML - How to retrieve the data of a form with Javascript
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>
A form can be submitted on load making CSRF attack on post possible.
Example:
<form onSubmit="console.log('Submitted on load!'); return false;">
</form>
window.addEventListener("load",function() {
document.forms[0].requestSubmit();
});