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.

How a form can be submitted ?

One way is to include a input element of type submit that creates a event when clicked.

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.

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>

You can submit a form with the following elements:

• input
• image
• button
• Button with Svg
• Anchor with Javascript

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>

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>

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>

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>

• 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

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.

<form onSubmit="console.log('Submitted on load!'); return false;">
</form>

window.onload = function() {
   document.forms[0].requestSubmit();
};