Javascript 在同一页面上创建注册/登录系统_Javascript_Html

Javascript 在同一页面上创建注册/登录系统

javascript html

Javascript 在同一页面上创建注册/登录系统,javascript,html,Javascript,Html,您好，我正在使用PHP和MySQl在同一页面上创建登录/注册系统。我在使用post方法和操作时遇到问题，因为它在同一页面上。有人知道我如何解决这个问题。下面是我的登录和注册/注册系统代码。页面使用JavaScript用滑块分隔，我的问题是我无法使用Post方法和操作将表单保存在数据库中 <html>  <title>Envision: Login/Regis

您好，我正在使用PHP和MySQl在同一页面上创建登录/注册系统。我在使用post方法和操作时遇到问题，因为它在同一页面上。有人知道我如何解决这个问题。下面是我的登录和注册/注册系统代码。页面使用JavaScript用滑块分隔，我的问题是我无法使用Post方法和操作将表单保存在数据库中


<html>
    <!--WEB-APP Login / Register Page Title-->
    <title>Envision: Login/Register</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--External styling CSS / Font-Family Style / Swiper CSS-->
    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Product+Sans' rel='stylesheet' type='text/css'>
    <!--Custom Styling CSS-->
    <link rel="stylesheet" type="text/css" href="CSS/Access.css">
    <!--Font Awesome Script -->
    <script src="https://kit.fontawesome.com/26011c24ac.js" crossorigin="anonymous"></script>
    <!--Custom js script-->
    <script defer src="js/Custom_JS/log_slider.js"></script>
    <script defer src="js/Custom_JS/selector.js"></script>
</html>

<body>

<!----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
    <!--Back Button to Landing Page-->
    <div class="back">
        <button onClick="location.href='Main.php'" class="back-btn">
            <i class="fas fa-arrow-alt-circle-left" style="font-size: 36px;">
                 <div class="back_text">
                     Back
                 </div> 
            </i>
        </button>
    </div>
<!----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
    <!--CONTAINER CONTAINS LOGIN / SIGN-UP SECTIONS-->
    <div class="container">
        <!--LOGIN SECTIONS STARTS HERE-->
        <div class="form Login" action="php/check_login.php" method="post">

            <form id="login" class="login_input">
            
                <h2>Login</h2>

                <div class="form_log">
                    <span>
                        Username
                    </span>
                    <input type="text" class="input_field" id="user_username" name="username" placeholder="Input your Username" autocomplete="off">
                    <small>Error message</small>
                </div>

                <div class="form_log">
                    <span>
                        Password
                    </span>
                    <input type="password" class="input_field" id="user_password" name="password" placeholder="Input your Password" autocomplete="off">
                    <small>Error message</small>
                </div>

                <div class="forgot_password">
                    <p>Forgotten you're Password ?</p>
                </div>

                <button class="submit" type="submit">
                    Login
                </button>

            </form>

        </div>
        <!--LOGIN SECTION ENDS HERE-->
<!------------------------------------------------------------------------------------------------------------------------------------------------->
        <!--SLIDER TO TOGGLE BTW LOGIN SECTION AND SIGN-UP SECTION-->
        <div class="slider_form">

            <div class="slider">

                <div class="slide_text user_signup">
                    <h2>
                        Don't have an account ?
                    </h2>

                    <p>
                        Sign-Up and get instant access to Envision skill & personal competency project management web-application
                    </p>
                </div>

                <div class="slide_text user_login">
                    <h2>
                        Already have an Account ?
                    </h2>

                    <p>
                        Login and get access to your projects !
                    </p>
                </div>

                <div class="slide_btn">
                    <span class="user_signup">Sign-up</span>
                    <span class="user_login">Login</span>
                </div>

            </div>
            <!--SLIDER ENDS HERE-->
