I have a login jsp page where users can login in to my web application, I have also a sign Up form where user can register if they are not members. I'm trying to do the login and sign up forms in one JSP called login.jsp. Login part works fine However, I am unable to display the sign up form when a user clicks on the signup button.

Here is the login.jsp:

<%@page import="java.util.Enumeration"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6 lt8"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7 lt8"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8 lt8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

<head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Login and Registration Form with HTML5 and CSS3" />
        <meta name="keywords" content="html5, css3, form, switch, animation, :target, pseudo-class" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style3.css" />
        <link rel="stylesheet" type="text/css" href="css/animate-custom.css" />

<script type="text/javascript">
    function submit(){
         if(validateForm()) {
        document.loginForm.submit();
         }
    }
    function checkSubmit(e)
    {
       if(e && e.keyCode == 13)
       {
          document.forms[0].submit();
       }
    }


    function validateForm()
    {


    var c=document.forms["loginForm"]["name"].value;
    if (c==null || c=="")
      {
      alert("Username must be filled out");
      return false;
      }
    var d=document.forms["loginForm"]["password"].value;
    if (d==null || d=="")
      {
      alert("Password must be filled out");
      return false;
      }

    return true;
    }


</script>
</head>

<body>

 <div class="container">
            <!-- Codrops top bar -->
            <div class="codrops-top">
                <a href="">
                    <strong>&laquo; Previous Demo: </strong>Responsive Content Navigator
                </a>
                <span class="right">
                    <a href=" http://tympanus.net/codrops/2012/03/27/login-and-registration-form-with-html5-and-css3/">
                        <strong>Back to the Codrops Article</strong>
                    </a>
                </span>
                <div class="clr"></div>
            </div><!--/ Codrops top bar -->
            <header>
                <h1> Login to view Cricket Fixtures and scores</h1>
                <nav class="codrops-demos">
                    <a href="index.html">Demo 1</a>
                    <a href="index2.html">Demo 2</a>
                    <a href="/CricketWebApplication/jsp/login.jsp" class="current-demo">Demo 3</a> <!-- index.html3 b4 need to change to login.jsp -->
                </nav>
            </header>
            <section>               
                <div id="container_demo" >
                    <!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  -->
                    <a class="hiddenanchor" id="toregister"></a>
                    <a class="hiddenanchor" id="tologin"></a>
                    <div id="wrapper">
                        <div id="login" class="animate form">
                            <form method="get" id = "loginForm" name="loginForm" action="/CricketWebApplication/LoginServlet" autocomplete="on"> 
                                <h1>Log in</h1> 
                                <p> 
                                    <label for="username" class="uname" data-icon="u" > Your  username </label>
                                    <input id="username" name="name" onKeyPress="javascript:return checkSubmit(event)"/>
                                </p>
                                <p> 
                                    <label for="password" class="youpasswd" data-icon="p"> Your password </label>
                                    <input id="password" name="password" onKeyPress="javascript:return checkSubmit(event)"/> 
                                </p>
                                <p class="keeplogin"> 
                                    <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /> 
                                    <label for="loginkeeping">Keep me logged in</label>
                                </p>
                                <p class="login button"> 
                                    <input type="submit" value="Login" /> 
                                </p>
                                <p class="change_link">
                                    Not a member yet ?
                                    <a href= "" class="to_register">Join us</a>
                                </p>
                            </form>
                        </div>

           <div id="register" class="animate form">
                            <form  action="/CricketWebApplication/LoginServlet" autocomplete="on"> 
                                <h1> Sign up </h1> 
                                <p> 
                                    <label for="usernamesignup" class="uname" data-icon="u">Your username</label>
                                    <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" />
                                </p>
                                <p> 
                                    <label for="emailsignup" class="youmail" data-icon="e" > Your email</label>
                                    <input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="mysupermail@mail.com"/> 
                                </p>
                                <p> 
                                    <label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label>
                                    <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/>
                                </p>
                                <p> 
                                    <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label>
                                    <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/>
                                </p>
                                <p class="signin button"> 
                                    <input type="submit" value="Sign up"/> 
                                </p>
                                <p class="change_link">  
                                    Already a member ?
                                    <a href="#tologin" class="to_register"> Go and log in </a>
                                </p>
                            </form>
                        </div>

                    </div>
                </div>  
            </section>
        </div>



</body>
</html>

Hi,
This is a hide/show div problem.
You can use a javascript function like this:

function diplayHandle(obj)
{
    if(obj.style.diplay == "none")
    {
        obj.style.diplay = "";
    }
    else
    {
        obj.style.diplay = "none";
    }
}

Must make some chnges in your code:

<div id="login" class="animate form" style="display: block;">
 ......
      <p class="change_link">
        Not a member yet ?
        <button class="to_register" onclick = "var obj1 = document.getElementById('register'); var obj2 = document.getElementById('login'); displayHandle(obj2); displayHandle(obj1);">Join us</button>
        </p>
</div>
....
<div id="register" class="animate form" style="display: none;">
.....
 <p class="change_link">
        Already a member ?
        <button class="to_register" onclick="var object = "var obj1 = document.getElementById('register'); var obj2 = document.getElementById('login'); displayHandle(obj2); displayHandle(obj1);"> Go and log in </button>
  </p>
</div>

Thanks for the suggestions but this doesn't seem to work as expected, once sign up is clicked the sign up form doesn't appear as well as this the buttons css styling isn't present.

I give you an ideea, if you want a specific behavior must work yourself at this. I show you just how you can hide and show a form.
Search on internet for what you dont know.

1- put your form in a hidden div(use css to hide it)
2- use jquery or javascript to show it when click a button

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.