How to reset the form fields after submit?

[xcfx2888]

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?

[Paul_Wilkins]

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.

[m3g4p0p]

@xcfx2888

getElementsById

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.)