title: Send JSON Data on HTML form submit
body: <p>I have a html form and that form has two fields (name , description). When a user hits submit button for that form I want to submit form data in json format.</p>
  
  <p>I tried the following:</p>
  
  <pre><code>        function submitData(){
              payload.name = $("#project-name").val();
              payload.description = $("#project-description").val();
  
              $.post("http://localhost:5000/task-groups/add", payload);
              return false;
          }
  </code></pre>
  
  <p>Submitdata is called when my form's button is clicked. But this is sending form data and not json data</p>
  
  <p>I have a python flask server running.</p>
  
  <p>[1] When I do:</p>
  
  <pre><code>payload = request.get_json()
  name = payload['name']
  </code></pre>
  
  <p>It is throwing the following exception</p>
  
  <pre><code>File "/Users/saik/projects/mturk/server/src/index.py", line 37, in add_task_group
    name = payload['name']
  TypeError: 'NoneType' object is not subscriptable
  </code></pre>
  
  <p>[2] However, I am able to access the data on the server side using following:</p>
  
  <pre><code>name = request.form['name']
  </code></pre>
  
  <p>Is it possible to send json data on form submit, so that I can access data using [1]</p>
  
  <p>The reason I am trying to send JSON data on form submit is because I have a server which serves REST API for command line clients. And I would like to use same server and endpoint to serve browser based clients.</p>