Jquery form submit works only once

Question

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.

When using this javascript:

$(function() {
    $('.distinct_radio').change(function() {
        console.log("submit distinct_radio");
        this.form.submit();
    });
});

It works fine. I can toggle over and over again, switching table values correctly. However, if I use this javascript:

$(function() {
    $('.distinct_radio').change(function() {
        console.log("submit distinct_radio");
        $('form#searchTermForm').submit();
    });
});

The form is defined as

<form id="searchTermForm" action="/searchterms.php" method="POST">
    <div class="configDiv"> 
        <input name="distinct" id="radio-choice-v-2a" class="distinct_radio" value="false" <?php if (strcmp($distinct, "false") == 0) {echo "checked=\"checked\"";}?> type="radio">
        <label for="radio-choice-v-2a">Show total number of searches.</label>
        <input name="distinct" id="radio-choice-v-2b" class="distinct_radio" value="true" <?php if (strcmp($distinct, "true") == 0) {echo "checked=\"checked\"";}?> type="radio">
        <label for="radio-choice-v-2b">Show number of different people</label>
    </div>
</form>

Some relevant php:

<?php
    if(isset($_POST['distinct'])){
        $distinct   =   $_POST['distinct'];
    } else {
        $distinct   =   "false";
    }
?>

Javascript that I am using:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

Updating this to jquery mobile 1.3.1 does not resolve the issue.

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.

With the first script, the message "submit distinct_radio" is printed on the console, and that the console is cleared by the submission itself.

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.

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.

I face this problem in FireFox, Chrome and Opera.

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();"

How can this behavior be explained?

Edit:

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 http://jquerymobile.com/blog/2013/04/10/announcing-jquery-mobile-1-3-1/ , so jqm 1.3.1 and jquery 1.9.1 are meant to cooperate.

Answer 1

This is not an answer but required more space than a comment, have you tried the following to see if it makes any difference:

$(function(){
  $('.distinct_radio').change(function() {
     console.log("submit distinct_radio");
    $('form#searchTermForm').get(0).submit();
  });
});

The former of your examples is using pure JavaScript to submit the form and the latter is using jQuery's version of submit. The above uses jQuery to find the form, but should use the JavaScript submit method. The above should test the following:

1. If the above works without problem then your issue is with jQuery's submit.
2. If the above fails, but produces a undefined object error, then jQuery can't find the form.
3. If the above fails but without error you have something very odd happening, or the JavaScript is not being evaluated for some reason.

update

Another thing to try:

$(function(){
  $('.distinct_radio').change(function() {
     console.log("submit distinct_radio");
    $('form#searchTermForm').trigger('submit');
  });
});

Now I would expect the above to have the same problem as $().submit() but you never know. Another thing that is possibly causing an issue is that you don't seem to have a submit button in your form markup. Whilst logically this shouldn't have any bearing on the situation, if you read through the jQuery .submit page they have this quote:

http://api.jquery.com/submit/

Depending on the browser, the Enter key may only cause a form submission if the form has exactly one text field, or only when there is a submit button present. The interface should not rely on a particular behavior for this key unless the issue is forced by observing the keypress event for presses of the Enter key.

Whilst the above is only talking about using the enter key, it is possible that browsers/jQuery have other oddities/differences laying about when submit buttons are missing.. I am reaching however.

Beyond the above it is possible there is some interference between jQuery and jQuery Mobile (your specific version), or it could be a bug in jQuery 1.9.1 (I can't say I've used this much in production). If you investigate the source of the $().trigger() method, which is used when using $().submit() , you'll see it's doing a lot of "magic" — which is why it's probably better to use the pure JavaScript method when you can get your hands on it.