How can I make Div elements disappear based on conditions using If/else Statements in a JSP Page?

I've implemented a JSP function that manages user login by verifying their name and password input. However, even if the user enters incorrect information, they can still view the page. I want to hide all content on the page so that the user cannot see it while a countdown timer redirects them.

I'm unsure of how to achieve this within an if/else statement in JSP.

Below is the relevant section of JSP code along with the divs I need to hide:

<body id="Body">
    <%@ page import ="java.sql.*" %><%@ page import ="javax.sql.*" %><%String user = request.getParameter("userid");
        session.putValue("userid", user);
        String pwd = request.getParameter("pwd");
        Class.forName("com.mysql.jdbc.Driver");
        java.sql.Connection con = DriverManager.getConnection("jdbc:mysql://localhost:8081/socusers", "root", "");
        Statement st = con.createStatement();
        ResultSet rs = st.executeQuery("select * from users where user_id='" + user + "'");
        String message = "";
        if (rs.next()) {
            if (rs.getString(2).equals(pwd)) {
                message = "Welcome " + user;
            } else {
                message = "Invalid password try again";
                //Redirect after 3 seconds back to login and hide all divs
            }
        } else {
            message = "Invalid user try again";
            //Redirect after 3 seconds back to login and hide all divs
        }
        out.println(message);


    %>

<center>
    <div class="container chat-signin">
        <form class="form-signin">
            <h2><i>NCI Soc Talk</i></h2>
            <label for="nickname">Enter Nickname:</label> <input type="text" placeholder="Nickname" id="nickname">
            <div>
                <label for="chatroom">Select Chatroom</label> <select size="1" id="chatroom">
                    <option value="1">Gaming Soc</option>
                    <option value="2">Pokemon Soc</option>
                    <option value="3">Fashion Soc</option>
                    <option value="4">Other Soc</option>
                </select>
            </div>
            <button type="submit" id="enterRoom">Sign in</button>
        </form>
    </div>

    <div class="container chat-wrapper">
        <form id="do-chat">
            <h2></h2>
            <h4></h4>
            <table id="response" ></table>
            <fieldset>
                <legend>Enter your message..</legend>
                <div>
                    <input type="text" placeholder="Your message..." id="message" style="height:60px; width:1000px;"/>
                    <br />
                    <input type="submit" value="Send message" />
                    <button type="button" id="Exit-room">Exit Room</button>
                </div>
            </fieldset>
        </form>
    </div>
</center>

Answer №1

To conditionally set an attribute in the request using if/else, you can use request.setAttribute("hide", true). For JavaScript implementation with jQuery, upon page load, check the value of the specified attribute.

<script>
  $(document).ready(function(){
    if('${hide}' == 'true')
    {
           //Hide all contents here
    }
  });
</script>

Alternatively, you can hide the divs by default and then dynamically show them based on certain conditions.

Answer №2

Try using this script.

<script>
  $(document).ready(function(){
    if('${hide}' === 'true')
    {
           //redirect to a different webpage
           window.location = "http://www.google.com";
    }
    else
   {
           //redirect to another site
           window.location = "http://www.yahoo.com";    
    }
  });
 </script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Could LXML potentially determine the value of a class in HTML?

For instance, consider the following scenario: <button class="oW_lN oF4XW sqdOP yWX7d _8A5w5 ">MyTextIsHere</button> The "MyTextIsHere" part of the code can contain only two specific values: "Yes" and "No". Is it feasible to determine wh ...

css3 animation keyframes timing function is exclusive to chrome

After creating a preloader animation using CSS3, I noticed that it only functions properly on Chrome. On all other browsers, the animation works, but the timing for the middle bar is delayed, throwing off the entire animation. I'm puzzled because all ...

Attempting to implement a conventional ajax request within Zend Framework 2

Tasked with integrating a file uploader into a Zend Framework 2 project, I find myself facing challenges as a beginner in this field. The project's structure deviates from the familiar Zend Skeleton Application layout, lacking a module.config file an ...

Excel's VBa cannot locate the table within the innerHTML of IE

My current dilemma involves attempting to extract a table from a webpage. The issue is that copying the entire page is not feasible due to buttons and dynamic elements causing a memory overload when pasted into Excel. To work around this, I am trying to ex ...

