HTML5: Form submit event firing before the onclick event of a submit button

Sometimes it is useful to process a javascript routine prior to form submission. A straightforward method includes listening to the onclick event of the submit button. As straightforward as this method may sound, matters can get confusing sometimes as there are actually two types of submit specified in the HTML5 set. This duality have compelling reason to quickly compile a write-up. Following is a summary of the results:

Result:
Basically there is no reason not to use the HTML 5 element  <button type="submit" >Submit</button>  instead of the classical and obsolete:  <input type="submit" />. There are further ways to trigger an onclick event before form-submission however. That is by overriding default behavior, as shown in the following jsfiddle: