У меня две формы на одной странице html. Форма входа и форма регистра
Я хочу иметь возможность переключаться между формами, когда я нажимаю кнопку «span»
Страница должна загружаться только с формой входа в систему, но как кнопки входа и регистрации «span» в верхней части
Когда я нажимаю логин, я хочу, чтобы форма входа в систему «спряталась» и форма регистра должна отображаться, и наоборот.
вот код, который у меня есть до сих пор:
<!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> Благодаря!
useExtending из ответа Эрика Соузы. Вы также можете добавить атрибут 'formnovalidate' в форму, которую вы не хотите проверять. Это приведет к тому, что одна форма будет проверяться на отправке, а не на другую. По моему опыту, вы не можете просто скрыть одну форму и подтвердить другую. Когда кнопка submit будет пытаться проверить обе формы.
Эта идея может выглядеть так:
$("#toggle-login").click(function(){ $("#register").hide().attr("formnovalidate"); $("#login").toggle(); }); $("#toggle-register").click(function(){ $("#login").hide().attr("formnovalidate"); $("#register").toggle(); });в$("#toggle-login").click(function(){ $("#register").hide().attr("formnovalidate"); $("#login").toggle(); }); $("#toggle-register").click(function(){ $("#login").hide().attr("formnovalidate"); $("#register").toggle(); });
Чтобы заставить поведение элементов при загрузке страницы использовать этот базовый обработчик:
$("document").ready(function(){ $("#register").hide(); };
Это должно делать свое дело. Или в вашем css-документе вы можете использовать отображение атрибута: none;