Stop jQuery Tab from Initiating Transition Effect on Current Tab

Currently, I am utilizing jQuery tabs that have a slide effect whenever you click on them. My query is: How can one prevent the slide effect from occurring on the active tab if it is clicked again? Below is the snippet of my jQUery code: $(document).read ...

Discovering data attributes in Dojo and the Dojo counterpart to jQuery's $(this)

Hello everyone, I need help extracting the value from a specific element. The data attribute in question is named data-lang, and here's an example of it: <p class="mainText" data-lang="es">Welcome</p> Below is my current code using Dojo ...

Neglect the styling of the element wrapper

Imagine I have two divs set up like so: <div name="parent" style="color:blue;padding:5px"> <div name="child" style="background:red"> Text that disregards the color:blue and padding:5px properties, yet still follows the background:red set ...

Issues with PHP code not displaying properly in HTML email design

I am struggling to understand why some of my PHP code is not rendering correctly in an HTML email that I am working on. The following is an excerpt from the code (with most of the HTML elements removed): $messaget = " <html> <head> <title&g ...

Having trouble getting the jquery ui datetimepicker to function properly in my node.js application using ejs and express

I am currently trying to implement the functionality found at this link: Below is an excerpt of my code: <html> <head> <script src="http://trentrichardson.com/examples/timepicker/js/jquery-1.7.1.min.js"> </script> < ...

Tips for navigating between slides on a CSS carousel?

I am currently in the process of creating a CSS-based carousel .carousel { -webkit-scroll-snap-type: x mandatory; -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overflow-x: scro ...

The functionality of the button ceases to work once a div is loaded using

Having trouble with two divs on my page: a main div and a secondary div that loads separate HTML content using Ajax. The links within the main div work fine, but jQuery outside of this section is not functioning (like the navigation). Check out my jQuery ...

Ways to shorten text on mobile screens using CSS

Is it possible to use CSS to truncate text based on the current screen size or media queries? For example, consider this paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta tortor vitae nisl tincidunt varius. Lorem ipsum dolor ...

apply styling to the placeholder with CSS

I have been attempting to customize the styling of the placeholder text. After setting the color to red within the input class, I did not see any changes. Even after conducting research and referring to this link Styling the placeholder in a TextField, I w ...

Implement the geocomplete feature following an ajax event

When I click a button, it adds an input box for entering an address. To assist with auto-completion of the address, I'm using the geocomplete plugin. However, I've noticed that the geocomplete functionality only works on input boxes generated wit ...

Is there a way for me to choose the item from the search dropdown so that it fills in the search input field automatically?

Upon typing a word into the search input field, a list of suggestions will appear below. https://i.sstatic.net/etOBI.png Is there a way for me to select a word from the list like Maine (ME) and have it automatically fill the search input field? What chan ...

Issues with Cross-origin resource sharing (CORS) arise when attempting to delete data using Angular

I am facing an issue with my Angular app (v1.13.15) and Express.js(v4.12.4) backend. Specifically, I have set up a DELETE method in my backend and enabled CORS support for it. However, every time I attempt to use the Angular $http.delete function, I enco ...

Sequential queuing of transitions in CSS3

Is it possible to queue CSS transitions with the same properties? My goal is to translate an element to a specific position (with a transition duration of 0) before translating it again. For example, in this mockup, clicking "move" should move the box 100 ...

Spacing among the cells within a table

Is there a method to add some spacing between cells in a table? I have a custom table implemented using the following structure: <div class="table"> <div class="tr"> <div class="td">asdf</div> <div class="td ...

Tips for ensuring the correct size of images and their captions within a figure element

I'm struggling with the CSS for an image inside a figure. Here is the HTML: #content figure { display: inline-block; border: 1px solid #333333; height: 200px; margin: 10px; } #content img { height: 180px; background-size: auto 100%; b ...

Fade between two elements using jQuery

Can someone assist me with adding a fade effect between elements in my code? Any advice or suggestions would be greatly appreciated! $("#example p:first").css("display", "block"); jQuery.fn.timer = function() { if(!$(this).children("p:last-child").i ...