title: Ajax not seeing textarea value
body: <p>I have a textarea input on my page that I want to post to the server using AJAX. The AJAX call is good, however, it will not see the value that's inside the textarea. </p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="promptBody"&gt;
      &lt;div id="promptText" onclick="replaceWithInput(this)"&gt;
          &lt;p class="promptBody"&gt;&lt;div id="prompty"&gt;{{prompt.prompt|linebreaks}}&lt;/div&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;form id="promptUpdateForm"&gt;
          &lt;div id="promptInput"&gt;
              &lt;p&gt;&lt;textarea class="input" cols="40" id="id_prompt" name="prompt" placeholder="Prompt" rows="10"&gt;&lt;/textarea&gt;&lt;/p&gt;
              &lt;p&gt;&lt;input class="submit" type="submit" name="submit" id="submit" value="Edit Prompt" /&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          $(document).on('submit', '#promptUpdateForm', function(e) {
              e.preventDefault();
              $.ajax({
                  type: 'POST',
                  url: '/apps/litprompt/a/{{prompt.id}}/update/',
                  data: {
                      'prompt': $('#id_prompt').val(),
                      csrfmiddlewaretoken: $('input[name="csrfmiddlewaretoken"]').val(),
                  },
                  success: function(json) {
                      $('#promptText').html(json.prompt_data);
                      var promptText = document.getElementById('promptText');
                      var promptInput = document.getElementById('promptInput');
                      promptText.style.display = 'block';
                      promptInput.style.display = 'none';
                  }
              });
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>If I change my ajax code in data to 'prompt': 'blah', it works just fine. But every time I post with 'prompt': $('#id_prompt').val(), it is a null value. </p>