php - 禁用按钮连接到数据库

Question

我正在编写我的 php 脚本以连接到 mysql 数据库。我想在单击提交按钮时禁用按钮并添加微调图像，以便连接到数据库。

代码如下:

<?php
// Initialize the session
session_start();

// Check if the user is already logged in, if yes then redirect him to index page
if(isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true){
    header("location: /dashboard/");
    exit;
}

if($_SERVER["REQUEST_METHOD"] == "POST"){
    // Include config file
    require_once "config.php";

    // Validate credentials
    if(empty($username_err) && empty($password_err)){
         // Prepare a select statement
         $link = mysqli_connect('localhost', 'mydbusername', 'mydbpassword', 'mydbname');
        $sql = "SELECT id, username, password, firstname, lastname, email FROM users WHERE username = ?";

        if($stmt = mysqli_prepare($link, $sql)){
            // Bind variables to the prepared statement as parameters
            mysqli_stmt_bind_param($stmt, "s", $param_username);

            // Set parameters
            $param_username = $username;

            // Attempt to execute the prepared statement
            if(mysqli_stmt_execute($stmt)){
                // Store result
                mysqli_stmt_store_result($stmt);

                // Check if username exists, if yes then verify password
                if(mysqli_stmt_num_rows($stmt) == 1){                    
                    // Bind result variables
                    mysqli_stmt_bind_result($stmt, $id, $username, $hashed_password, $firstname, $lastname);

                    // Store data in session variables
                    $_SESSION["loggedin"] = true;
                    $_SESSION["id"] = $id;
                    $_SESSION["username"] = $username; 
                    $_SESSION["firstname"] = $firstname;
                    $_SESSION["lastname"] = $lastname;

                    // Redirect user to index page
                    header("location: /dashboard/");
                }
            }
        }
    }
?>


<div class="container">
   <div class="input-group">
       <span class="input-group-addon"><i class="fa fa-user"></i></span>
       <input type="text" name="username" class="form-control form-size" value="<?php echo $username; ?>" placeholder="Username">
    </div>


   <div class="input-group">
       <span class="input-group-addon"><i class="fa fa-lock"></i></span>
       <input type="text" name="password" class="form-control form-size" value="<?php echo $password; ?>" placeholder="Password">
    </div>
    <button type="submit" class="btn btn-primary btn-block button-size" onclick="this.disabled = true">Log In To My Account</button>
</div>

当我尝试这样做时:

<button type="submit" class="btn btn-primary btn-block button-size" onclick="this.disabled = true">Log In To My Account</button>

它会禁用按钮，但不会连接到数据库。如果我删除禁用，我可以毫无问题地连接到数据库。

你能给我举个例子吗？我可以如何使用 fa fa-spinner fa-spin 禁用按钮来显示微调器图像以进行引导，同时我可以连接到数据库？

谢谢。

Answer 1

这应该被标记为 js。还建议使用外部 js 而不是内联。尝试像这样做你的按钮:

<button name="submit" type="submit" class="btn btn-primary btn-block button-size" onclick="this.style.opacity = 0.5; this.style.pointerEvents = 'none'; this.innerHTML = '<span><i class=\'fa fa-spinner fa-spin\'></i> Loading</span>';">Log In To My Account</button>