Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>What you are observing is the default and inherited behavior of the handlers for the <code>HTMLInputElement</code>'s, unless overridden.</p> <p><strong>Solution:</strong></p> <p>Use the <a href="http://www.w3.org/TR/html-markup/button.submit.html" rel="nofollow">HTML5 button type-submit Element</a> instead, which all modern Browsers should be able to handle correctly. </p> <pre><code>&lt;form action="/" method="post" onsubmit="alert('submit event')"&gt; &lt;input type="text" name="someinput" value="100"&gt; &lt;button type="submit" onclick="alert('button onclick handled before form-submit')"&gt;submit&lt;/button&gt; &lt;/form&gt; </code></pre> <p><strong>Explanation:</strong></p> <p>You did not provide a specific browser, but perhaps you are using WebKit, which had a problem with the <code>onsubmit</code> / <code>onclick</code> event hierarchy <a href="http://code.google.com/p/chromium/issues/detail?id=11113" rel="nofollow">before</a>.</p> <p>On the project's code-site you can search for the code that implements the various HTMLElement's.<br> For instance a search for <a href="https://code.google.com/p/chromium/codesearch#search/&amp;q=onsubmit&amp;sq=package%3achromium&amp;type=cs" rel="nofollow">onsubmit</a> will lead to an <a href="https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/LayoutTests/fast/events/onsubmit-bubbling.html&amp;ct=rc&amp;cd=2&amp;q=onsubmit&amp;sq=package%3achromium&amp;dr=C" rel="nofollow">Webkit onsubmit-event bubbling test</a>.</p> <p>One option to workaround this issue of event-bubbling, is to use a <code>button</code> and rendering it into a "submit", by finding its enclosing form and submitting it through the function <code>(HTMLFormElement-instance).submit()</code>.</p> <p>Another is by changing the submit handler of the form, which should be what you are looking for.</p> <pre><code>&lt;form action="/" method="post" accept-charset="utf-8" id="myform3" onsubmit="event.stopPropagation(); event.cancelBubble = true;"&gt; A form with the default Browser submit-handler overwritten: &lt;br&gt; &lt;input type="text" name="someinput" value="100"&gt; &lt;input type="submit" name="commit" value="Submit" onclick="alert('will alert first and submit later using the browser default submit handler.');"&gt; &lt;/form&gt; </code></pre> <p>All cases are demonstrated in this <a href="http://jsfiddle.net/lsauer/Aaufa/1/" rel="nofollow">fiddle</a>.</p> <p>Cheers!</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload