Ask for confirmation if user leaves the page but not if by submitting the form

[Fedy]

Hi everyone, this is my first post here! As I wrote in the title of the post, I need my JavaScript code to do this action: a confirmation prompt must appear when users leave a page with a form containing unsaved editings, but the prompt shouldn't appear if users submit this form clicking on some buttons.

This is the code I tried:

		var clicked;
		$(document).ready(function() {   
		
		$(".button").click(function(){
			clicked = 1;
		});
		
		if (form_is_modified(document.forms[1])) {
			get();
		}
		else {
			
		}

		function get(){
			if(clicked == 1) {
				
			} else {
				confirmUnload(true); 
			}
		}
		
		function confirmUnload(on) {
			var message = "You have unsaved data. Are you sure to leave the page?";
			window.onbeforeunload = (on) ? function() { return message; } : null;
		}

I do not post the function "form_is_modified" through which I check if the form contains unsaved editings, because is working well. Everyone has suggestions?

Thanks so much, bye!

[xelawho]

being that you appear to be using jQuery anyway you can use unload() which gives you access to the event object. From there you could find out if the element that triggered the event was your submit button and if it wasn't pop the confirm box up.

completely untested, and there may well be a better way, but that's what occurs to me.

[Old Pedant]

??? How does jQuery know that a submit button triggered the unload?

I would think that the event would be tied to the <form>, not to the button.

[xelawho]

you're right - dumb idea. How about:

<script>
$(document).ready(function () {
    var warn=true;
    $("form").submit(function () {
        warn=false;
    });
    window.onbeforeunload = function () {
        if (warn) {
            return "sure about that?";
        }
    }
});

</script>

[Fedy]

Hi everyone and thanks for your kind replies! As soon as I can (next week) I will try the solution suggested and I will give you a feedback.

[Fedy]

Hi xelawho, your suggestion worked nicely! I just slightly changed the form in order to have the confirmation only if user changes something in the form:

<script>
$(document).ready(function () {
    var warn=true;
    $("form").submit(function () {
        warn=false;
    });
    $("form").change(function () {
        window.onbeforeunload = function () {
            if (warn) {
                return "sure about that?";
            }
        }
    });
});

</script>

[Old Pedant]

Yes. This is the correct way. Why did you ask about that other way in the other thread?

As I said in the other thread, *MAYBE* you could make a SJAX call (like AJAX, but synchronous) to save the <form> contents, but it would have to be unconditional: You would always do the save if warn is true.