Javascript/jQuery注册表问题

Javascript/jQuery registration form issues

本文关键字：问题注册表 jQuery Javascript 更新时间：2023-09-26

好吧，我的脚本有问题，不确定问题是什么，我眼中的一切似乎都正常了。但希望你们能知道问题是什么（我还没有让PHP脚本向数据库提交注册，但脚本永远不会返回）

所以问题基本上是，在点击注册按钮后，它什么都不做，没有错误日志，什么都没有显示。

以下是Register.php文件，位于c:''website/@account/Register.php

    <?php
    include("@includes/database.php");
    include("@includes/init.php");
    $x1 = rand(2,15);
    $x2 = rand(1,14);
    //Get Captcha Answer
    $first = $x1;
    $second = $x2;
    $answer = $first + $second;
    if ($user -> LoggedIn())
    {
    header('Location: index.php?page=Dashboard');
    }
    ?>
    <!DOCTYPE html>
    <html class="no-js">
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Business Name | Registration</title>
        <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
        <link href="@assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
        <link href="@assets/css/bootstrap.css" rel="stylesheet" type="text/css">
        <link href="@assets/css/core.css" rel="stylesheet" type="text/css">
        <link href="@assets/css/components.css" rel="stylesheet" type="text/css">
        <link href="@assets/css/colors.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="@assets/js/plugins/loaders/pace.min.js"></script>
        <script type="text/javascript" src="@assets/js/core/libraries/jquery.min.js"></script>
        <script type="text/javascript" src="@assets/js/core/libraries/bootstrap.min.js"></script>
        <script type="text/javascript" src="@assets/js/plugins/loaders/blockui.min.js"></script>
        <script type="text/javascript" src="@assets/js/plugins/forms/styling/uniform.min.js"></script>
        <script type="text/javascript" src="@assets/js/core/app.js"></script>
        <script type="text/javascript" src="@assets/js/pages/login.js"></script>
                <script>
            function register()
            {
            var username=$('#username').val();
            var password=$('#password').val();
            var rpassword=$('#rpassword').val();
            var email=$('#email').val();
            var captcharesult=$('#captcharesult').val();
            var answer="<?php echo $answer; ?>";
            document.getElementById("registerdiv").style.display="none";
            var xmlhttp;
            if (window.XMLHttpRequest)
              {// code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp=new XMLHttpRequest();
              }
            else
              {// code for IE6, IE5
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
            xmlhttp.onreadystatechange=function()
              {
              if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                document.getElementById("registerdiv").innerHTML=xmlhttp.responseText;
                document.getElementById("registerdiv").style.display="inline";
                if (xmlhttp.responseText.search("Redirecting") != -1)
                {
                setInterval(function(){window.location="google.com"},3000);
                }
                }
              }
            xmlhttp.open("POST","login.php?type=register",true);
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlhttp.send("username=" + username + "&password=" + password + "&repeatpassword=" + repeatpassword + "&email=" + email + "&captcharesult=" + captcharesult + "&answer=" + answer);
            }
            </script>
    </head>
