Implementing Section Navigation and Database Updates in Web Applications

Here's an improved implementation for multi-section navigation:


<script>
   let activePage = 0;
   const pageCount = document.querySelectorAll('.content-page').length;

   function renderCurrentPage() {
       document.querySelectorAll('.content-page').forEach((page, idx) => {
           page.style.display = (idx === activePage) ? 'block' : 'none';
       });
       updateNavControls();
   }

   function updateNavControls() {
       document.getElementById('backBtn').disabled = (activePage === 0);
       document.getElementById('forwardBtn').disabled = (activePage === pageCount - 1);
       document.getElementById('finalActionBtn').style.visibility = 
           (activePage === pageCount - 1) ? 'visible' : 'hidden';
   }

   function navigateForward() {
       if (activePage < pageCount - 1) {
           activePage++;
           renderCurrentPage();
       }
   }

   function navigateBack() {
       if (activePage > 0) {
           activePage--;
           renderCurrentPage();
       }
   }

   window.onload = renderCurrentPage;
</script>

<div class="navigation-controls">
   <button id="backBtn" onclick="navigateBack()" disabled>Previous</button>
   <button id="forwardBtn" onclick="navigateForward()">Next</button>
   <button id="finalActionBtn" style="visibility:hidden">Submit</button>
</div>

Database Update Implementation

Here's the data access layer implementation for updating user assessment results:


public class AssessmentDAO {
    public void updateUserAssessment(int awareness, int sight, 
                                   int hearing, int communication,
                                   String result, String username) {
        try (Connection conn = DBUtil.getConnection();
             PreparedStatement stmt = conn.prepareStatement(
                 "UPDATE user_profiles SET awareness=?, sight=?, " +
                 "hearing=?, communication=?, assessment_result=? " +
                 "WHERE username=?")) {
            
            stmt.setInt(1, awareness);
            stmt.setInt(2, sight);
            stmt.setInt(3, hearing);
            stmt.setInt(4, communication);
            stmt.setString(5, result);
            stmt.setString(6, username);
            stmt.executeUpdate();
            
        } catch (SQLException ex) {
            ex.printStackTrace();
        }
    }
}

JSP page implementation for processing form submisison:


<%
    Assessment assessment = new Assessment();
    String currentUser = (String) session.getAttribute("currentUser");
    
    assessment.setAwarenessLevel(request.getParameter("awareness"));
    assessment.setVisionScore(request.getParameter("vision"));
    assessment.setHearingScore(request.getParameter("hearing"));
    assessment.setCommunicationScore(request.getParameter("communication"));
    assessment.setFinalResult(request.getParameter("result"));

    AssessmentDAO dao = new AssessmentDAO();
    dao.updateUserAssessment(
        assessment.getAwarenessLevel(),
        assessment.getVisionScore(),
        assessment.getHearingScore(),
        assessment.getCommunicationScore(),
        assessment.getFinalResult(),
        currentUser
    );
    
    out.print("<script>alert('Assessment saved successfully!');</script>");
%>

Tags: javascript jquery java JSP database

Posted on Fri, 10 Jul 2026 18:05:26 +0000 by jd2007