Fatal编程技术网
  • javascript/
  • Javascript 如何在提交引导时隐藏和显示警报div

Javascript 如何在提交引导时隐藏和显示警报div

javascript php css twitter-bootstrap

Javascript 如何在提交引导时隐藏和显示警报div,javascript,php,css,twitter-bootstrap,Javascript,Php,Css,Twitter Bootstrap,我从一个教程中复制了下面的大部分代码（并修改了一些代码），因为我对编码和引导还不熟悉，我想知道当表单内容成功发布时，如何隐藏并显示警告div，告诉用户“成功！提交的很好” <?php require("includes/config.php"); //connection to DB and session start if(!empty($_POST)) { // Ensure that the user fills out fields if(empty($_PO

我从一个教程中复制了下面的大部分代码（并修改了一些代码），因为我对编码和引导还不熟悉，我想知道当表单内容成功发布时，如何隐藏并显示警告div，告诉用户“成功！提交的很好”

<?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>


注册
注册
&时代；
成功！做得好。
用户名
电子邮件地址
密码
记得我吗
创建帐户
可以使用javascript完成。将“Success！Well done it submitted”文本放在段落中，并给它一个id。例如，在此处插入文本。现在您可以在javascript中选择它。在此之后，在CSS中创建一个类，以便我们可以隐藏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>


函数myFunction（）{
document.getElementById（“后传递”）.setAttribute（“类”、“类隐藏”）；
}
现在它应该隐藏起来了。如果你想隐藏整个div，请在提交后给该div一个id，或者任何id，但不要忘记在myFunction（）中更改它，因为它选择了它

@Lucian_Tarna非常感谢，但是我想要的是在用户成功发布表单时显示隐藏的成功div。您的解决方案在单击按钮时显示div。嗯，我不知道php如何帮助您。但是在RubyonRails中有一些类似于flash消息的东西，尝试在phpOr中搜索类似的东西，只有当信息从php成功提交时，您才能选择您的元素并给它类（我相信php有类似的选择器）。您应该添加php标记：D，这样更多的人会帮助您