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

About

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

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.

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)

Process

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>

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

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>

Image

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>

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>

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)

How to get the data from Javascript ?

See the specific page: HTML - How to retrieve the data of a form with Javascript

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>

Security

Submit on Load

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();
});

References





Discover More
Devtool Chrome Event Listener
DOM - Event Type (name)

An event is categorize by its type which is a property of the event object The type of an event is also known as the name of the event (Ref)...
Devtool Chrome Event Listener
Event - Category

event type are categorized further in category. Form Event Focus Event Input Devices Event View Events Example non-normative. Category Event Type Form Event submit Focus Event focus,...
HTML - Dialog

A dialog in HTML represents a part of an application that a user interacts with to perform a task For example: a dialog box, inspector, or window. The HTML with a form and two submit button....
HTML - How to retrieve the data of a form with Javascript

This article shows you how to retrieve the data of a form with Javascript succesful controls You don't need to submit a form to get the values Every form object has a elements property that stores...
Html Radio Illustration
HTML - Radio

A radio represents a serie of mutually-exclusive choices in a form. It is an input element of type radio. A radio is round to distinguish from the square checkbox. As the checkbox, the state...
HTML Form - Reset (Element and Event)

A form is with a reset element that creates a onreset event By default, the reset event will reset the value to their initial state. With a inline handler You can reset a form with the following...
HTML - Button

This page shows you how to create a button in HTML. HTML In html, there is two kind of button: the input element with a button type - no default behavior expected that the text of the button is...
Html Checkbox Illustration
How to create and use a HTML checkbox ?

This article gives you all the important information about HTML checkbox and how to use them
Formdata Browser Devtool
How to use FormData and send multipart-data in the Browser (Web API )?

FormData is a web api object that represent the data of a form that should be send if the form is submited. Therefore if you have a checkbox that is not checked, formdata will not collect it. You can...
How to use the Select HTML Element?

select is an HTML control form element used for selecting one or more value amongst a set of options. It creates a drop-down list used in a form that will set a scalar value from a list of options. ...



Share this page:
Follow us:
Task Runner