HTML jQuery在两种形式之间切换 [英] html jquery toggle between two forms
问题描述
我在单个html页面上有两个表单
登录表单和注册表单
我希望能够在表单之间切换点击核心应答span按钮
页面应该只显示登录表单，但登录和注册span按钮位于顶部
当我点击登录时，我希望登录表单能够隐藏并且可以显示注册表单，反之亦然。
这里是我到目前为止的代码：
<！DOCTYPE html>
< head>
< title>登入表单< / title>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js>< / script>
< / head>
< body>
< span href =＃class =btn btn-defaultid =toggle-login>登录< / span>
< span href =＃class =btn btn-defaultid =toggle-register>注册< / span>
< div id =loginForm>
< form id ='login'action =''method ='post'accept-charset ='UTF-8'>
< fieldset>
<图片>登录< /图例>
< p>< input type =textname =loginvalue =placeholder =studentID>< / p>
< p>< input type =passwordname =passwordvalue =placeholder =Password>< / p>
< p class =submit>< input type =submitname =commitvalue =Login>< / p>
< / fieldset>
< / form>
< / div>
< div id =registerForm>
< form id ='register'action =''method ='post'accept-charset ='UTF-8'>
< fieldset>
< legend>注册< / legend>
< input type ='hidden'name ='submitted'id ='submitted'value ='1'/>
< p>< label for ='username'> UserName *：< / label> < input type ='text'name ='username'id ='username'maxlength =50/>< / p>
< p>< label for ='name'>名字*：< / label> < input type ='text'name ='name'id ='firstName'maxlength =50/>< / p>
< p>< label for ='name'>第二个名称*：< / label> < input type ='text'name ='name'id ='secondNname'maxlength =50/>< / p>
< p>< label for ='email'>电子邮件地址*：< / label> < input type ='text'name ='email'id ='email'maxlength =50/>< / p>
< p>< label for ='password'>密码*：< / label> < input type ='password'name ='password'id ='password'maxlength =50/>< / p>
< input type ='submit'name ='Submit'value ='Submit'/>
< / fieldset>
< / form>
< / div>
< script>
< / script>
< / body>
< / html>
谢谢！
use从Erick Souza的答案中延伸出来。您还可以将formnovalidate属性添加到您不想验证的表单中。这将导致一个表单在提交而不是另一个上进行验证。根据我的经验，您不能简单地隐藏一个表单并验证其他表单。由于提交按钮会尝试验证这两个表单。
这个想法可能如下所示：
点击（函数（）{
$（＃register）。hide（）。attr（formnovalidate）;
$（＃toggle-login）。 （#login）。toggle（）;
}）;
$（＃toggle-register）。click（function（）{
$（＃login）。hide（）。attr（formnovalidate）;
$（＃register）。toggle（）;
}）;
要在页面加载时强制执行元素行为，您应该使用以下基本处理函数：
$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ b};
这应该有所诀窍，或者在您的css文档中您可以使用属性display：无;
I have two forms on a single html page A login form and a Register form
I want to be able to toggle between the forms when i click on the coressponding "span" button
The page should load with just the login form showing but both the login and register "span" buttons at the top
When i click login i want the login form to "hide" and the register form to be shown and vice versa.
here is the code i have so far:
<!DOCTYPE html>
<head>
<title>Login Form</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<span href="#" class="btn btn-default" id="toggle-login">Log in</span>
<span href="#" class="btn btn-default" id="toggle-register">Register</span>
<div id="loginForm">
<form id='login' action='' method='post' accept-charset='UTF-8'>
<fieldset>
<legend>Log In</legend>
<p><input type="text" name="login" value="" placeholder="studentID"></p>
<p><input type="password" name="password" value="" placeholder="Password"></p>
<p class="submit"><input type="submit" name="commit" value="Login"></p>
</fieldset>
</form>
</div>
<div id="registerForm">
<form id='register' action='' method='post' accept-charset='UTF-8'>
<fieldset >
<legend>Register</legend>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<p><label for='username' >UserName*:</label> <input type='text' name='username' id='username' maxlength="50" /></p>
<p><label for='name'>First Name*: </label> <input type='text' name='name' id='firstName' maxlength="50" /></p>
<p><label for='name'>Second Name*: </label> <input type='text' name='name' id='secondNname' maxlength="50" /></p>
<p><label for='email' >Email Address*:</label> <input type='text' name='email' id='email' maxlength="50" /></p>
<p><label for='password' >Password*:</label> <input type='password' name='password' id='password' maxlength="50" /></p>
<input type='submit' name='Submit' value='Submit' />
</fieldset>
</form>
</div>
<script>
</script>
</body>
</html>
Thanks!
useExtending from Erick Souza's answer. You can also add a 'formnovalidate' attribute to the form you don't want to validate. This will cause the one form to validate on submit and not the other. It has been my experience that you can not simply hide one form and validate the other. As the submit button will attempt to validate both forms.
This idea might look like:
$("#toggle-login").click(function(){
$("#register").hide().attr("formnovalidate");
$("#login").toggle();
});
$("#toggle-register").click(function(){
$("#login").hide().attr("formnovalidate");
$("#register").toggle();
});
To force an elements behavior on page load you should use this basic handler:
$("document").ready(function(){
$("#register").hide();
};
That should do the trick. Or in your css doc you can use the attribute display: none;
这篇关于HTML jQuery在两种形式之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
