Form submission needs to wait for ajax calls, ajax calls don't have to submit

Question

I have a form my_form which needs to be refreshed (e.g. changing some elements in the form) via jquery every time the user change some data. In order to know what to change, an AJAX call needs to be executed

$('#my_form').change(function() {
   ...execute an ajax call and change the form via jquery
});

The problems arise when a user types something in a textbox and then click on the submit button (or press enter): both the change() event and the submission are triggered at the same time and the result is an "out of memory" error which prevents the form to be submitted.

I know this is a typical problem and the typical solution is to avoid using the classic submit button and to control the submit via jquery when the ajax call finishes. The problem here is that I don't want to submit the form every time the ajax call is executed (only when the user actually submits) AND I don't want to execute again the ajax call when the user submits the form.

The perfect solution would be: after the submission, wait until all the ajax calls are over and then submit. I think this is not possible unless you check ajaxStop inside a loop, which I don't think it's a safe solution. Is there any other way?

Another solution would be to just submit the form despite the fact there is an AJAX call going on, in fact this wouldn't affect the user experience. How can I do it?

EDIT: I've found what the real issue is: in order to show a loader when ajax calls are in execution, I implemented the solution I've found here How can I create a "Please Wait, Loading..." animation using jQuery? (accepted answer).

For some reason, the modal element prevents the submission of the form when is not hidden (i.e. when an ajax call is in execution); if I decrease the height of the element from 100% to 60% (I've guessed any value which makes the element not covering the submit button would be ok but I am not sure if it is a coincidence) it works.

Can anyone explain me what actually happens and how can I continue using that solution safely? Thanks.

remove type submit, add onclick in that do ajax call. In ajax success function submit form (document.formname.submit()) . — saravanan mp, Aug 25 '15 at 12:38
Disabling the submit button by default, and when the last ajax call is completed enabling it could be a solution? — jcarrera, Aug 25 '15 at 12:44

score 0 · Answer 1 · answered Aug 25 '15 at 12:43

0

You can disable the "submit" button until the ajax call has finished, when you will enable it again.

$('#my_form').change(function() {
    $('#my_form input[type=submit]').prop('disabled' true);
    $.ajax({
          .....
          success : function(data) {
              //... change the form
              $('#my_form input[type=submit]').prop('disabled' false);
          }
    });
})

answered Aug 25 '15 at 12:43

ojovirtual

3,332
16
21

I already tried this solution, it doesn't work well: the change event is triggered exactly when I click the submit button, this basically makes disabled the button when I click on it, which is not understandable by final users. – Eugenio Aug 25 '15 at 12:53
That is because the "submit" button is part of the form and clicking it fires the "chage". Try removing this button, create a `button` tag outside of the form and use `onclick="$('#my_form').submit();"` – ojovirtual Aug 25 '15 at 12:57
it doesn't work, the thing is that jquery doesn't know I've changed something until I don't click somewhere outside the textbox I am filling; If I type some text in a textbox and then click on the button, only at that point the change event is triggered and the button disabled ... if, before clicking the button, I click somewhere in the page, it works. – Eugenio Aug 25 '15 at 13:06

score 0 · Answer 2 · answered Aug 25 '15 at 14:10

So, let's suppose everytime you change some data by clicking, the .change event is triggered. That happens with select and the likes. What's left are the textboxes...

$(":input").keypress(function (event) {
        $("#my_form").change();
    });

The :input selector selects all the elements that requires an input, not only the <input> elements. You can also use a selector wich gets textboxes only. When I used that funcion, before triggering the change event I checked if the enter key was pressed, and only in that case I would make the change. I'll write that code too just in case it may be of help:

$("#txtFilter").keypress(function (event) {
            if (event.keyCode == 13) {
                event.preventDefault();
                $("#txtFilter").change();
            }
        });

EDIT: Mmmh... This reminds me that you can do it in a simpler way too!

$('#my_form').change(function(e) {
   e.preventDefault();
   ...execute an ajax call and change the form via jquery
});

e.preventDefault() should stop the submission!

Thanks for the answer, but I've found what it seems the actual reason of the issue, please look at my edited question. — Eugenio, Aug 25 '15 at 15:19

Form submission needs to wait for ajax calls, ajax calls don't have to submit

2 Answers2