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 creates a event when clicked.

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

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>

HowTo and Example

You can submit a form with the following elements:

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>

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

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>

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

How to get the data from Javascript ?

See the specific section How to get data from a form

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.

<form onSubmit="console.log('Submitted on load!'); return false;">
</form>
window.onload = function() {
   document.forms[0].requestSubmit();
};

Powered by ComboStrap