<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<style>
.bs-callout-warning {
background-color: #fefbed;
border-color: #f1e7bc;
}
.bs-callout {
margin: 20px 20px;
padding: 15px 30px 15px 15px;
border-left: 5px solid #eee;
}
@media screen and (min-width: 768px)
.bs-example {
margin-left: 0;
margin-right: 0;
background-color: #fff;
border-width: 1px;
border-color: #ddd;
border-radius: 4px 4px 0 0;
box-shadow: none;
}
.bs-example {
position: relative;
padding: 45px 15px 15px;
margin: 10px 15px 15px;
background-color: #fafafa;
box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
border-color: #e5e5e5 #eee #eee;
border-style: solid;
border-width: 1px 0;
}
.bs-example:after {
content: "Examples";
position: absolute;
top: 15px;
left: 15px;
font-size: 12px;
font-weight: bold;
color: #bbb;
text-transform: uppercase;
letter-spacing: 1px;
}
blockquote {
padding: 0 0 0 15px;
margin: 0 0 20px;
border-left: 5px solid #eeeeee;
}
blockquote p {
margin-bottom: 0;
font-size: 17.5px;
font-weight: 300;
line-height: 1.25;
}
p {
margin: 0 0 10px;
}
blockquote small {
display: block;
line-height: 20px;
color: #999999;
}
small {
font-size: 85%;
}
.bs-fieldset {
position: relative;
margin: 15px 15px;
padding: 39px 19px 14px;
background-color: #fff;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
</style>
</head>
<body>
<br>
<div class="bs-fieldset after-navigation">
<blockquote>
<p>Form-submit event firing before the submit-button: Demonstrations of event hiearchy </p>
</blockquote>
<div class="bs-callout bs-callout-warning">
<p>
<b>Why:</b> The event hiearchy of the input element is inherited, and positioned after the events of an enclosing form.<br>
<b>Solution:</b> Use the <a href="http://www.w3.org/TR/html-markup/button.submit.html" target="_new">HTML5 Button type-submit Element</a> <code><button type="submit"></code> instead of <code><input type="submit"></code>
<br>
<h5>A Fiddle relating to:</h5>
<li><a href="http://stackoverflow.com/questions/18281460/what-happens-if-you-try-to-redirect-before-a-form-submit" target="_new">http://stackoverflow.com/questions/18281460/what-happens-if-you-try-to-redirect-before-a-form-submit What happens if you try to redirect before a form submit?</a>
<li><a href="http://code.google.com/p/chromium/issues/detail?id=11113" target="_new"> Webkit/Chromium Issue 11113: onclick of submit is ignored</a>
</p>
</div>
<div class="bs-example" style="padding-bottom: 24px;">
<br>
<br><b>Recommended:</b> Use the <i>HTML5 Button Element</i> with <i>type=submit</i>. Alternatively use a <i>button</i> element with the <code>onclick</code> event set to trigger the forms <code>HTMLFormElement.submit()</code> function instead.<br><br>
<form action="/" method="post" accept-charset="utf-8" id="myform01" onsubmit="alert('submit event')"><li>A form with the default HTML5 button[type=submit] event hierarchy:</li>
<blockquote>
<br>using <code> <form action="/" onsubmit="alert('submit event')"></code> and <code><button type="submit" onclick="alert('button onclick handled before form submit')"></code>
<input type="text" name="someinput" value="100">
<button type="submit" onclick="alert('button onclick handled before form submit')">recommended submit method</button>
</blockquote>
</form>
<br>
<form action="/" method="post" accept-charset="utf-8" id="myform0" onsubmit="alert('submit event')"><li>A form with the default button element and form-submission within the button's onclick event.</li>
<blockquote>
<br>using <code> <form action="/" onsubmit="alert('submit event')"></code> and <code> <button onclick="document.querySelector('#myform0').submit();"></code> <br>
<input type="text" name="someinput" value="100">
<button onclick="document.querySelector('#myform0').submit();">js-based submit</button>
</blockquote>
</form>
<br>
<br>
<hr>
<form action="/" method="post" accept-charset="utf-8" id="myform1" onsubmit="event.preventDefault();"><li>A form with the default Browser submit-handler overwritten and prevented:</li>
<blockquote>
<br>using <code> <form action="/" onsubmit="event.preventDefault();"></code> and <code> <input type="submit" name="commit" value="Submit" onclick="alert('doesn\'t submit')"></code>
<br>
<input type="text" name="someinput" value="100">
<input type="submit" name="commit" value="Submit" onclick="alert('doesn\'t submit')" class="button">
</blockquote>
</form>
<br>
<hr>
<form action="/" method="post" accept-charset="utf-8" id="myform2" onsubmit="return false;"><li>A form with the default Browser submit-handler overwritten and prevented:</li>
<blockquote>
<br>using <code> <form action="/" onsubmit="return false;"></code> and <code> <input type="submit" name="commit" value="Submit" onclick="alert('doesn\'t submit');"></code>
<br>
<input type="text" name="someinput" value="100">
<input type="submit" name="commit" value="Submit" onclick="alert('doesn\'t submit');">
</blockquote>
</form>
<br>
<hr>
<form action="/" method="post" accept-charset="utf-8" id="myform3" onsubmit="event.stopPropagation(); event.cancelBubble = true;"><li>A form with the default Browser submit-handler overwritten:</li>
<br>
<blockquote>
<br>using <code> <form action="/" onsubmit="event.stopPropagation(); event.cancelBubble = true;"></code> and <code> < type="submit" name="commit" value="Submit" onclick="alert('will alert first and submit later using the browser default submit handler.');"></code>
<input type="text" name="someinput" value="100">
<input type="submit" name="commit" value="Submit" onclick="alert('will alert first and submit later using the browser default submit handler.');">
</blockquote>
</form>
<br>
<hr>
<form action="/" method="post" accept-charset="utf-8" id="myform4" onsubmit="event.preventDefault();"><li>A form with the default Browser submit-handler overwritten: submit-only</li>
<blockquote><br>using <code> <form action="/" onsubmit="event.preventDefault();"></code> and <code> <input type="submit" name="commit" value="Submit" onclick="document.querySelector('#myform4').submit();"></code>
<br>
<input type="text" name="someinput" value="100">
<input type="submit" name="commit" value="Submit" onclick="document.querySelector('#myform4').submit();">
</blockquote>
</form>
</div>
</div>
</body>
</html>