TL;DR – Learn how to implement an unsaved changes prompt in JSP forms to prevent data loss and enhance user experience. Step-by-step guide included everything about it.
In web applications with Java; especially with JSP (Java Server Pages) code, it is common for users to interact with forms and navigate across different pages by filling up required form details. But Sometimes, when users change a form and attempt to navigate away without saving accidentally or intentionally, it can lead to frustration and data loss for the user. To address this situation correctly, we can implement a solution that prompts users with a message before leaving the page if there are unsaved changes.
In this article, We will explore how to achieve such functionality using JavaServer Pages (JSP) and JavaScript effortlessly.
Detecting Changes with JavaScript in JSP file (unsaved changes prompt)
To begin with coding, we will use JavaScript to detect changes in the form. We need to create a function markFormAsChanged() that will set a formChanged flag to true whenever a form field is modified or the user changes values to respective input fields. This BOOLEAN flag will serve as an indicator that the form has been modified.
In case if you have any questions, feel free to write me your questions on Medium.
<script>
var formChanged = false;
function markFormAsChanged() {
formChanged = true;
}
function checkFormChanges() {
if (formChanged) {
var confirmation = confirm("You have unsaved changes. Do you really want to leave?");
if (confirmation) {
formChanged = false; //<---- Reset the flag if the user chooses to leave
}
return confirmation;
}
return true;
}
</script> Implementing the Unsaved Changes Prompt
We need to integrate the markFormAsChanged() function into form fields using the onchange attribute, If you want to use it with onKeyUp event — You should manage another boolean variable, to update this boolean only once and not again and again.
onchange event ensures that the formChanged flag is set to true whenever a user modifies an input field. Please note that, we implement a checkFormChanges() function which will be triggered only when the user attempts to navigate away from the page or try to close the window with modified changes. This function displays a confirmation dialog if there are unsaved changes, preventing the user from accidentally leaving the page, or closing the browser tab by mistake.
<body onbeforeunload="return checkFormChanges();">
<form id="myForm" action="processForm.jsp" method="post">
<!-- Your form fields go here -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" onchange="markFormAsChanged()">
<!-- Add other form fields as needed -->
</form>
<div>
<!-- Your menu bar with links to other pages -->
<a href="otherPage.jsp" onclick="return checkFormChanges();">Go to Other Page</a>
<!-- Add other menu items as needed -->
</div>
</body> 
In case, you don't want ‘leave site’ browser prompt as shown above, you should modify your code as per given below approach:
To achieve this functionality in a JSP (JavaServer Pages) application, you can use JavaScript to detect changes in the form fields and prompt the user if they attempt to navigate away without saving. Below is an example code snippet demonstrating how to implement this:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Form with Navigation Confirmation</title>
<script type="text/javascript">
var formChanged = false;
function setFormChanged() {
formChanged = true;
}
function checkFormChanges() {
if (formChanged) {
var confirmation = confirm("You have unsaved changes. Are you sure you want to leave?");
if (confirmation) {
formChanged = false;
}
return confirmation;
}
return true;
}
</script>
</head>
<body>
<form oninput="setFormChanged();">
<!-- Your form fields go here -->
<label for="inputField">Input Field:</label>
<input type="text" id="inputField" name="inputField" />
<!-- Other form fields -->
<button type="button" onclick="checkFormChanges()">Save Changes</button>
</form>
<div>
<!-- Your menu bar items with navigation links -->
<a href="pageFoo1.jsp" onclick="return checkFormChanges();">Page Foo 1</a>
<a href="pageFoo2.jsp" onclick="return checkFormChanges();">Page Foo 2</a>
<a href="pageFoo3.jsp" onclick="return checkFormChanges();">Page Foo 3</a>
</div>
</body>
</html> Bingo! You did it in the right way! 👏👏👏
This way, the user will be prompted if there are unsaved changes before navigating to another page, or if the user closes a tab by mistake with modified form changes, and then you just need to show your custom prompt or handle further process by yourself. The prompt message will not be the default “leave site” prompt anymore after adding the above-given code.
Wrapping Up…
By incorporating these JS / JavaScript functions into our JSP file, we can provide a better user experience by providing a safeguard against unintentional data loss.
Users are prompted with a message when attempting to leave a page with unsaved changes, allowing them to make informed decisions about whether to proceed or stay on the current page. This is a simple yet effective solution that provides a more user-friendly and reliable web application.
Feel free to share your thoughts below in the comment section.
BeingCoders Publication
Before you leave, Appreciate the Author’s Effort by clapping on their story
Follow the Author to hear back more from him/her
Knowledge shared | knowledge multiplied 
, follow BeingCoders Publication.
Write some feedback or your opinion about the story.
Follow us on Facebook | Twitter | Instagram.
Read More content at Beingcoders.
Discover more from 9Mood
Subscribe to get the latest posts sent to your email.
0 Comments