<body>
    <div class="page-container login-container">
        <div class="page-content">
            <div class="content-wrapper">
                <div class="content">
                    <!-- Advanced login -->
                     <form method="post" action="" name="register">
                        <div class="panel panel-body login-form">
                            <div class="text-center">
                                <h5 class="content-group">Business Name <small class="display-block">Account Registration</small></h5>
                                <div id="registerdiv" style="display:inline"></div>
                            </div>
                            <div class="form-group has-feedback has-feedback-left">
                                <input type="text" class="form-control" name="username" id="username" placeholder="Username">
                                <div class="form-control-feedback">
                                    <i class="icon-user-check text-muted"></i>
                                </div>
                            </div>
                            <div class="form-group has-feedback has-feedback-left">
                                <input type="text" class="form-control" name="email" id="email" placeholder="Email Address">
                                <div class="form-control-feedback">
                                    <i class="icon-mail5 text-muted"></i>
                                </div>
                            </div>
                            <div class="form-group has-feedback has-feedback-left">
                                <input type="password" class="form-control" name="password" id="password" placeholder="Password">
                                <div class="form-control-feedback">
                                    <i class="icon-lock2 text-muted"></i>
                                </div>
                            </div>
                            <div class="form-group has-feedback has-feedback-left">
                                <input type="password" class="form-control" name="repeatpassword" id="repeatpassword" placeholder="Repeat Password">
                                <div class="form-control-feedback">
                                    <i class="icon-lock2 text-muted"></i>
                                </div>
                            </div>
                            <div class="form-group has-feedback has-feedback-left">
                                <input type="text" class="form-control" name="captcharesult" id="captcharesult" placeholder="<?php echo ''.$x1.'+'.$x2.'?'; ?>">
                                <div class="form-control-feedback">
                                    <i class="icon-info3 text-muted"></i>
                                </div>
                            </div>
                            <input name="one" type="hidden" value="<?php echo $x1; ?>" />
                            <input name="two" type="hidden" value="<?php echo $x2; ?>" />
                            <button type="button" onclick="register()"class="btn bg-primary btn-block btn-lg">Register</button>
                            <button name="login" id="login" type="submit" class="btn bg-success btn-block btn-lg">Login</button>
                        </div>
                    </form>
                    <center>
                    <div class="text-muted">
                        &copy; 2015-<?php echo date('Y'); ?> <a href="https://Business Name.com/">Business Name</a>
                    </div>
                    </center>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

这是位于c:''website/login.php 的login.php

 <?php
                        include("@includes/database.php");
                        include("@includes/init.php");
                        if ($type == 'register')
                        {
                        //Get Registration Info
                        $username = $_POST['username'];
                        $email = $_POST['email'];
                        $password = $_POST['password'];
                        $repeatpassword = $_POST['repeatpassword'];
                        $captcharesult = $_POST['captcharesult'];
                        //Errors
                        $errors = 0;
                        //Check If Everything Is Filled
                        if (empty($username) || empty($email) || empty($password) || empty($repeatpassword) || empty($captcharesult))
                        {
                            echo '<div class="alert bg-danger"><button type="button" class="close" data-dismiss="alert"><span>&times;</span><span class="sr-only">Close</span></button><span class="text-semibold">Oops!</span> You forgot to fill in all fields</a>!</div>';
                            $errors = 1;
                        }
                        else
                        {
                            $errors = 0;
                        }
                        //Validate Username
                        if ($errors == 0)
                        {
                        if (!ctype_alnum($username) || strlen($username) < 3 || strlen($username) > 15)
                        {
                            echo '<div class="alert bg-danger"><button type="button" class="close" data-dismiss="alert"><span>&times;</span><span class="sr-only">Close</span></button><span class="text-semibold">Oops!</span> Username is not valid</a>!</div>';
                            $errors = 1;
                        }
                        else
                        {
                            $errors = 0;
                        }
                        }
                        //Check If Username Is Taken
                        if ($errors == 0)
                        {
                            $SQL = $odb -> prepare("SELECT COUNT(*) FROM `users` WHERE `username` = :username");
                            $SQL -> execute(array(':username' => $username));
                            $countUser = $SQL -> fetchColumn(0);
                        if ($countUser > 0)
                        {
                            echo '<div class="alert bg-danger"><button type="button" class="close" data-dismiss="alert"><span>&times;</span><span class="sr-only">Close</span></button><span class="text-semibold">Oops!</span> Username is already in use</a>!</div>';
                            $errors = 1;
                        }
                        else
                        {
                            $errors = 0;
                        }
                        }
                        //Validate Email
                        if ($errors == 0)
                        {
                        if (!filter_var($email, FILTER_VALIDATE_EMAIL))
                        {
                             echo '<div class="alert bg-danger"><button type="button" class="close" data-dismiss="alert"><span>&times;</span><span class="sr-only">Close</span></button><span class="text-semibold">Oops!</span> Email is not valid</a>!</div>';
                            $errors = 1;
                        }
                        else
                        {
                            $errors = 0;    
                        }
                        }
                        //Check If Email In Use
                        if ($errors == 0)
                        {
                        $SQL = $odb -> prepare("SELECT COUNT(*) FROM `users` WHERE `email` = :email");
                        $SQL -> execute(array(':email' => $email));
                        $countEmail = $SQL -> fetchColumn(0);
                        if ($countEmail > 0)
                        {
                             echo '<div class="alert bg-danger"><button type="button" class="close" data-dismiss="alert"><span>&times;</span><span class="sr-only">Close</span></button><span class="text-semibold">Oops!</span> Email is already in use</a>!</div>';
                            $errors = 1;
                        }
                        else
                        {
                            $errors = 0;    
                        }
    }
                        //Check Passwords
                        if ($errors == 0)
                        {
                        if ($password != $repeatpassword)
                        {
                             echo '<div class="alert bg-danger"><button type="button" class="close" data-dismiss="alert"><span>&times;</span><span class="sr-only">Close</span></button><span class="text-semibold">Oops!</span> Passwords do not match</a>!</div>';
                            $errors = 1;
                        }
                        else
                        {
                            $errors = 0;
                        }
                        }
                        //Check Captcha                             
                        if ($errors == 0)
                        {
                        if ($captcharesult == $answer)
                        {
                            $errors = 0;
                        }
                        else
                        {
                             echo '<div class="alert bg-danger"><button type="button" class="close" data-dismiss="alert"><span>&times;</span><span class="sr-only">Close</span></button><span class="text-semibold">Oops!</span> Captcha is invalid</a>!</div>';
                            $errors = 1;
                        }
                        }

                        }
                        ?>

