3 Replies - 1680 Views - Last Post: 12 March 2014 - 09:46 AM

#1 Bivcala  Icon User is offline

  • New D.I.C Head

Reputation: -2
  • View blog
  • Posts: 31
  • Joined: 23-November 11

How can I hide a form within a web application until a button is click

Posted 12 March 2014 - 07:24 AM

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="[email protected]"/> 
                                </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>

This post has been edited by Bivcala: 12 March 2014 - 07:31 AM


Is This A Good Question/Topic? 0
  • +

Replies To: How can I hide a form within a web application until a button is click

#2 laytonsdad  Icon User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: How can I hide a form within a web application until a button is click

Posted 12 March 2014 - 09:28 AM

I don't see any code where you are displaying your sign up form.
Was This Post Helpful? 0
  • +
  • -

#3 Bivcala  Icon User is offline

  • New D.I.C Head

Reputation: -2
  • View blog
  • Posts: 31
  • Joined: 23-November 11

Re: How can I hide a form within a web application until a button is click

Posted 12 March 2014 - 09:36 AM

View Postlaytonsdad, on 12 March 2014 - 09:28 AM, said:

I don't see any code where you are displaying your sign up form.


Hi here's the full updated post:


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/...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="[email protected]"/> 
                                </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);
    }
}

Was This Post Helpful? 0
  • +
  • -

#4 laytonsdad  Icon User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: How can I hide a form within a web application until a button is click

Posted 12 March 2014 - 09:46 AM

Have a look at this example of transition.

Spoiler


This example uses jquery to add a class that chages the opacity in one second via a transition set in the original rule.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1