2017-09-01 26 views
0

我正在創建一個基於laravel的網站,我有一個登錄表單,當我按「註冊」時,我想用註冊表單進行切換,但它不工作。以下是碼。 home.js:無法在laravel中切換登錄和註冊表單

$('.message a').click(function(){ 
    $('form').animate({height: "toggle", opacity: "toggle"}, "slow"); 
}); 

home.blade.php

<html> 
    <head> 
     <title> AgroHelp Login</title> 
     <link href="{{asset('css/home.css')}}" rel="stylesheet" /> 
     <script src="js/home.js"></script> 
    </head> 
    <body> 
    <div class="login-page"> 
        <div class="form"> 
          <form class="register-form"> 
            <input type="text" placeholder="name"/> 
            <input type="password" placeholder="password"/> 
            <input type="text" placeholder="email address"/> 
              <button>create</button> 
            <p class="message">Already registered? <a href="#">Sign In</a></p> 
          </form> 
          <form class="login-form"> 
            <input type="text" placeholder="username"/> 
            <input type="password" placeholder="password"/> 
              <button>login</button> 
            <p class="message">Not registered? <a href="#">Create an account</a></p> 
          </form> 
        </div> 
    </div> 
    </body> 





    </html> 

home.js公共/ JS/home.js

回答

0

試試這個

<html> 
    <head> 
     <title> AgroHelp Login</title> 
     <link href="{{asset('css/home.css')}}" rel="stylesheet" /> 
     <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> //** Add jQuery 
     <script src="js/home.js"></script> 
    </head> 

    <body> 
     <div class="login-page"> 
      <div class="form"> 
       <form class="register-form"> 
        <input type="text" placeholder="name" /> 
        <input type="password" placeholder="password" /> 
        <input type="text" placeholder="email address" /> 
        <button>create</button> 
        <p class="message">Already registered? <a href="#">Sign In</a> 
        </p> 
       </form> 
       <form class="login-form" id="loginID"> //******* add ID 
        <input type="text" placeholder="username" /> 
        <input type="password" placeholder="password" /> 
        <button>login</button> 
        <p class="message">Not registered? <a href="#">Create an account</a> 
        </p> 
       </form> 
      </div> 
     </div> 
    </body>  //** Missed the closing tag 
</html> 

添加這對你home.js文件

#loginID{ 
    display:none; 
} 

工作的代碼片段

$('.message a').click(function(){ 
 
    $('form').animate({height: "toggle", opacity: "toggle"}, "slow"); 
 
});
#loginID{ 
 
    display:none; 
 
}
<html> 
 
<head> 
 
    <title> AgroHelp Login</title> 
 
    <link href="{{asset('css/home.css')}}" rel="stylesheet" /> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
    <script src="js/home.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="login-page"> 
 
     <div class="form"> 
 
      <form class="register-form"> 
 
       <input type="text" placeholder="name" /> 
 
       <input type="password" placeholder="password" /> 
 
       <input type="text" placeholder="email address" /> 
 
       <button>create</button> 
 
       <p class="message">Already registered? <a href="#">Sign In</a> 
 
       </p> 
 
      </form> 
 
      <form class="login-form" id="loginID"> 
 
       <input type="text" placeholder="username" /> 
 
       <input type="password" placeholder="password" /> 
 
       <button>login</button> 
 
       <p class="message">Not registered? <a href="#">Create an account</a> 
 
       </p> 
 
      </form> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

+0

正是在code.Here被missing.this是不prbolem.But不管怎麼說,還是要謝謝你。 –

+0

更新了代碼。現在檢查。 –

+0

不工作。代碼是好的,我認爲在codepen中,因爲io工作。但在laravel結構中是我想的問題。 –

0
<div class="login-page"> 
        <div class="form"> 
         <form id="a" class="register-form"> 
            <input type="text" placeholder="name"/> 
            <input type="password" placeholder="password"/> 
            <input type="text" placeholder="email address"/> 
              <button>create</button> 
            <p class="login">Not registered? <a href="#">Create an account</a></p> 
          </form> 
         <form id="b" class="login-form"> 
            <input type="text" placeholder="username"/> 
            <input type="password" placeholder="password"/> 
              <button>login</button> 
              <p class="register">Already registered? <a href="#">Sign In</a></p> 

          </form> 
        </div> 
    </div> 

這裏有腳本

$(document).ready(function() { 

     $('.register-form').hide(); 
     $('.login-form').show(); 

     $('.register').click(function() { 
      $('.register-form').show(); 
      $('.login-form').hide(); 
     }); 
     $('.login').click(function() { 
      $('.register-form').hide(); 
      $('.login-form').show(); 
     }); 
    });