我想在DB中已存在fname时弹出一个模态

Form:

形成：

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

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：

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

Modal HTML

模态HTML

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

I am trying to get this Modal display when count(fname) in DB is more than 0. I tried everything but nothing worked.

当DB中的count（fname）大于0时，我试图得到这个Modal显示。我尝试了一切，但没有任何效果。

1 个解决方案

#1

From with Modal (form and modal both will be on same page)

来自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>

In Ajax, you are using click function, better do it with change function on input and check the record if exist like

在Ajax中，您使用的是click函数，最好在输入时使用更改函数并检查记录是否存在

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

The Ajax with click function

具有单击功能的Ajax

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

Now to show modal and message if record exist

现在显示模式和消息，如果存在记录

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

The php exist.php

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

#1