Question

我正在使用此脚本检查用户名可用性，但它可以正常工作，但即使用户名不可用，也会提交表单。我试图使用event.preventdefault但是，我不知道如何正确使用它如何阻止提交表单？

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

这是表格

<form id="defaultForm" action="index1.php" method="post" class="registration-form">
    Username
    <br>
    <input type="text" name="username" onBlur="checkAvailability()" id="username">
    <br><span id="user-availability-status"></span> Password
    <br>
    <input type="text" name="email" id="email">
    <br>
    <button type="submit" name="sub">Submit</button>

这里是check_availability.php

<?php
    require_once("connect.php");
    if(!empty($_POST["username"])) {
      $result = mysqli_query($con,"SELECT count(*) FROM users WHERE username='" . $_POST["username"] . "'");
      $row = mysqli_fetch_row($result);
      $user_count = $row[0];
      if($user_count>0) {
         echo "<span class='status-not-available'><p style='text-align:center'> Username Not Available</p></span>";
      }
    }
?>

Answer 1

删除HTML中的函数调用

$(document).ready(function(){

  $("#defaultForm").submit(function(e) {
    e.preventDefault();
  $("#loaderIcon").show();
    var self = this;
    $.ajax({
            url: "check_availability.php",
            data: 'username=' + $("#username").val(),
            type: "POST"                
    }).success(function(data) {
      $("#user-availability-status").html(data);
                $("#loaderIcon").hide();
        if (data!= "<span class='status-not-available'><p style='text-align:center'> Username Not Available</p></span>")  
          self.submit();
    }).error(function() {
        alert('error');
    });
});

 });

如果用户名不可用，则jquery ajax阻止表单提交

1 个答案: