title: How to save data from a form into a JSON dictionary?
body: <p>The issue I am having is trying to save user input from a form into a JSON dictionary.  The HTML code for my form is as follows: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Untitled Document&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="keywords" content=""&gt;
      &lt;script src="store.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form action="cgi-bin/formmail.pl" method="post"&gt;
      Name: &lt;input id="name" type="text" name="name" value="" size="25" maxlength="50" /&gt;
      &lt;br/&gt;
      &lt;br/&gt;
      Date: &lt;input id="date" type="date" name="date" value="" size="25" maxlength="50" /&gt;
      &lt;br/&gt;
      &lt;br/&gt;
      Location: &lt;input id="location" type="text" name="location" value="" size="25" maxlength="50" /&gt;
      &lt;br/&gt;
      &lt;br/&gt;
      Category: &lt;select id="category"&gt;&lt;option value="landscape"&gt;Landscape&lt;/option&gt;
      &lt;option value="portrait"&gt;Portrait&lt;/option&gt;
      &lt;option value="conceptual"&gt;Conceptual&lt;/option&gt;
      &lt;option value="street"&gt;Street&lt;/option&gt;
      &lt;option value="fine art"&gt;Fine Art&lt;/option&gt;
      &lt;option value="people"&gt;People&lt;/option&gt;
      &lt;option value="abstract"&gt;Abstract&lt;/option&gt;
      &lt;option value="nature"&gt;Nature&lt;/option&gt;
      &lt;option value="architecture"&gt;Architecture&lt;/option&gt;
      &lt;option value="flower"&gt;Flower&lt;/option&gt;
      &lt;option value="general"&gt;General&lt;/option&gt;
      &lt;option value="animal"&gt;Animal&lt;/option&gt;
      &lt;option value="children"&gt;Children&lt;/option&gt;
      &lt;/select&gt;
      &lt;br/&gt;
      &lt;br/&gt;
      &lt;input type="button" value="Change details" onclick="insert();" /&gt;
  &lt;/form&gt;
      &lt;div id="display"&gt;      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I was previously using a JS function like this:</p>
  
  <pre><code>function insert() {
  var nameinput = document.getElementById("name").value;
  var dateinput = document.getElementById("date").value;
  var locationinput = document.getElementById("location").value;
    var category = document.getElementById("category").value;
  
  var messageBox = document.getElementById("display");
     var details = [nameinput, dateinput, locationinput,category];
    messageBox.innerHTML="Name: " + details[0]+"&lt;br/&gt;"+"Date: " + details[1]+"&lt;br/&gt;"+ "Location: " + details[2]+"&lt;br/&gt;" + "Category: " + details[3];
  } 
  </code></pre>
  
  <p>Does anyone know any tips on how I can accomplish this?  Thanks for the help!</p>