How to display alert and confirmation if back browser button has been clicked

Question

I am creating an exam application mainly using php and jquery. At the moment the application has these pages in order to for the user to create an exam:

• Create.php (teacher creates the exam details eg date, time, duration, subject, number of questions, total marks etc)
• QandA.php (teacher creates questions and answers for the exam)
• Marks.php (teacher sets up marks for each correct answer(s) per question)
• Penalty.php (teacher selects whether their exam will contain penalty marks or not)
• Finish.php (simply states that your creation of your exam is complete)

Now the application works fine but there is something I have realized. As this application is run on a browser, the user is able to at anytime click on the Browser back button. This is going to cause big problems because if I am half way in completing the creation of the exam but click on the browser back button, then I will lose my exam creation progress or worse I am able to do one of the pages again. This could mean the database which stores the details will contain a half complete exam or an exam which could contain more information than required.

So this is what I am thinking of doing but I do not know if first of all if it is possible and if it is best practice to do so:

• If user clicks on a back browser button while on any of the 4 pages above (except for finish.php) then a confirmation box appears stating "if you go back to previous page then you will lose all your current progress and be sent to menu page (menu.php)

• If user clicks on OK in the confirmation box, then it will navigate user to the menu.php page and it will also by AJAX navigate to another php page (deleteentry.php) where it will delete the exam details from the database)

• If user clicks on Cancel then they can continue on current page no problem

• If user clicks on back browser button while on finish.php page, then it will display an alert stating "you can't go back, your exax has been sucessfully completed, you will be navigated back to menu page" And all it will do is navigate user to menu.php page and thats it, no ajax to call or anything)

My question then is that

1. Is the above ideas a suitable solution to be able to tackle this problem

2. How should the code can be written to determine when the back browser button has been pressed depending on the page it was pressed on and be able to perform the commands it is able to perform? Also need to know how the AJAX can be written to navigate to deleteentry.php page in background.

Thank You very much

Answer 1

I am going to answer the question in your title:

How to display alert and confirmation if back browser button has been clicked

You can't know if the "back" button was clicked or if the page was refreshed or just page changed ->

The onunload event will handle all of those cases.