How to reset the form fields after submit?


#1

this is my html form

                              <div class="contact_from">
                    <form action="#" method="post" id="contact_form">
                        <!-- Message Input Area Start -->
                        <div class="contact_input_area">
                            <div class="row">
                                <!-- Single Input Area Start -->
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <input type="text" class="form-control" name="name" id="name" placeholder="Your Name" required>
                                    </div>
                                </div>
                                <!-- Single Input Area Start -->
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <input type="email" class="form-control" name="email" id="email" placeholder="Your E-mail" required>
                                    </div>
                                </div>
     <!-- Single Input Area Start -->
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <input type="number" class="form-control" name="mobile" id="mobile" placeholder="Your Mobile" required>
                                    </div>
                                </div>
                                <!-- Single Input Area Start -->
                                <div class="col-12">
                                    <div class="form-group">
                                        <input type="text" name="message" class="form-control" id="message" cols="30" rows="4"
       placeholder="Coaching Class Name " required>
                                    </div>
                                </div>
                                <!-- Single Input Area Start -->
                                <div class="col-12">
                                    <button   type="submit" id="submit" class="btn submit-btn" onclick="submitForm()">Sign Up Now</button>


                                </div>
                            </div>
                        </div>
                        <!-- Message Input Area End -->
                    </form>
                </div>

I am trying this js function but not working

                                           <!--Reset form values  -->
       <script>
          function submitForm() {
    var frm = document.getElementsById('contact_form');
   frm.submit(); // Submit the form
    frm.reset();  // Reset all form data
    return false; // Prevent page refresh
   }
   </script>

Please tell me what should I do ?
or elsee how should I fix it by using dfferent function?


#2

Submitting for form normally results in a new page being loaded, based on the action field, so code after the submit wouldn’t normally get run.


#3

Check that method name for spelling errors… BTW you can generally see such errors in the console of your browser dev tools.

Also, return false from an event handler is a mere jQuery feature AFAIK – normally you have to call event.preventDefault() explicitly. As @Paul_Wilkins noted however, submit()ing a form right a way is pretty much the default behaviour anyway; so it would rather look like this:

var form = document.getElementById('contact_form')

form.addEventListener('submit', function submitForm (event) {
  // Prevent the default form submission
  event.preventDefault()
  // Do something with the form data
  console.table([ ...new FormData(form).entries() ])
  // Reset the form
  form.reset()
})

(Putting the script at the end of the body and removing the JS in the markup.)