javascript - 成功提交时显示 Bootstrap 的警报

Question

我正在尝试处理 Bootstrap 的警报。特别是这个:

<div class="alert alert-success" role="alert">...</div>

我希望它在我成功点击提交按钮后在模式中弹出。我该怎么做？

这是我的代码:

<!--____________________________ADD AGENT________________________--> 
<div class="modal fade" id="addAgent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
             <div class="modal-dialog" role="document">
                        <form role="form" action="php/addAgent.php" method="POST">           
             <div class="modal-content">
             <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Add Agent</h4>
             </div>
             <div class="modal-body">
                <div class="row">
                <div class="col-sm-12">
                            <div class="form-group">
                                <label for="fullname">Full Name</label>
                                <div class="row">
                                    <div class="col-sm-4">
                                    <input type="text" class="form-control" placeholder="First Name"    name="fname">
                                    </div>
                                    <div class="col-sm-4">                                  
                                    <input type="text" class="form-control" placeholder="Middle Name"   name="mname">
                                    </div>
                                    <div class="col-sm-4">
                                    <input type="text" class="form-control" placeholder="Last Name"     name="lname">
                                    </div>
                                </div>
                            </div><!--___________FORM GROUP_____________-->

                                <div class="form-group">
                                <div class="row">
                                    <div class="col-sm-4">
                                        <label for="sel1">Type:</label>                                     
                                        <select class="form-control" name="agentType" id="sel1">
                                            <option value="1">Broker</option>
                                            <option value="2">Agent</option>
                                            <option value="3">Sub-Agent</option>
                                        </select> 
                                    </div>

                                    <div class="col-sm-4">
                                        <label for="sel1">Project:</label>                                      
                                        <select class="form-control" id="sel1">
                                            <option>Mezza</option>
                                                <option>Tivoli Gardens</option>
                                            <option>Verawoods Residences</option>
                                        </select> 
                                    </div>
                                </div>
                                </div>

                                <div class="form-group">
                                <div class="row">
                                    <div class="col-sm-6">
                                    <label for="email">Email Address</label>
                                    <input type="email" class="form-control" name="email"   id="email">
                                </div>
                                <div class="col-sm-4">
                                    <label for="contact">Contact Number</label>
                                    <input type="text" class="form-control" name="contact" id="contact">
                                </div>
                                </div>
                                </div>

                                <div class="form-group">
                                <div class="row">
                                <div class="col-sm-12">
                                    <label for="homeAdd">Home Address</label>
                                    <input type="text" class="form-control" name="homeAdd" id="homeAdd">
                                </div>
                                </div>
                                </div>
                        </form>         
                </div>
             </div>          </div>
             <div class="modal-footer">
                <input  type="submit" class="btn btn-primary" value="submit"/>  
                <button type="button" class="btn btn-default" data-dismiss="modal"> Close</button>                                   
             </div>
             </div>
</div>
</div><!--______________________ADD AGENTS MODAL_______________________-->

<!-- Button trigger modal -->

这是我的 PHP:

<?php

$user="root"; $pass=""; $db="realesate";

$db = new mysqli('localhost', $user, $pass, $db);

//check connection
if ( $db->connect_error) {
die('Connect Error: ' . $db->connect_errno . ': ' .  $db->connect_error );
}

//insert data
$sql = "insert into agent (AgentFName , AgentMName , AgentLName , AgentContact , AgentEmail, AgentAddress , agentType) 
    values ( 
    '{$db->real_escape_string($_POST['fname'])}'    ,
    '{$db->real_escape_string($_POST['mname'])}'    ,
    '{$db->real_escape_string($_POST['lname'])}'    ,
    '{$db->real_escape_string($_POST['contact'])}'  ,   
    '{$db->real_escape_string($_POST['email'])}'    ,
    '{$db->real_escape_string($_POST['homeAdd'])}'  ,
    '{$db->real_escape_string($_POST['agentType'])}')";
$insert = $db->query($sql); 
    if ($insert) {
        echo"";


    }

//close connection
$db->close();
?>

在数据库中成功添加值后，如何执行此操作？

Answer 1

如果您不使用 AJAX 调用 addAgent.php 并且您的 PHP 和 HTML 位于同一个文件中，那么一种方法是在 PHP 中设置一个变量，如下所示:

if ($insert) {
    $alert_success = '<div class="alert alert-success" role="alert">...</div>';
}

然后，您可以在 HTML 中的任何位置添加一行来呼应该变量。

<?php
    echo $alert_success;
?>