CODEWITHSUNDEEP
jquery
Omid Shojaee
Omid Shojaee

Reputation: 347

Reset form after submit with jQuery

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?

Upvotes: 0

Views: 982

Answers (1)

Hirak Sheth
Hirak Sheth

Reputation: 359

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>

Upvotes: 1

Related Questions