簡體   English   中英

無法在Laravel中切換登錄和注冊表格

[英]Can't switch login and register form in laravel

我正在建立一個基於laravel的網站,我有一個登錄表單,當我按“注冊”時,我想用注冊表單進行切換,但是它不起作用。這是代碼。 home.js:

$('.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位於public / js / home.js中

嘗試這個

<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> 

<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();
        });
    });

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM