Why is my ajax form thinking it's not submitted?

Question

I have a form that is being submitted through ajax. It's not reloading the page, it just shows a success message, which is what I want. On my page I can have several forms with different ids but same class. I'm targetting the class for submit. But I have two different types of forms, new ones and existing ones (add or update basically). The update ones are working fine, but the add ones are giving me a browser alert when I try to exit the page. They think they are not already submitted.

Here's my code:

    $("#simulation-table").on('submit', '.simulation_form', function(event){
        event.preventDefault(); //prevent default action 
        var post_url = $(this).attr("action"); //get form action url
        var request_method = $(this).attr("method"); //get form GET/POST method
        var form_data = $(this).serialize(); //Encode form elements for submission
        var form_id =$(this).attr("id");

        $.ajax({
            url : post_url,
            type: request_method,
            data : form_data
        }).done(function(response){
            response = JSON.parse(response);
            if ((response.success === true || response.success == 'true') && (response.new === false || response.new == 'false')) {
                alert_float('success', response.message);
                $formSub = $('body').find('#' + form_id);
                $formSub.find('.edit-field input').each(function () {
                    $(this).attr('readonly', true);
                });
                $formSub.find('.save_button button').prop('disabled', true);
            } else {
                alert_float('success', response.message);
                $formSub = $('body').find('#' + form_id);
                $formSub.find('.edit-field input').each(function () {
                    $(this).attr('readonly', true);
                });
                $formSub.find('.save_button button').prop('disabled', true);
                $formSub.removeAttr('id');
                $formSub.attr('id', 'simulation_form_' + response.insert_id);
                $formSub.find('input[name="id"]').val(response.insert_id);
                $formSub.attr('action', admin_url + 'leads/simulation/' + response.insert_id);
            }
        });
    });

I have to change the form ids for the add function after receiving the success response, that's why I have that last piece of code. Why am I receiving this browser alert for changes not submitted?

My problem is not with the submit event, as it is triggering and completing successfully. The browser (Firefox in this case) is alerting me if I'm sure that I want to exit the page since some data might not be saved, but the form was submitted correctly.

EDIT: Updated code after marked as duplicate. Did not solve

There's nothing that automatically warns when you try to leave a page with an unsubmitted form, you must do that in your own JavaScript. — Barmar, Nov 17 '19 at 17:45
What "browser alert" are you seeing? It's not clear what you mean by "they think they are not already submitted". Can you clarify specifically what's happening, perhaps even provide a complete runnable example? — David, Nov 17 '19 at 17:47
How does the form submission function notify the `beforeUnload` handler that the forms have been submitted? — Barmar, Nov 17 '19 at 17:48
@PatrickEvans Yes, these are dynamically added. How can I use event delegation? — FilT, Nov 17 '19 at 17:51
@Barmar I'm guessing that the beforeUnload notification is what might be missing. How can I add it to my function in the best manner? — FilT, Nov 17 '19 at 17:51
@PatrickEvans Isn't that solving a different problem? If it weren't binding the event handler correctly, it wouldn't be doing the AJAX submission. — Barmar, Nov 17 '19 at 17:56
@Barmar Yes, exactly, my problem is not with the submission. I looked at the marked duplicate and it's not the same. Changed my code to use the on('submit',... and I still have the same problem — FilT, Nov 17 '19 at 17:58
You need to post your `onbeforeunload` code, we can help you fix it. — Barmar, Nov 17 '19 at 17:59
@FilT: *"Changed my code to use the on('submit'"* - That description alone doesn't indicate that you're properly using event delegation. If you've modified your code and the problem persists, please update the code in the question accordingly. — David, Nov 17 '19 at 18:02
@Barmar I do not have onbeforeunload code. Might it be the jquery libs default beforeunload code? — FilT, Nov 17 '19 at 18:05
No, jQuery doesn't do that. Do you use any other libraries or frameworks? — Barmar, Nov 17 '19 at 18:06
I just took it since you were adding new forms that their native submission action is exiting the page and causing the alert popup(eg resubmit warning). What is the actual alert (provide actual text/image of it)? — Patrick Evans, Nov 17 '19 at 18:08
@Barmar Yes, I'm using CodeIgniter framework, bootstrap, jquery validation and are-you-sure plugin — FilT, Nov 17 '19 at 18:10
@PatrickEvans I added to the question. I have an alert box alerting me if I'm sure that I want to exit the page since some data might not be saved — FilT, Nov 17 '19 at 18:12
`are-you-sure` sounds like the culprit. Isn't that warning exactly what it's supposed to do? — Barmar, Nov 17 '19 at 18:12
@Barmar Yes it might be the culprit. It's being used by another developer working on this project. Do you think I can override it for this specific code? I'm not exactly sure what's the best way to do that — FilT, Nov 17 '19 at 18:15
See its [documentation](https://github.com/codedance/jquery.AreYouSure) — Barmar, Nov 17 '19 at 18:17
`$('#my-form').trigger('reinitialize.areYouSure');` will clear it. — Barmar, Nov 17 '19 at 18:18

FilT · Accepted Answer · 2019-11-17T18:35:41.790

Jquery plugin Are You Sure was sending the alert. Using @Barmar suggestion of $('#my-form').trigger('reinitialize.areYouSure'); worked!

Code Updated:

$("#simulation-table").on('submit', '.simulation_form', function(event){
        event.preventDefault(); //prevent default action 
        var post_url = $(this).attr("action"); //get form action url
        var request_method = $(this).attr("method"); //get form GET/POST method
        var form_data = $(this).serialize(); //Encode form elements for submission
        var form_id =$(this).attr("id");

        $.ajax({
            url : post_url,
            type: request_method,
            data : form_data
        }).done(function(response){
            response = JSON.parse(response);
            if ((response.success === true || response.success == 'true') && (response.new === false || response.new == 'false')) {
                alert_float('success', response.message);
                $formSub = $('body').find('#' + form_id);
                $formSub.find('.edit-field input').each(function () {
                    $(this).attr('readonly', true);
                });
                $formSub.find('.save_button button').prop('disabled', true);
            } else {
                alert_float('success', response.message);
                $formSub = $('body').find('#' + form_id);
                $formSub.find('.edit-field input').each(function () {
                    $(this).attr('readonly', true);
                });
                $formSub.find('.save_button button').prop('disabled', true);
                $formSub.removeAttr('id');
                $formSub.attr('id', 'simulation_form_' + response.insert_id);
                $formSub.find('input[name="id"]').val(response.insert_id);
                $formSub.attr('action', admin_url + 'leads/simulation/' + response.insert_id);
                $formSub.trigger('reinitialize.areYouSure');
            }
        });
    });

Updated code for best practice to use jquery on events, as suggested by @PratrickEvans, and added the reinitialize trigger to the form when it's a new form created dynamically, as suggested per @Barmar

You should show how you've incorporated this into the code. – Barmar Nov 17 '19 at 18:32 — Barmar, Nov 17 '19 at 18:32

Why is my ajax form thinking it's not submitted?

1 Answers1