HTML Form - 1001 ways to submit a Form and handle the corresponding Event


This page talks and shows all the ways on how to submit a form and handle the submit event in javascript.

Submit Method

How a form can be submitted ?

HTML element

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:

  • 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.

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"
 <p><label>Customer name: <input name="custname"></label></p>
  <button type="submit">Send</button>

HowTo and Example

You can submit a form with the following elements:

Submit Input

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
   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"/>


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>


input/image: A graphical submit button.

<form onSubmit="console.log('Stop poking me!'); return false;">
    alt="image submit button" 


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;">
    <svg xmlns="" xmlns: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>

You can submit a form with a little bit of Javascript from a anchor (link)


<form onsubmit="console.log('Submitted with a link!'); return false;">
  <a href="#" onclick="this.closest('form').requestSubmit(); return false;">Submit from a link</a>

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)

How to get the data from Javascript ?

Which button has submitted (clicked)

When a submit input element is used to submit

whichButton = (event) => {
  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" />


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;">
window.addEventListener("load",function() {


Powered by ComboStrap