Reset form after submit with jQuery

Question

This is my jQuery code:

$('#contactForm').submit(function(e){
    e.preventDefault()

    $('#loading').css("display", "block")

    $.ajax({
        type : "POST",
        url : "/contact/",
        data: {
            sender_name : $('#name').val(),
            sender_email : $('#email').val(),
            message_subject : $('#subject').val(),
            message_text : $('#message').val(),
            csrfmiddlewaretoken : csrftoken,
            datatype : "json",
        },

        success: function(){
            $('#loading').css("display", "none"),
            $('#sent-message').css("display", "block")
        },
    });
});

It works without any issue. However I try to reset it after submission, and after searching on StackOverflow I added this:

        success: function(){
            $('#loading').css("display", "none"),
            $('#sent-message').css("display", "block"),
            $('#contactForm').trigger('reset')

        },

And this:

        success: function(){
            $('#loading').css("display", "none"),
            $('#sent-message').css("display", "block"),
            $('#contactForm')[0].reset()

        },

And none of them works. What I'm missing?

$('#contactForm')[0].reset() works correctly. Note that reset() will set the fields back to their initial values, and not empty values, so if you pre-populated the fields you will need to manually set val('') on them instead of resetting the entire form. If this still isn't working for you ensure that you have only 1 #contactForm element in the DOM and no errors in the console. — Rory McCrossan
– Rory McCrossan, Commented Jul 1, 2021 at 13:13
@RoryMcCrossan The form is not pre-populated. It's a contact form and reset() is not settings the fields back to their initial values, which is empty. I have only one contactForm (the rest of jQuery code works without issue) and there is no error. — Omid Shojaee
– Omid Shojaee, Commented Jul 1, 2021 at 13:16

Hirak Sheth · Accepted Answer · 2021-07-01 13:51:06Z

1

Please see my code snippet. Reset works property. If doesn't work then you need to update your html code here.

<form id="contactForm">
      <input type="text" />
      <input type="button" onClick="resetForm();" value="Reset">
    </form>
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"></script>
     <script>
      function resetForm()
      {
        $.ajax({
          url:"test.php",
          success:function(){
            $("#contactForm")[0].reset();    
          },
          error:function(){
            $("#contactForm")[0].reset();    
          }
          
        });
        
      }
     </script>

answered Jul 1, 2021 at 13:51

Hirak Sheth

3592 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Reset form after submit with jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related