Question

Let’s say I have a form on the add-project.html page. After the request is done, I redirect the user back to the main index.html page.

What I want to do is to display a notification on index.html only when the user has successfully submitted the form.

I am using this plug-in for the notification : http://redeyeoperations.com/plugins/Notify/

For now, I am using a temporary solution which shows a notification on add-project.html when the form has been submitted and then redirects to the main index.html page after a setTimeout but I don’t like it, it’s quite dirty.

$('#printForm').submit(function(e) {
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: 'add-project.php',
        data: $('#printForm').serialize(),
        success: function(result) {
            if(result == '1') {
                // Success
                $.notify.basic('Congratulations, your projet has been saved correctly', {
                    occupySpace : true,
                    close : true,
                    autoClose: 5000
                });

                setTimeout(function() {
                    window.location.href = '../index.html';
                }, 2000);
            }
            else {
                // Error
                $.notify.error('Oops, something went wrong ! Make sure you filled all the necessary fields', {
                    occupySpace : true,
                    close : true,
                    autoClose: 5000
                });
            }
        }
    });         
});

Is there a clean way to show a notification on the target page after redirect?

Thanks for your help.

Answer 1

index.html needs some way to know that the form was sent. You could do it by using an url parameter or hash and reading it with js.

//after submit
window.location.href = '../index.html#success';

//in index.html
if(window.location.hash == '#success')
{
    //show the notification
}