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>

禁用按钮以连接到数据库

1 个答案: