Php ajax 提交表单 .reset() 不起作用

火雾

我正在尝试使用 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);
    }
  });
}

Uncaught TypeError: $(...).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)
在 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)
罗里·麦克罗森

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

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

或者,为了避免必须从 jQuery 对象中检索元素,您可以触发自身reset事件form

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章