成功提交时显示 Bootstrap 的警报答案

【问题标题】：Show Bootstrap's Alert on successful Submit成功提交时显示 Bootstrap 的警报
【发布时间】：2016-02-23 22:25:45
【问题描述】：

我正在尝试处理引导程序的警报。特别是：

<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();
?>

在数据库中成功添加值后，我该怎么做？

【问题讨论】：

您将需要使用 ajax（例如使用 jQuery 提交），否则提交将刷新您的浏览器。
@RobertoNovelo 如何使用 ajax？有什么好的参考吗？

标签： javascript php jquery html twitter-bootstrap

【解决方案1】：

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

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

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

<?php
    echo $alert_success;
?>

【讨论】：

在 HTML 中回显时无法识别变量 $alert_success
如果您的 INSERT 工作正常，应该是这样。您的代码都在一页中？确切的错误是什么？
插入成功。我的 HTML 和 PHP 代码是分开的。我试图将我的 php 放在同一页面上，但它说 $_POST 中的索引未定义。
当您将它们放在一个页面中时，您是否从<form> 标记中删除了action='addAgent.php'？如果没有，请尝试将操作设置为简单的action=""
您是在页面加载后立即看到索引错误，还是在单击提交按钮后看到错误？

【解决方案2】：

您可以为您的表单使用提交处理程序：

// Add an ID to your form
$( "#formID" ).submit(function( event ) {

  // Stop form from submitting normally
  event.preventDefault();

  // Get some values from elements on the page:
  var $form = $( this ),
    term = $form.find( "input[name='s']" ).val(),
    url = $form.attr( "action" );

  // Send the data using post
  var posting = $.post( url, { s: term } );

  // Put the results in a div
  posting.done(function( data ) {
    $(".modal-body, #orModalBodyID"). append('<div class="alert alert-success" role="alert">Post Success</div>')
  });
});

你可以在@他们的API documentation website找到更多关于jQuery的post()方法的信息

【讨论】：