Php ajax提交表单.reset（）不起作用

Question

我正在尝试使用 PHP 和 AJAX 制作简单的登录系统。我的问题是，当我尝试提交注册表单时，它的验证工作并且数据被保存到数据库中，但表单没有动态重置。当我检查控制台时，有一些错误。请帮我解决这个问题。

<form id="signupForm" role="form" method="post" action="add-user-submit.php" enctype="multipart/form-data">
            <div class="form-group">
                <input type="text" name="username" id="username" class="form-control" placeholder="username" tabindex="1" >
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6">
                    <div class="form-group">
                        <input type="text" name="firstname" id="firstname" class="form-control" placeholder="First Name" tabindex="2" >
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6">
                    <div class="form-group">
                        <input type="text" name="lastname" id="lastname" class="form-control" placeholder="Last Name" tabindex="3" >
                    </div>
                </div>
            </div>
            <div class="row">

                <div class="col-xs-12 col-sm-6 col-md-6">
                    <div class="form-group">
                        <input type="text" name="index_no" id="index_no" class="form-control" placeholder="C00007" data-charset="_XXXXX" tabindex="4" >
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6">
                    <div class="form-group">
                        <select id="designation" name="designation" class="form-control m-bot15" >
                          <option>Select Designation</option>
                          <option value="O">Officer (O)</option>
                          <option value="OC">Officer Cash(OC)</option>
                          <option value="SO">Senior Officer(SO)</option>
                          <option value="SOC">Senior Officer Cash(SOC)</option>
                          <option value="PO">Principal Officer(PO)</option>
                          <option value="SPO">Senior Principal Oficer(SPO)</option>
                          <option value="AGM">Assistant General Manager(AGM)</option>
                          <option value="DGM">Deputy General Manager(DGM)</option>
                          <option value="GM">General Manager (GM)</option>
                          <option value="CITO">Chief Information Technology Officer(CITO)</option>
                        </select>                       
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6">

            <div class="form-group">
                <input type="tel" name="phone" id="phone" class="form-control" placeholder="Phone Number" tabindex="5" >
            </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6">

            <div class="form-group">
                <input type="email" name="email" id="email" class="form-control" placeholder="Email Address" tabindex="5" >
            </div>
                </div>
            </div>        
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6">
                    <div class="form-group">
                        <input type="password" name="password" id="password" class="form-control" placeholder="Password" tabindex="5" >
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6">
                    <div class="form-group">
                        <input type="password" name="confirm_password" id="confirm_password" class="form-control" placeholder="Confirm Password" tabindex="6" >
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6">
                    <div class="form-group">
                    <select id="level_access" name="level_access" class="form-control m-bot15" >
                      <option>Select Role</option>
                      <option value="1">Admin</option>
                      <option value="2">Manager</option>
                      <option value="3">User</option>
                    </select>

                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6">
                    <div class="form-group">
                        <select id="active" name="active" class="form-control m-bot15" >
                          <option value="1">Active</option>
                          <option value="2">inactive</option>
                        </select>
                    </div>
                </div>
            </div>
        <div class="row">
                <div class="col-xs-12 col-md-12"><input type="submit" value="Add" class="btn btn-primary btn-block " tabindex="7"></div>


        </div>
        </form>

function register() {
  hideshow('loading', 1);
  error(0);
  $.ajax({
    type: "POST",
    url: "add-user-submit.php",
    data: $('#signupForm').serialize(),
    dataType: "json",
    success: function(msg) {
      if (parseInt(msg.status) == 1) {
        $("#signupForm").reset();

        //show the success message
        $('.done').fadeIn('slow');
        console.log(msg)
      } else if (parseInt(msg.status) == 0) {
        error(1, msg.txt);
      }
      hideshow('loading', 0);
    }
  });
}

未捕获的类型错误：$(...).reset 不是函数
在 Object.success (common-scripts.js:41)
在 l (jquery-1.8.3.min.js:2)
在 Object.fireWith [as resolveWith] (jquery-1.8.3.min.js:2)
在 T (jquery-1.8.3.min.js:2)
在 XMLHttpRequest.r (jquery-1.8.3.min.js:2)

当使用$("#signupForm").trigger('reset');时

Uncaught TypeError: s[y] is not a function
    at Object.trigger (jquery-1.8.3.min.js:2)
    at HTMLFormElement.<anonymous> (jquery-1.8.3.min.js:2)
    at Function.each (jquery-1.8.3.min.js:2)
    at init.each (jquery-1.8.3.min.js:2)
    at init.trigger (jquery-1.8.3.min.js:2)
    at Object.success (common-scripts.js:41)
    at l (jquery-1.8.3.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-1.8.3.min.js:2)
    at T (jquery-1.8.3.min.js:2)
    at XMLHttpRequest.r (jquery-1.8.3.min.js:2) 

当使用$("#signupForm")[0].reset();时

Uncaught TypeError: $(...)[0].reset is not a function
    at Object.success (common-scripts.js:41)
    at l (jquery-1.8.3.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-1.8.3.min.js:2)
    at T (jquery-1.8.3.min.js:2)
    at XMLHttpRequest.r (jquery-1.8.3.min.js:2)

Answer 1

reset() 是原生 Element 对象的函数，而不是 jQuery 对象。因此，您需要在调用 reset() 之前从 jQuery 对象中检索该元素，如下所示：

$("#signupForm")[0].reset();   
// or
$("#signupForm").get(0).reset();   

或者，为了避免从 jQuery 对象中检索元素，您可以触发 form 本身的 reset 事件：

$("#signupForm").trigger('reset'); 

Answer 2

如果你使用 jQuery 使用

 $('#signupForm')[0].reset();

否则使用 Javascript

document.getElementById('signupForm').reset();

因为我们需要单独重置每个元素。 Jquery 没有在表单上工作的函数 reset()。 reset() 是一个仅适用于表单元素的 Javascript 函数。

Answer 3

在 jQuery 对象上调用 reset() 函数将不起作用。

reset() 函数是常规的 JavaScript 函数，而不是 jQuery 函数，因此不能用于 jQuery 对象。

要让它工作，我们需要从 jQuery 对象中提取底层的 DOM 元素，然后我们可以调用该函数。

一个 jQuery 对象包含一个或多个 DOM 元素，您可以使用普通的数组语法访问其中的元素，所以这将起作用：

$("#signupForm")[0].reset(); 

另一种方式是通过调用触发reset事件

 $("#signupForm").trigger('reset');