我想指出几点。首先，当你点击注册按钮时，你会得到这个错误：

TypeError：寄存器不是函数

原因是，html代码中的<form>标记有name="register"，就像函数的名称一样。正因为如此，一些浏览器可以通过在js代码中指定名称来访问节点元素，然后定义的函数被DOM中的元素覆盖。

因此，您需要更改函数名称或<form>标记中的属性name。我已将函数名称从register()更改为registration()。

第二，将var rpassword=$('#rpassword').val();更改为var rpassword=$('#repeatpassword').val();

第三，在send()函数中，将..."&repeatpassword=" + repeatpassword + "&email="...更改为..."&repeatpassword=" + rpassword+ "&email="...

解决方案：

你的HTML和JavaScript代码应该是这样的：

// your code
<button type="button" onclick="registration()" class="btn bg-primary btn-block btn-lg">Register</button>
// your code
<script>
    function registration(){
        var username=$('#username').val();
        var password=$('#password').val();
        var rpassword=$('#repeatpassword').val();
        var email=$('#email').val();
        var captcharesult=$('#captcharesult').val();
        var answer="<?php echo $answer; ?>";
        document.getElementById("registerdiv").style.display="none";
        var xmlhttp;
        if (window.XMLHttpRequest){
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }else{
            // code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                document.getElementById("registerdiv").innerHTML=xmlhttp.responseText;
                document.getElementById("registerdiv").style.display="inline";
                if (xmlhttp.responseText.search("Redirecting") != -1){
                    setInterval(function(){window.location="google.com"},3000);
                }
            }
        }
        xmlhttp.open("POST","login.php?type=register",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send("username=" + username + "&password=" + password + "&repeatpassword=" + rpassword + "&email=" + email + "&captcharesult=" + captcharesult + "&answer=" + answer);
    }
</script>

您的login.php页面应该是这样的：

<?php
    if(isset($_POST['answer']) && isset($_POST['captcharesult']) && isset($_POST['email']) && isset($_POST['password']) && isset($_POST['repeatpassword']) && isset($_POST['username'])){
        if(isset($_GET['type']) && $_GET['type'] == "register"){
            //Get Registration Info
            $username = $_POST['username'];
            $email = $_POST['email'];
            $password = $_POST['password'];
            $repeatpassword = $_POST['repeatpassword'];
            $captcharesult = $_POST['captcharesult'];
            // now the rest of your code
        }
    }
?>

旁注：使用jQuery.ajax()而不是本机ajax，它更加简单优雅。