个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 00:15:26 24 4
gpt4 key购买 nike

表格:

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

24 4 0
文章推荐： javascript - Handlebars 和异步调用
文章推荐： javascript - 另一种石头剪刀布
文章推荐： javascript - 如何从 eBay 通知中获取数据
文章推荐： javascript - Jquery ajax 解析具有不同命名数组的 json 文件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com