[英]How can I hide a form within a web application until a button is clicked for login and register purposes
我有一個登錄jsp頁面，用戶可以在其中登錄我的Web應用程序，還有一個注冊表單，如果用戶不是成員，則可以在其中注冊。 我正在嘗試在一個名為login.jsp的JSP中進行登錄和注冊表單。 登錄部分工作正常，但是，當用戶單擊注冊按鈕時，我無法顯示注冊表單。
這是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>« 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>
使用javascript從display: none;切換div的css display: none; display: block;
<script>function unhideDiv()
{
document.getElementById('divid').style = "display: block;";
}
</script>
<div style='display: none;' id='divid'>...</div>
<input type='button' onClick='unhideDiv()' />
或查找更高級的jquery方法。 他們現在有了div-popups和所有東西。
當單擊登錄按鈕並且登錄表單折疊時，如何隱藏注冊表？
[英]How can i make the register form hide when the login button is clicked and the login form collapse vice versa
如何修改我的 php 文件，以便成功登錄/注冊時的登錄和注冊按鈕？
[英]How can I modify my php file so that the login and register button on successful login / register?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.