title: How to prevent a page from refreshing when I want to submit a form?
body: <p>I am trying to build my first website and I encountered a problem that I couldn't resolve by now. So, when an user wants to add an item to the cart, or to increment the quantity, I want to prevent the page from refreshing when hitting the submit button. I've looked for many answers, I tried to apply Ajax/JQuery, but unsuccessful.</p>
  <p>Here is my code:</p>
  <p>html</p>
  <pre><code>&lt;form action=&quot;{% url 'cart-add' %}&quot; method=&quot;GET&quot; id=&quot;myform&quot;&gt;
       {% csrf_token %}
       &lt;label&gt;
          &lt;input type=&quot;hidden&quot; name=&quot;{{ product.pk }}&quot;&gt;
          &lt;input type=&quot;number&quot; max=&quot;{{ product.quantity }}&quot; min=&quot;1&quot; name=&quot;quantity&quot; value=&quot;1&quot;&gt;
          &lt;button type=&quot;submit&quot; value=&quot;&quot;&gt;Add to chart&lt;/button&gt;
      &lt;/label&gt;
  &lt;/form&gt;
  </code></pre>
  <p>Ajax/JQuery script</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
  $(document).ready(function () {
      $('myform').on('submit', function(e) {
          e.preventDefault();
          $.ajax({
              url : $(this).attr('action') || window.location.pathname,
              type: &quot;GET&quot;,
              data: $(this).serialize(),
              success: function (data) {
                  $(&quot;myForm&quot;).html(data);
              },
              error: function (jXHR, textStatus, errorThrown) {
                  alert(errorThrown);
              }
          });
      });
  });
  &lt;/script&gt;
  </code></pre>
  <p>When I hit add-to-cart submit button, it throw me to the &quot;cart.html&quot;. I do not want to do that, instead I want to prevent that and throw a message to the user saying that his/her item has been successfully added.</p>
  <p>Can somebody help me? Thank you very much for your time. I much appreciate it!</p>