javascript - 显示提交按钮js

Question

check_availability.php

这是我的 php 检查表单是否已经存在。

<?php
require_once("config.php");
//code check email
if (!empty($_POST["CUSUNAME"])) {
    $result = mysqli_query($con, "SELECT count(*) FROM tblcustomer WHERE CUSUNAME='" . $_POST["CUSUNAME"] . "'");
    $row = mysqli_fetch_row($result);
    $email_count = $row[0];
    if ($email_count > 0) echo "<span style='color:red'>Username is already used.</span>";
    else echo "<span style='color:green'>Username is available.</span>";
}
// End code check email
//Code check user name
if (!empty($_POST["PHONE"])) {
    $result1 = mysqli_query($con, "SELECT count(*) FROM tblcustomer WHERE PHONE='" . $_POST["PHONE"] . "'");
    $row1 = mysqli_fetch_row($result1);
    $user_count = $row1[0];
    if ($user_count > 0) echo "<span style='color:red'>Phone is already used.</span>";
    else echo "<span style='color:green'>Phone number is available.</span>";
}
// End code check username
?>

LogSignModal.php

这是我的页面。

<div class="form-group">
  <div class="col-md-10">
    <label class="col-md-4 control-label" for=
           "CUSUNAME">Username:</label>
    <div class="col-md-8">
      <input class="form-control input-sm" onBlur="checkUserNameAvailability()"  id="CUSUNAME" name="CUSUNAME" placeholder=
             "Username" type="text" value="">                                 
      <span id="username-availability-status"></span>                                           
    </div>
  </div>
</div> 
<div class="form-group">
  <div class="col-md-10">
    <label class="col-md-4 control-label" for=
           "PHONE">Contact Number:</label>
    <div class="col-md-8">
      <input class="form-control input-sm" onBlur="checkPhoneAvailability()" id="PHONE" name="PHONE" placeholder=
             "Phone Number" type="number" value="">                                       
      <span id="Phone-availability-status"></span>             
    </div>
  </div>
</div>
<div class="form-group">
  <div class="col-md-10">
    <label class="col-md-4" align = "right"for=
           "image"></label>
    <div class="col-md-8">
      <input type="submit"  name="submit" value="Sign Up"  class="submit btn btn-pup"  />
      <button class="btn btn-default" data-dismiss="modal" type=
              "button">Close</button> 
    </div>
  </div>
</div> 
<script>
  function checkUserNameAvailability() {
    $("#loaderIcon").show();
    jQuery.ajax({
      url: "check_availability.php",
      data:'CUSUNAME='+$("#CUSUNAME").val(),
      type: "POST",
      success:function(data){
        $("#username-availability-status").html(data);
        $("#loaderIcon").hide();
      },
      error:function (){}
    });
  }         
  function checkPhoneAvailability() {
    $("#loaderIcon").show();
    jQuery.ajax({
      url: "check_availability.php",
      data:'PHONE='+$("#PHONE").val(),
      type: "POST",
      success:function(data){
        $("#Phone-availability-status").html(data);
        $("#loaderIcon").hide();
      },
      error:function (){}
    });
  }
</script>  

我的代码一切正常，但是当我在文本框中输入的值在数据库中可用时，我无法使提交按钮出现，如果它已经被使用则消失。

我希望有人帮助我，谢谢。

标签： javascriptphp

Answer 1

编辑：首先，您绝对应该检查 Dharman 的评论并重写您如何在 PHP 代码中从 MySQL 获取数据，因为当前状态容易受到SQL 注入的攻击，并且绝对不安全使用！

问题是如何将数据传递给 ajax 函数。你这样做的方式，服务器只接收一个纯字符串，例如'CUSUNAME=dave'. 这种方式$_POST["CUSUNAME"]将一无所获，并且您的服务器响应将保持空白。因此，您应该通过以下方式将数据作为对象传递：

<script>
  function checkUserNameAvailability() {
    $("#loaderIcon").show();
    jQuery.ajax({
      url: "check_availability.php",
      data:{'CUSUNAME': $("#CUSUNAME").val()},
      type: "POST",
      success:function(data){
        $("#username-availability-status").html(data);
        $("#loaderIcon").hide();
      },
      error:function (){}
    });
  }         
  function checkPhoneAvailability() {
    $("#loaderIcon").show();
    jQuery.ajax({
      url: "check_availability.php",
      data:{'PHONE': $("#PHONE").val()},
      type: "POST",
      success:function(data){
        $("#Phone-availability-status").html(data);
        $("#loaderIcon").hide();
      },
      error:function (){}
    });
  }
</script>