我在同一页面中有两个表单,单击图标上的单击登录消失时会出现一个形式,并且登录出现。我正在使用Spring MVC,因此我想要在输入/注册切换表单工作的功能时。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Login Form</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"
href="../static/css/reset.css"/>
<link rel='stylesheet prefetch'
href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900|RobotoDraft:400,100,300,500,700,900'/>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'/>
<!--<link rel="stylesheet" href="../static/css/style.css"/>-->
<link rel="stylesheet" th:href="@{/css/style.css}"
href="../static/css/style.css"/>
</head>
<body>
<!-- Mixins-->
<!-- Pen Title-->
<div class="container">
<div class="card"></div>
<div class="card">
<h1 class="title">Login</h1>
<form action="login" th:action="@{/login}" th:object="${login}" method="post" >
<div class="input-container">
<input type="email" id="email" th:field="*{email}" required="required"/>
<label for="email">email</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="password" id="Password" th:field="*{password}" required="required"/>
<label for="Password">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button type="submit" name="action" value="login"><span>Go</span></button>
</div>
<div class="footer"><a href="#">Forgot your password?</a></div>
</form>
</div>
<div class="card alt">
<div class="toggle"></div>
<h1 class="title">Register
<div class="close"></div>
</h1>
<form action="register" th:action="@{/register}" th:object="${register}" method="post">
<div class="input-container">
<input type="text" id="firstName" th:field="*{firstName}" required="required"/>
<label for="firstName">First Name</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="text" id="lastName" th:field="*{lastName}" required="required"/>
<label for="lastName">Last Name</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="email" id="email_" th:field="*{email}" required="required"/>
<label for="email">Email</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="password" id="Password_" th:field="*{password}" required="required"/>
<label for="Password">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button type="submit" name="action" value="register"><span>Next</span></button>
</div>
</form>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script th:src="@{/js/index.js}"></script>
</body>
</html>
JavaScript代码:
$('.toggle').on('click', function() {
$('.container').stop().addClass('active');
});
$('.close').on('click', function() {
$('.container').stop().removeClass('active');
});
我想要输入/注册时检索注册表单而不是登录表
做到这一点的一种方法是创建将返回参数的/register 控制器:
@RequestMapping("/register")
public ModelAndView register() {
ModelAndView mv = new ModelAndView("your_form_page")
mv.addObject("isRegister", true);
return mv;
}
然后,您可以添加一个隐藏的字段并在JavaScript中使用它来切换DIVS:
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:th="http://www.thymeleaf.org">
<head>
<!-- imports omitted -->
<script type="text/javascript">
$(document).ready(function () {
if ($("#isRegister").val()) {
$("#register").show();
$("#signUp").hide();
} else {
$("#register").hide();
$("#signUp").show();
}
});
</script>
</head>
<body>
<input id="isRegister" type="hidden" th:value="${isRegister}" disabled="disabled"/>
<div id="signUp">
Sign Up Form
</div>
<div id="register">
Register Form
</div>
</body>
</html>
当然,您可以将JavaScript件的代码移至您的" .js"文件。这里重要的是要拥有可以在JavaScript中访问的隐藏输入字段,以切换Divs。