使用AJAX提交表单时，选项卡上的Safari Popup关闭

Question

In Safari Browser, on a page with a form, there is a system modal popup that opens when the user tries to close the browser's tab and the form hasn't been validated. Text says: You have entered text on “[name of the page]”. If you close the window, your changes will be lost. Do you want to close the window anyway?

This behavior is ok when the post redirects to another the page. On our site, we have a page that validates a form using an Ajax Request. As the page is not reloaded, even if the form has been submitted, the popup appears, and it might feel strange for the end user.

The post is triggered by a button:

1. Forms are validated using the jQuery Validation plugin
2. Plugin options include a submitHandler option that return false;
3. Date are sent via $.post , and a message informs user for success/failure.

Does anyone have an idea about how to avoid this popup to be triggered once the call returns? We'd wish not to force a reload in that case.

Note that this behavior can be changed by the user , but not very easily...

Answer 1

I can't replicate this in Safari on Windows.

Maybe try emptying/resetting the input fields once the form has been submitted, only if there weren't any errors with the submission of course, or better yet, remove the form completely, if it's not needed after. Of course using DOM manipulation, not by reloading the page.

On a side note, seeing the filled-out form after it's been sent (even if you're showing a confirmation message) also can be strange for the user (unless it's a multiple-use form and this behaviour is expected).

UPDATE: tested on a Mac Safari, it's behaving as you described, but if I remove what I typed (that made the browser alert me in the first place), it doesn't come up. So, simple reset of the fields should do the trick.