成功提交时显示引导程序的警报

Show Bootstrap's Alert on successful Submit

本文关键字：引导程序 显示 提交 成功      更新时间：2023-09-26

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

<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来调用addAgent.php并且你的PHP和HTML在一个文件中，那么一种方法是在PHP中设置一个变量，如下所示：

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

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

<?php
    echo $alert_success;
?>

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

// 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>')
  });
});

您可以在jQuery的post（）方法@他们的API文档网站上找到更多信息

。
相关文章：