title: input type="submit", onclick handler calls this.form.submit(), and returns no value
body: <p><strong>EDIT: Please read carefully all the way through the question before you consider answering it. I am <em>not</em> asking about the advisability of using an inline event handler in production code, nor am I asking about the best way to achieve the result promised by the article I reference. This is a question about Javascript semantics and browser implementation details, not about best coding practices.</strong> </p>
  
  <p>Sounds like a nightmare, right?</p>
  
  <p>Yet I found some <a href="http://www.hesk.com/knowledgebase/?article=63" rel="nofollow noreferrer">online advice</a> that advocates doing just such a thing to prevent double-submission of a form:</p>
  
  <pre><code>&lt;input type="submit" 
         onclick="this.disabled=true;
                  this.value='Sending, please wait...';
                  this.form.submit();" /&gt;
  </code></pre>
  
  <p>Leaving aside any discussion of the evils of inline event handlers, the problems I see here are: </p>
  
  <ol>
  <li>The type of the tag is <code>"submit"</code>, so submitting its containing form is its default behavior;</li>
  <li>The <code>onclick</code> handler <em>explicitly</em> submits the containing form;</li>
  <li>The <code>onclick</code> handler doesn't return <code>false</code> to prevent the default behavior (see 1).</li>
  </ol>
  
  <p>Intuitively, I would think that a click on this item would do exactly the <em>opposite</em> of what the article claims -- i.e., submit the form twice, once as a result of the explicit <code>submit()</code> call, and then once more as the unsuppressed default behavior of the <code>"submit"</code>-typed control. </p>
  
  <p>On the other hand, I wrote a tiny PHP script (below) and tried it out with both Firefox and Safari (at the moment my only conveniently available browsers), and it only writes a single log entry per  click on the button: </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
  &lt;?php
    if (isset($_GET['action']) &amp;&amp; $_GET['action'] == 'submit') {
      $s = 'Got form submission at ' . time();
      error_log($s);
      echo $s;
    }
    else {
  ?&gt;
    &lt;form action="http://localhost/~hephaestus/phptests/submittest.php?action=submit" 
          method="post"&gt;
      &lt;input type="submit" 
             onclick="this.disabled=true;
                      this.value='Sending, please wait...';
                      this.form.submit();" /&gt;
    &lt;/form&gt;
  &lt;?php
    }
  ?&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So are these two browsers actually doing the "right" thing (where "right" is defined in some document that I either haven't seen or haven't read closely enough) -- meaning that my analysis of the problems is incomplete or wrong?</p>
  
  <p>Or, is my analysis correct -- meaning that the observed single submissions are the result of the browser implementers putting in special-case logic, to save naive coders from themselves?</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>In an effort to empirically test out the claim by @sourcecode that the <code>form.submit()</code> method is some sort of "second submit button" on a form, and is thus subject to the rule stated in section <a href="http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2" rel="nofollow noreferrer">17.13.2 of the HTML4 spec</a> that there can only be one "successful" submit button, I made a few additions to my PHP test script:</p>
  
  <pre><code>&lt;?php
    if (isset($_GET['action']) &amp;&amp; $_GET['action'] == 'submit') {
      $s = 'Got form submission at ' . time() . ', tellme = ' . $_POST['tellme'];
      error_log($s);
      echo $s;
    }
    else {
  ?&gt;
    &lt;form action="http://localhost/~hephaestus/phptests/submittest.php?action=submit" 
          method="post"&gt;
      &lt;input type="hidden" id="tellme" name="tellme" value="0" /&gt;
      &lt;input type="submit" 
             onclick="this.disabled=true;
                      this.value='Sending, please wait...';
                      this.form.submit();
                      document.getElementById('tellme')=1;" /&gt;
    &lt;/form&gt;
  &lt;?php
    }
  ?&gt;
  </code></pre>
  
  <p>In Firefox, this code produces the single error-log entry:</p>
  
  <blockquote>
    <p>Got form submission at <em>timestamp</em>, tellme = 1</p>
  </blockquote>
  
  <p>which <em>does</em> suggest that the method-invocation is somehow being superseded by the intrinsic event-driven behavior of the control. </p>
  
  <p>Furthermore, if I include an additional <code>return false;</code> after setting the value of <code>tellme</code> to 1 (thereby preventing the click event from propagating, and thus preventing the intrinsic behavior of the control), the single error-log entry is:</p>
  
  <blockquote>
    <p>Got form submission at <em>timestamp</em>, tellme = 0</p>
  </blockquote>
  
  <p>meaning that in this case, the submission was the result of the invocation of <code>this.form.submit()</code>.</p>
  
  <p>On the other hand, when I try the same two variations in Safari, <em>each</em> of them gives me the same single error-log entry:</p>
  
  <blockquote>
    <p>Got form submission at <em>timestamp</em>, tellme = 0</p>
  </blockquote>
  
  <p>So in the case of Safari, the method invocation always takes precedence over the event-driven submission -- presumably because it happens earlier.</p>
  
  <p>That's. Just. Awesome. :-/</p>
  
  <p><strong>Further update:</strong> I got a chance to test this on IE 8.0 on Windows NT 5.1.</p>
  
  <p>IE 8 mirrors the behavior of Safari, i.e., the <code>form.submit()</code> method always takes precedence over the even-driven submit.</p>
  
  <p>Although it's hardly relevant today, I also realized that I have an ancient IE 5.22 on an even more ancient PowerPC iMac running OS X 10.4.11. The interesting bit of historical trivia here is that IE5 works <strong>exactly opposite</strong> to the way IE8 works: the event-driven submit always supersedes the <code>form.submit()</code> method -- <em>even when the click event has been inhibited from propagating</em> by a <code>return false;</code> at the end of the <code>onclick</code> handler! (I haven't delved into whether this is a bug or a feature, though. I haven't yet -- and may never! -- run a test to determine whether it's botching the event inhibition, or trying to do something "smart".) </p>
  
  <p>Still, regardless of the inconsistencies, both of the IEs only do a single submission.</p>
  
  <p>My tentative (well, by now, actually pretty firm) conclusion is that the precise relationship between a "submit"-typed control and the DOM <code>form.submit()</code> method isn't well-defined, and that browser implementers, in the absence of any explicit guidance, generally do what they think best (see <a href="https://stackoverflow.com/a/14184844/1337498">@Boris Zbarsky's answer</a>, for example).</p>
  
  <p>At least in the cases of Firefox, Safari and IE, their implementers foresaw the possibility that both an event and a method call might compete to submit the same form, and took steps (albeit different ones -- pretty much running the gamut) to ensure that only one of them would succeed.</p>
  
  <p>(I'd <em>still</em> welcome additional answers from folks who know different browser internals well enough to comment, or who've loaded my simple PHP script using browsers other than those I've tested.)</p>