<!------------------------------------------------------------------------------------------------------------------------------------------------->
            <!--SIGN-UP SECTIONS STARTS HERE-->
            <div class="form Signup">

                <form id="signup" class="signup_input" method="post" >
            
                    <h2>
                        Sign-up
                    </h2>
        
                    <div class="form_signup">
                        <span>
                            Username
                        </span>
                        <input type="text" class="input_field" id="username" name="username" placeholder="Enter Username" autocomplete="off">
                        <small>Error message</small>
                    </div>

                    <div class="form_signup">
                        <span>
                            Email Address
                        </span>
                        <input type="email" class="input_field" id="email" name="email" placeholder="Enter Email Address" autocomplete="off">
                        <small>Error message</small>
                    </div>
        
                    <div class="form_signup">
                        <span>
                            Password
                        </span>
                        <input type="password" class="input_field" id="password_1" name="password_1" placeholder="Enter Password" autocomplete="off">
                        <small>Error message</small>
                    </div>

                    <div class="form_signup">
                        <span>
                            Confrim Password
                        </span>
                        <input type="password" class="input_field" id="password_2" name="password_2" placeholder="Confirm Password" autocomplete="off">
                        <small>Error message</small>
                    </div>
                    
                    <div class="role_title">
                        <h4>Select User Type: </h4>
                    </div>
                    
                    <label class="reg_selector">
                        <select name="role">
                            <option selected value="manager">Manager</option>
                            <option value="staff">Staff</option>
                        </select>
                    </label>
        
                    <button type="submit" class="submit">
                        Sign-Up
                    </button>
        
                </form>

            </div>
            <!--SIGN-UP SECTION ENDS HERE-->
        </div>
<!------------------------------------------------------------------------------------------------------------------------------------------------->        
    </div>
    
</body> ``


设想：登录/注册
返回
登录
用户名
错误消息
密码
错误消息
忘记你的密码了吗
登录
你没有账户吗？

注册并立即访问Envision skill&personal competency project management web应用程序

已经有账户了吗？

登录并访问您的项目！

报名
登录
报名
用户名
错误消息
电子邮件地址
错误消息
密码
错误消息
密码
错误消息
选择用户类型：
经理
工作人员
报名
``

您的登录表单中的

操作

属性放错了位置，并且在注册时丢失。它应该在

表单中

标签中

<!--LOGIN SECTIONS STARTS HERE-->
        <div class="form Login" >

            <form id="login" class="login_input" action="php/check_login.php" method="post">
            
                <h2>Login</h2>

                <div class="form_log">
                    <span>
                        Username
                    </span>
                    <input type="text" class="input_field" id="user_username" name="username" placeholder="Input your Username" autocomplete="off">
                    <small>Error message</small>
                </div>

                <div class="form_log">
                    <span>
                        Password
                    </span>
                    <input type="password" class="input_field" id="user_password" name="password" placeholder="Input your Password" autocomplete="off">
                    <small>Error message</small>
                </div>

                <div class="forgot_password">
                    <p>Forgotten you're Password ?</p>
                </div>

                <button class="submit" type="submit">
                    Login
                </button>

            </form>

        </div>
        <!--LOGIN SECTION ENDS HERE-->

在上面的示例中，处理注册和登录的脚本将在两个单独的脚本上完成

check_login.php

和

signup.php

。请使用负责管理注册和登录的脚本的实际位置更改

操作

属性

您可以提供按钮的

name=“register”

和

name=“login”

。然后在php中检查这些值是否已设置。这会让你区分登录帖子和注册帖子。谢谢你的澄清。欢迎你。我希望这回答了你的问题，你能够解决这个问题。

<!--SIGN-UP SECTIONS STARTS HERE-->
            <div class="form Signup">

                <form id="signup" class="signup_input" method="post" action="php/signup.php" >
            
                    <h2>
                        Sign-up
                    </h2>
        
                    <div class="form_signup">
                        <span>
                            Username
                        </span>
                        <input type="text" class="input_field" id="username" name="username" placeholder="Enter Username" autocomplete="off">
                        <small>Error message</small>
                    </div>

                    <div class="form_signup">
                        <span>
                            Email Address
                        </span>
                        <input type="email" class="input_field" id="email" name="email" placeholder="Enter Email Address" autocomplete="off">
                        <small>Error message</small>
                    </div>
        
                    <div class="form_signup">
                        <span>
                            Password
                        </span>
                        <input type="password" class="input_field" id="password_1" name="password_1" placeholder="Enter Password" autocomplete="off">
                        <small>Error message</small>
                    </div>

                    <div class="form_signup">
                        <span>
                            Confrim Password
                        </span>
                        <input type="password" class="input_field" id="password_2" name="password_2" placeholder="Confirm Password" autocomplete="off">
                        <small>Error message</small>
                    </div>
                    
                    <div class="role_title">
                        <h4>Select User Type: </h4>
                    </div>
                    
                    <label class="reg_selector">
                        <select name="role">
                            <option selected value="manager">Manager</option>
                            <option value="staff">Staff</option>
                        </select>
                    </label>
        
                    <button type="submit" class="submit">
                        Sign-Up
                    </button>
        
                </form>

            </div>
            <!--SIGN-UP SECTION ENDS HERE-->