搜索
搜索

JS显示和隐藏表单

D. Make 发表于 Dev
22
D.制作

我是JS新手。我有3种形式-寄存器形式，重置形式，登录来源。

<style>
.form .register-form {
  display: none;
}
.form .reset-form {
  display: none;
}
.form .login-form {
}
</style>

在登录表格中，我也有 

<p class="message">Not Registered? <a href="#" id ="alogin">Register.</a></p>
<p class="message">Forgot password? <a href="#" id ="arestore">Reset.</a></p>

应该是，当我按“注册”或“重置”时，我会隐藏“登录表单”并转到“注册/重置”。我也有JS，但无法正常工作。我究竟做错了什么？

    <script>
    $('.message a').click(function(){
   $('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});
    aregister.onclick = function (e){
    e = e || window.event;
    el = e.target || e.srcElement;
    document.getElementById('formregister').style.display = 'block';
    document.getElementById('formlogin').style.display = 'none';
    document.getElementById('formreset').style.display = 'none';
    }
    arestore.onclick = function (e){
    e = e || window.event;
    el = e.target || e.srcElement;
    document.getElementById('formregister').style.display = 'none';
    document.getElementById('formlogin').style.display = 'none';
    document.getElementById('formreset').style.display = 'block';

    }
    alogin.onclick = function (e){
    e = e || window.event;
    el = e.target || e.srcElement;
    document.getElementById('formregister').style.display = 'none';
    document.getElementById('formlogin').style.display = 'block';
    document.getElementById('formreset').style.display = 'none';

    }
    </script>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Loggie - Login</title>

</head>

<style>


@import url(https://fonts.googleapis.com/css?family=Roboto:300);


.login-page {
  width: 360px;
  padding: 8% 0 0;
  margin: auto;
  position: relative; top: 25px; left: 0; right: 0; bottom: 25px;
}
.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
}
.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #5d98cc;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
  background: #397eba;
}
.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
  color: #5d98cc;
  text-decoration: none;
}

.container {
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: 0 auto;
}
.container:before, .container:after {
  content: "";
  display: block;
  clear: both;
}
.container .info {
  margin: 50px auto;
  text-align: center;
}
.container .info h1 {
  margin: 0 0 15px;
  padding: 0;
  font-size: 36px;
  font-weight: 300;
  color: #1a1a1a;
}
.container .info span {
  color: #4d4d4d;
  font-size: 12px;
}
.container .info span a {
  color: #000000;
  text-decoration: none;
}
.container .info span .fa {
  color: #EF3B3A;
}
body {
 font-family: "Roboto", sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}



.form .register-form {
  display: none;
}
.form .reset-form {
  display: none;
}
.form .login-form {
}

</style>


{% extends "header.html" %}


{% block content %}


{% load staticfiles %}
<link rel="stylesheet" href="{% static 'css/accounts.css' %}" type="text/css">



<div class="login-page">
    <div class="form">


      <form class="register-form" method="POST" action="{% url 'signup' %}" id = "formregister">
          {% csrf_token %}
          <input type="text" name="username" placeholder="имя пользователя" required autofocus id="id_username_reg"
          maxlength="150"/>
          <input type="text" name="email" placeholder="email" required id="id_email_reg" maxlength="200" />
          <input type="password" name="password1" placeholder="пароль" required id="id_password1"/>
          <input type="password" name="password2" placeholder="повторите пароль" required id="id_password2"/>
          <button type="submit">создать</button>

          <p class="message">Уже зарегистрированны? <a href="#" id ="alogin">Войти.</a></p>
          <p class="message">Забыли пароль? <a href="#" id ="arestore">Восстановить.</a></p>
      </form>


      <form class="login-form" method="POST" action="{% url 'login' %}" id = "formlogin">
          {% csrf_token %}
          <input type="text" name="username" placeholder="имя пользователя"  for=<input type="text" name="username"
          maxlength="254" autofocus required id="id_username_log" />
          <input type="password" name="password" placeholder="пароль" for=<input type="password" name="password"
          id="id_password_log" required />

          <p style="color: red">{{ error }}</p>

           <button type="submit">войти</button>

           <p class="message">Не зарегистрированны? <a href="#" id ="aregister">Создать аккаунт.</a></p>
           <p class="message">Забыли пароль? <a href="#" id ="arestore">Востановить.</a></p>
      </form>

      <form class="reset-form" method="POST" action="{% url 'reset'%}" id = "formreset">
          {% csrf_token %}
          <input type="text" name="email" placeholder="email" required id="id_email_res" maxlength="200" />
          <button type="submit">Восстановить</button>

          <p class="message">Не зарегистрированны? <a href="#" id ="aregister">Создать аккаунт.</a></p>
          <p class="message">Уже зарегистрированны? <a href="#" id ="alogin">Войти.</a></p>
      </form>
  </div>
</div>




 <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script>
    $('.message a').click(function(){
   $('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});
    aregister.onclick = function (e){
    e = e || window.event;
    el = e.target || e.srcElement;
    document.getElementById('formregister').style.display = 'block';
    document.getElementById('formlogin').style.display = 'none';
    document.getElementById('formreset').style.display = 'none';
    }
    arestore.onclick = function (e){
    e = e || window.event;
    el = e.target || e.srcElement;
    document.getElementById('formregister').style.display = 'none';
    document.getElementById('formlogin').style.display = 'none';
    document.getElementById('formreset').style.display = 'block';

    }
    alogin.onclick = function (e){
    e = e || window.event;
    el = e.target || e.srcElement;
    document.getElementById('formregister').style.display = 'none';
    document.getElementById('formlogin').style.display = 'block';
    document.getElementById('formreset').style.display = 'none';

    }
    </script>
</html>

Kumar_Vikas

我使用for了具有其引用形式的类名。请检查代码。

    $('.message a').click(function(){
       //hide all forms
       $('.form form').addClass('hidden');
       
       //find which form to show
       var form = $(this).attr('for');
       $('.' + form + '').removeClass('hidden');
       
       //$('.' + form + '').animate({height: "toggle", opacity: "toggle"}, "slow");
   });
   
    
.login-page {
  width: 360px;
  padding: 8% 0 0;
  margin: auto;
  position: relative; top: 25px; left: 0; right: 0; bottom: 25px;
}
.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
}
.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #5d98cc;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
  background: #397eba;
}
.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
  color: #5d98cc;
  text-decoration: none;
}

.container {
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: 0 auto;
}
.container:before, .container:after {
  content: "";
  display: block;
  clear: both;
}
.container .info {
  margin: 50px auto;
  text-align: center;
}
.container .info h1 {
  margin: 0 0 15px;
  padding: 0;
  font-size: 36px;
  font-weight: 300;
  color: #1a1a1a;
}
.container .info span {
  color: #4d4d4d;
  font-size: 12px;
}
.container .info span a {
  color: #000000;
  text-decoration: none;
}
.container .info span .fa {
  color: #EF3B3A;
}
body {
 font-family: "Roboto", sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

.hidden{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Loggie - Login</title>

</head>

<div class="login-page">
    <div class="form">


      <form class="login-form" method="POST" action="" id = "formlogin">
          <input type="text" name="username" placeholder="имя пользователя"  for=<input type="text" name="username"
          maxlength="254" autofocus required id="id_username_log" />
          <input type="password" name="password" placeholder="пароль" for=<input type="password" name="password"
          id="id_password_log" required />

          <p style="color: red"></p>

           <button type="submit">войти</button>

           <p class="message">Не зарегистрированны? <a href="#" id ="aregister" for="register-form">Создать аккаунт.</a></p>
           <p class="message">Забыли пароль? <a href="#" id ="arestore" for="reset-form">Востановить.</a></p>
      </form>
      
      <form class="register-form hidden" method="POST" action="" id = "formregister">
          <input type="text" name="username" placeholder="имя пользователя" required autofocus id="id_username_reg"
          maxlength="150"/>
          <input type="text" name="email" placeholder="email" required id="id_email_reg" maxlength="200" />
          <input type="password" name="password1" placeholder="пароль" required id="id_password1"/>
          <input type="password" name="password2" placeholder="повторите пароль" required id="id_password2"/>
          <button type="submit">создать</button>

          <p class="message">Уже зарегистрированны? <a href="#" id ="alogin" for="login-form">Войти.</a></p>
          <p class="message">Забыли пароль? <a href="#" id ="arestore" for="reset-form">Восстановить.</a></p>
      </form>

      <form class="reset-form hidden" method="POST" action="" id = "formreset">
          <input type="text" name="email" placeholder="email" required id="id_email_res" maxlength="200" />
          <button type="submit">Восстановить</button>

          <p class="message">Не зарегистрированны? <a href="#" id ="aregister" for="register-form">Создать аккаунт.</a></p>
          <p class="message">Уже зарегистрированны? <a href="#" id ="alogin" for="login-form">Войти.</a></p>
      </form>
  </div>
</div>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

具有隐藏和显示功能的Java Swing表单菜单

重复隐藏和显示

如何使用按钮和redux隐藏/显示单独的表单？

显示和隐藏javascript

使用jQuery显示/隐藏表单

显示/隐藏JavaScript中的表单

JS隐藏和显示div，刷新后保存

WordPress，表单缓存和显示隐藏div

表单再次显示和隐藏：jQuery

jQuery显示和隐藏

使用CSS和jQuery隐藏/显示表单字段

显示和隐藏内容

cakephp + Jquery：显示和隐藏表单

显示，隐藏和关闭表单

显示/隐藏表单中的按钮

这是内存泄漏吗？Winforms隐藏和显示表单

隐藏和显示Adview

显示/隐藏基于其他表单输入和验证的表单元素的最佳方法？

隐藏和显示表单（面板）

单击显示和隐藏

显示和隐藏图像js

显示和隐藏反应 JS

显示/隐藏/禁用表单输入和 div

使用 JS 显示和隐藏 div

隐藏和显示按钮

JavaScript 使用选择选项隐藏和显示表单

显示和隐藏表单

如何在 HTML 页面中显示和隐藏表单？

显示/隐藏密码表单 JS

TOP 榜单

  1. 1

    计算数据帧R中的字符串频率

  2. 2

    Android Studio Kotlin：提取为常量

  3. 3

    Excel 2016图表将增长与4个参数进行比较

  4. 4

    获取并汇总所有关联的数据

  5. 5

    如何使用Redux-Toolkit重置Redux Store

  6. 6

    http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。

  7. 7

    将加号/减号添加到jQuery菜单

  8. 8

    算术中的c ++常量类型转换

  9. 9

    TYPO3：将 Formhandler 添加到新闻扩展

  10. 10

    TreeMap中的自定义排序

  11. 11

    如何开始为Ubuntu开发

  12. 12

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  13. 13

    无法使用 envoy 访问 .ssh/config

  14. 14

    在Ubuntu和Windows中，触摸板有时会滞后。硬件问题？

  15. 15

    遍历元素数组以每X秒在浏览器上显示

  16. 16

    在Jenkins服务器中使用Selenium和Ruby进行的黄瓜测试失败，但在本地计算机中通过

  17. 17

    警告消息：在matrix（unlist（drop.item），ncol = 10，byrow = TRUE）中：数据长度[16]不是列数的倍数[10]>？

  18. 18

    未捕获的SyntaxError：带有Ajax帖子的意外令牌u

  19. 19

    如何使用tweepy流式传输来自指定用户的推文（仅在该用户发布推文时流式传输）

  20. 20

    尝试在Dell XPS13 9360上安装Windows 7时出错

  21. 21

    如果从DB接收到的值为空，则JMeter JDBC调用将返回该值作为参数名称

热门标签

归档