Question

我已经从教程中复制了下面的大部分代码（并修改了一些代码），因为我是编码和Bootstrap的新手，我想知道如何隐藏然后显示警告div告诉用户＆＃34;成功！干得好，提交了＃34;表格内容成功发布时。

<?php
require("includes/config.php"); //connection to DB and session start
if(!empty($_POST)) 
{ 
    // Ensure that the user fills out fields 
    if(empty($_POST['username'])) 
    { die("Please enter a username."); } 
    if(empty($_POST['password'])) 
    { die("Please enter a password."); } 
    if(!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) 
    { die("Invalid E-Mail Address"); } 

    // Check if the username is already taken
    $query = " 
        SELECT 
            1 
        FROM users 
        WHERE 
            username = :username 
    "; 
    $query_params = array( ':username' => $_POST['username'] ); 
    try { 
        $stmt = $db->prepare($query); 
        $result = $stmt->execute($query_params); 
    } 
    catch(PDOException $ex){ die("Failed to run query: " . $ex-  
>getMessage()); } 
    $row = $stmt->fetch(); 
    if($row){ die("This username is already in use"); } 
    $query = " 
        SELECT 
            1 
        FROM users 
        WHERE 
            email = :email 
    "; 
    $query_params = array( 
        ':email' => $_POST['email'] 
    ); 
    try { 
        $stmt = $db->prepare($query); 
        $result = $stmt->execute($query_params); 
    } 
    catch(PDOException $ex){ die("Failed to run query: " . $ex- 
>getMessage());} 
    $row = $stmt->fetch(); 
    if($row){ die("This email address is already registered"); } 

    // Add row to database 
    $query = " 
        INSERT INTO users ( 
            username, 
            password, 
            salt, 
            email 
        ) VALUES ( 
            :username, 
            :password, 
            :salt, 
            :email 
        ) 
    "; 

    // Security measures
    $salt = dechex(mt_rand(0, 2147483647)) . dechex(mt_rand(0, 2147483647)); 
    $password = hash('sha256', $_POST['password'] . $salt); 
    for($round = 0; $round < 65536; $round++){ $password = hash('sha256',   
    $password . $salt); } 
    $query_params = array( 
        ':username' => $_POST['username'], 
        ':password' => $password, 
        ':salt' => $salt, 
        ':email' => $_POST['email'] 
    ); 
    try {  
        $stmt = $db->prepare($query); 
        $result = $stmt->execute($query_params); 
    } 
    catch(PDOException $ex){ die("Failed to run query: " . $ex-
>getMessage()); } 
    header("Location: index.php"); 
    die("Redirecting to index.php"); 
} 

?>

<!DOCTYPE html>
<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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="">

<title>Sign Up</title>

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/signin.css" rel="stylesheet">

<script  
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">   
</script>

</head>

<body>

<div class="container">

    <form class="form-signin" method="post">
        <h2 class="form-signin-heading">Sign Up</h2>

        <div class="alert alert-success alert-dismissable hidden">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                &times;
            </button>
            Success! Well done its submitted.
        </div>

        <label for="inputUsername" class="sr-only">Username</label> 
        <input name="username" type="username" id="inputUsername" class="form-control" placeholder="Username" required autofocus>

        <label for="inputEmail" class="sr-only">Email address</label>
        <input name="email" type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>

         <!--<label for="inputEmail" class="sr-only">Email address</label>
         <input name="username" type="email" id="inputEmail" class="form-control" placeholder="Confirm Email address" required autofocus>-->
         <label for="inputPassword" class="sr-only">Password</label>
         <input name="password" type="password" id="inputPassword" class="form-control" placeholder="Password" required>
         <div class="checkbox"> 
             <label>
                 <input type="checkbox" value="remember-me"> Remember me
             </label>
         </div>
         <button class="btn btn-lg btn-primary btn-block" type="submit" name="submit">Create Account</button>
    </form>

</div> <!-- /container -->

</body>
</html>

Answer 1

可以使用javascript完成。将“成功！完成提交的文本”文本放在一个段落中并给它一个id。例如<p id="AfterSubmission">insert text here</p>。现在你可以在javascript中选择它。之后在CSS中创建1个类，以便我们可以隐藏DOM元素，例如：

.ClassThatHides{
 visibility: hidden;
 display: none;
}

现在为该按钮添加一个功能：

<button  type="button" class="close" data-dismiss="alert" onclick="myFunction()" aria-hidden="true">
  &times;
</button>

现在创建一个javascript函数，当按下该按钮时，它会为相关段落提供一个类：

<script>
function myFunction() {
    document.getElementById("AfterSubmission").setAttribute("class", "ClassThatHides");
}
</script>

现在它应该隐藏起来。如果你希望隐藏整个div，那么给div赋予id AfterSubmission，或任何id，但不要忘记在myFunction（）中更改它，因为它选择它

如何在提交Bootstrap时隐藏和显示警报div

1 个答案: