title: Jquery form submit works only once
body: <p>I am making a webpage showing the frequency of searches for some searchterms in a table. Above that table are 2 radio buttons that enables the user to select if he wants to see distinct search results or all results.</p>
  
  <p>When using this javascript:</p>
  
  <pre><code>$(function() {
      $('.distinct_radio').change(function() {
          console.log("submit distinct_radio");
          this.form.submit();
      });
  });
  </code></pre>
  
  <p>It works fine. I can toggle over and over again, switching table values correctly. However, if I use this javascript:</p>
  
  <pre><code>$(function() {
      $('.distinct_radio').change(function() {
          console.log("submit distinct_radio");
          $('form#searchTermForm').submit();
      });
  });
  </code></pre>
  
  <p>The form is defined as</p>
  
  <pre><code>&lt;form id="searchTermForm" action="/searchterms.php" method="POST"&gt;
      &lt;div class="configDiv"&gt; 
          &lt;input name="distinct" id="radio-choice-v-2a" class="distinct_radio" value="false" &lt;?php if (strcmp($distinct, "false") == 0) {echo "checked=\"checked\"";}?&gt; type="radio"&gt;
          &lt;label for="radio-choice-v-2a"&gt;Show total number of searches.&lt;/label&gt;
          &lt;input name="distinct" id="radio-choice-v-2b" class="distinct_radio" value="true" &lt;?php if (strcmp($distinct, "true") == 0) {echo "checked=\"checked\"";}?&gt; type="radio"&gt;
          &lt;label for="radio-choice-v-2b"&gt;Show number of different people&lt;/label&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Some relevant php:</p>
  
  <pre><code>&lt;?php
      if(isset($_POST['distinct'])){
          $distinct   =   $_POST['distinct'];
      } else {
          $distinct   =   "false";
      }
  ?&gt;
  </code></pre>
  
  <p>Javascript that I am using:</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/custom.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Updating this to jquery mobile 1.3.1 does not resolve the issue.</p>
  
  <p>It works fine the first time clicking the radio button. After that, no response at all. If I manually refresh the page, it works for one time again. </p>
  
  <p>With the first script, the message "submit distinct_radio" is printed on the console, and that the console is cleared by the submission itself.</p>
  
  <p>With the second script, the message "submit distinct_radio" is printed on the console, but the console is not cleared. It prints that message, and the POST request being done. However, the POST request is really done and the web page is updated correctly. Clicking again does not result in any message printed at the console, nor any request done.</p>
  
  <p>With the second script, if I change the path after "action" to some non-existent one, a console message is printed every click, accompanied by a new attempt to do a POST request to the non-existing location.</p>
  
  <p>I face this problem in FireFox, Chrome and Opera.</p>
  
  <p>Next to curiosity, I want to use this to submit the form when the user clicks on the table header to sort. From there, I cannot use "this.form.submit();"</p>
  
  <p>How can this behavior be explained?</p>
  
  <p>Edit:</p>
  
  <p>Thanks to @peddle (See answer below):
  Seems some issue in Jquery Mobile. Deleting the reference to jquery.mobile-1.3.0.min.js makes it work over and over again (hence very ugly). Javascript references are like suggested at <a href="http://jquerymobile.com/blog/2013/04/10/announcing-jquery-mobile-1-3-1/" rel="nofollow">http://jquerymobile.com/blog/2013/04/10/announcing-jquery-mobile-1-3-1/</a> , so jqm 1.3.1 and jquery 1.9.1 are meant to cooperate.</p>