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. I've used the CSS from this tutorial

http://tympanus.net/codrops/2012/03/27/login-and-registration-form-with-html5-and-css3/

However, I am trying to implement the CSS in to login form and a signup form in to my JSP file I've downloaded all the CSS files required but for some reason the effects aren't taking place for when signup button is clicked

Here is the code for 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/SignUpServlet" 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>

In the CSS file animate-custome I am hiding the second form by setting the opasity to 0 as follows

#register{  
    z-index: 21;
    opacity: 0;
}

The login form has a z-index of 22 and therefore I've made the register form to have a z-index of 22 to put it under the login form.

So this is what should happen : when the Join us button is clicked , this should trigger the #toregister. the animation is done by using the sibling selector ~ to find the #register element.then I used use an animation called fadeInLeft. Since the form is hidden using zero opacity, I used an animation that fades in, to make it appear.

Here's the CSS code block where this animation take place:

.animate{
    animation-duration: 0.5s;
    animation-timing-function: ease;
    animation-fill-mode: both;
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

Recommended Answers

All 3 Replies

THe first thing that comes to mind is that when you have some type of link or button on your screen, if you want it to open a popup or show a div, you have to prevent its default behavior since clicking on these types of elements will cause a post back by default.

Say you have an anchor elemnet that you want to use to show a div. Then you would do something like this in jQuery..

$('#register').click(function(event){
    event.preventDefault(); 
    $('#popUp').show();
})

hi where is the best place to put this?

It was just an example. I'd have to really inspect your HTML to figure out the exact code and where to place it. I didnt have time for that today. sorry.

The point is that if you are using elements that cause a page to reload, you need to prevent that behavior so that you can show/unhide a div containing your signup form.

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.