Php ajax submit form .reset() is not working

Question

I am trying to make simple login system with PHP and AJAX. My problem is that when I try to submit the signUp form its validation works and the data is saved into the database but the form is not reset dynamically. When I check console there are a few errors. Please help me to solve this.

<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)
at T (jquery-1.8.3.min.js:2)
at XMLHttpRequest.r (jquery-1.8.3.min.js:2)

When use $("#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) 

When use $("#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

calling the reset() function on a jQuery object will not work.

the reset() function is a regular JavaScript function, not a jQuery function, and therefore won’t work on a jQuery object.

To get it to work, we need to extract the underlying DOM element from the jQuery object, and then we can call the function.

A jQuery object contains one or more DOM elements, and you can access the elements in it with normal array syntax, so this will work:

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

Another way is to trigger the reset event by calling

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

Answer 2

reset() is a function of a native Element object, not a jQuery object. As such you need to retrieve that element from the jQuery object before calling reset(), like this:

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

Alternatively, to avoid having to retrieve the element from the jQuery object, you could trigger the reset event of the form itself:

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

Answer 3

If you using jQuery Use

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

otherwise use Javascript

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

Because we need to reset each element individually. Jquery dont have a function reset() that works on a form. reset() is a Javascript function that works on form elements only.