title: got problem in the ajax form submission code
body: <pre><code>&lt;form action=&quot;&quot; method=&quot;post&quot; class=&quot;f-color&quot; id=&quot;email-form&quot;&gt;
  {% csrf_token %}
    &lt;label&gt;Name&lt;/label&gt;
    &lt;input type=&quot;text&quot;&gt;
    &lt;label&gt;From&lt;/label&gt;
    &lt;input type=&quot;email&quot;&gt;
    &lt;label&gt;Message&lt;/label&gt;
    &lt;button type=&quot;submit&quot;&gt;Sent&lt;/button&gt;
    &lt;/form&gt;
    &lt;div class=&quot;mt-5&quot; id=&quot;spin&quot; style=&quot;display: none;&quot;&gt;
      &lt;div class=&quot;loader&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id=&quot;msg&quot;&gt;&lt;/div&gt;
    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
     &lt;script&gt;
    $(document).ready(function(){
    $(document).on(&quot;submit&quot;, &quot;#email-form&quot;, function(event){
                     event.preventDefault();
                     $('#spin').show();
  
      $.ajax({
          url: &quot;{% url 'contact' %}&quot;,
          type: &quot;POST&quot;,
          data: $(&quot;#email-form&quot;).serialize(),
          success: function(data){
          $(&quot;#spin&quot;).hide();
          if(data.status == &quot;success&quot;){
              $(&quot;#msg&quot;).html(&quot;&lt;p class='alert alert-success'&gt;we will get back to you as soon as possible&lt;/p&gt;&quot; );
              $(&quot;#email-form&quot;).reset();
                      }
                  }
              })
          })
      })
   &lt;/script&gt;
  </code></pre>
  <p>using this code I can submit the form successfully, but after the form submission the message(msg) not showing, the 'if condition statement' is perfectly working (for the testing I gave the alert, the alert was worked)
  another problem is form reset, for this I'm using</p>
  <pre><code>$(&quot;#email-form&quot;).reset();
  </code></pre>
  <p>but the form dose't reset
  how can I solve these problems</p>