title: "Forbidden 403 - CSRF verification failed" when using .submit(function) in Django form
body: <p>I've been developing in application with Django that has a bunch of forms, each one in a different page. In one of the first views, I just ask the user a simple information, that is POST sent to Python and used to some formulas. The code I used to do so is show below, and it runs smoothly:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Data&lt;/title&gt;
  &lt;/head&gt;
  
  {% load staticfiles %}
  &lt;link rel="stylesheet" href="{% static 'app/content/bootstrap.css' %}"&gt;
  &lt;link rel="stylesheet" href="{% static 'app/content/custom.css' %}"&gt;
  
  &lt;script src="{% static 'app/scripts/jquery-1.10.2.min.js' %}"&gt;&lt;/script&gt;
  &lt;script src="{% static 'app/scripts/jquery.validate.js' %}"&gt;&lt;/script&gt;
  &lt;script src="{% static 'app/scripts/jquery.maskedinput.min.js' %}"&gt;&lt;/script&gt;
  &lt;script src="{% static 'app/scripts/custom.js' %}"&gt;&lt;/script&gt;
  
  {% if error == 404 %}
  &lt;label&gt;Who are you? Go away!&lt;/label&gt;
  &lt;br&gt;
  {% endif %}
  Welcome! Give me your data!
  &lt;body&gt;
      &lt;form action="/search/" method="post" id="myPrettyForm"&gt;
          {% csrf_token %}
          &lt;input type="text" name="q" id="q"&gt;
          &lt;input type="submit" value="Go!"&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;script type="text/javascript"&gt;
  
      $("#q").mask("00000000000");
  
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As I said, this code runs nicely. However, I want to add a function, in which, once I click the "submit", the <code>q</code> input field is disabled. To do so, I tried adding this piece of code to the script above:</p>
  
  <pre><code>$("#myPrettyForm").submit(function () {
      $("#myPrettyForm:input").prop("disabled", true);
  });
  </code></pre>
  
  <p>However, when I add this snippet to my code, everytime I try to submit my form, I receive a "<strong>Forbidden (403) CSRF verification failed. Request aborted.</strong>" error. According to <a href="https://stackoverflow.com/questions/12174040/forbidden-403-csrf-verification-failed-request-aborted">this</a>, this error is commonly related to the form not having the <code>{% csrf_token %}</code> element. However, my form already has this element.</p>
  
  <p>So what am I doing wrong in here? And if I'm using the wrong method to prevent my user to write in the inputs after the form is submitted, which other method could
  I use?</p>