javascript - 当 fname 已经存在于数据库中时,我想弹出一个模态

标签 javascript php jquery ajax twitter-bootstrap

表格:

<form class="form-horizontal" data-toggle="validator" method="post" role="form" id="enquiryForm">
   <div class="form-group">
      <label class="col-lg-2 control-label">Full Name :</label>
      <div class="col-lg-8">
         <input type="text" name="fname" class="form-control" id="inputFirstName" data-error="Please fill out this field." placeholder="Full Name" required>
         <div class="help-block with-errors"></div>
      </div>
      <button type="button" class="btn btn-info" id="existName">Next</button>
   </div>
</form>

AJAX:

$('#existName').click(function(){
    var fname = $('#inputFirstName').val();
    var datas = "fname="+fname;
    console.log(datas);
    $.ajax({
        url : "exist.php",
        data : datas,
        method : "POST"
    }).done(function(exist){
       console.log(exist);
        $('#existNameModal').html(exist);
    })
})

PHP:

<?php
   session_start();
   $companydata = $_SESSION['company'];
   $idCompany = $companydata['id'];
   $fnameCompany = $companydata['fname'];
   $lnameCompany = $companydata['lname'];

?>
<!DOCTYPE html>
<html>
   <head>
      <title></title>
       <!DOCTYPE html>
       <html lang="en">
          <head>
             <!-- Latest compiled and minified CSS -->
             <!-- jQuery library -->
             <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

             <!-- Latest compiled JavaScript -->
             <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

         </head>
            <body>
               <?php   
                  $dbhost = "localhost";
                  $dbusername = "root";
                  $dbpassword = "";
                  $dbname = "gym";
                  $conn = mysqli_connect($dbhost, $dbusername, $dbpassword, $dbname) or die ("could not connect");
                  if($_POST){

                     $existName = $_POST['fname'];
                     $sql = "SELECT count(fname) from enquiry where fname = '$existName' AND cmpId = '$idCompany'";
                     $result = mysqli_query($conn, $sql);
                     $row = mysqli_num_rows($result);
                     print_r($row);
                     /*exit;*/
                     if(($row)>0) {
                     $modal =  '
                     <div class="modal-dialog">
                     <!-- Modal content-->
                     <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                      </div>
                      <div class="modal-body">
                        <p>Some text in the modal.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                      </div>
                    </div>

                  </div>'; 
                    echo $modal;
                    }   
                    }
                ?>
            </body>
        </html>

模态 HTML

<!-- Name exist Modal -->
<div id="existNameModal" class="modal fade" role="dialog">
</div>                

当 DB 中的 count(fname) 大于 0 时,我试图获得此模态显示。我尝试了所有方法,但没有任何效果。

最佳答案

From with Modal(表单和模态都在同一页面上)

<form class="form-horizontal" data-toggle="validator" method="post" role="form" id="enquiryForm">
   <div class="form-group">
      <label class="col-lg-2 control-label">Full Name :</label>
      <div class="col-lg-8">
         <input type="text" name="fname" class="form-control" id="inputFirstName" data-error="Please fill out this field." placeholder="Full Name" required>
         <div class="help-block with-errors"></div>
      </div>
      <button type="button" class="btn btn-info" id="existName">Next</button>
   </div>
</form>
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <div id="existNameModal"></div> //this is where message will show
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

在 Ajax 中,您正在使用 click 功能,最好在输入时使用 change 功能并检查记录是否存在,例如

$('#inputFirstName').change(function(){
    var fname = $(this).val();
    //rest of code
});

具有点击功能的Ajax

$('#existName').click(function(){
    var fname = $('#inputFirstName').val();
    var datas = "fname="+fname;
    console.log(datas);
    $.ajax({
        url : "exist.php",
        data : datas,
        method : "POST"
    })
});

如果记录存在则显示模态和消息

.done(function(exist){
        console.log(exist);
        if(exist.status=='error') {
                $('#myModal').modal('show');
                $('#existNameModal').html(exist.message);
        }       
}); 

php exist.php

<?php
    header('Content-Type: application/json');
    $dbhost = "localhost";
    $dbusername = "root";
    $dbpassword = "";
    $dbname = "gym";
    $conn = mysqli_connect($dbhost, $dbusername, $dbpassword, $dbname) or die ("could not connect");
    if($_POST['fname']){
        $existName = $_POST['fname']; //escape the string
        $sql = "SELECT count(fname) from enquiry where fname = '$existName' AND cmpId = '$idCompany'";
        $result = mysqli_query($conn, $sql);
        $row = mysqli_num_rows($result);
        //print_r($row);
        if(($row)>0) {
            $response['status'] = "error";
            $response['message'] = "<div class='alert alert-danger'>Record Already Exist</div>";
        }
    echo json_encode($response);
    }
?>

关于javascript - 当 fname 已经存在于数据库中时,我想弹出一个模态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34907795/

相关文章:

javascript - 禁用预测滚动 - 鼠标滚轮 (OnScroll) 事件触发过于频繁(触摸板)

javascript - Gulp concat、uglify 处理 ES6 导出的库

PHP 和 Javascript 兼容的加密函数

php - 从 Woocommerce 父变量 SKU 生成产品变体 SKU

javascript - 在 jquery 中滑动元素时出现问题?

javascript - 如何正确处理 jQuery UI slider ?

javascript - 如何通过 Ajax 请求从服务器重定向网站

javascript - 同位素 - 砌体 jquery 过滤

javascript - ui-grid 无法显示数据,b.forEach 不是函数

php - 通过调用另一个函数设置函数中的静态变量