0

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: 

<!DOCTYPE html>
<html>
<head>
    <title>Untitled Document</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <script src="store.js" type="text/javascript"></script>
</head>
<body>
<form action="cgi-bin/formmail.pl" method="post">
    Name: <input id="name" type="text" name="name" value="" size="25" maxlength="50" />
    <br/>
    <br/>
    Date: <input id="date" type="date" name="date" value="" size="25" maxlength="50" />
    <br/>
    <br/>
    Location: <input id="location" type="text" name="location" value="" size="25" maxlength="50" />
    <br/>
    <br/>
    Category: <select id="category"><option value="landscape">Landscape</option>
    <option value="portrait">Portrait</option>
    <option value="conceptual">Conceptual</option>
    <option value="street">Street</option>
    <option value="fine art">Fine Art</option>
    <option value="people">People</option>
    <option value="abstract">Abstract</option>
    <option value="nature">Nature</option>
    <option value="architecture">Architecture</option>
    <option value="flower">Flower</option>
    <option value="general">General</option>
    <option value="animal">Animal</option>
    <option value="children">Children</option>
    </select>
    <br/>
    <br/>
    <input type="button" value="Change details" onclick="insert();" />
</form>
    <div id="display">      </div>
</body>
</html>

I was previously using a JS function like this:

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]+"<br/>"+"Date: " + details[1]+"<br/>"+ "Location: " + details[2]+"<br/>" + "Category: " + details[3];
}

Does anyone know any tips on how I can accomplish this? Thanks for the help!

Jeremy Brooks
  • 49
  • 1
  • 9
  • http://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery – garryp Feb 18 '16 at 15:39
  • what exactly is the issue you are facing? your JS function doesn't seem to be using any JSON. – aemorales1 Feb 18 '16 at 15:48
  • I'm not sure how to use JSON to save the users input data. I would like it to do something pretty similar to the JS function, but I'm not sure if I can even do that in JSON. It is for a gallery app so I need the users input to be stored in the JSON dictionary. – Jeremy Brooks Feb 18 '16 at 15:56
  • You don't use JSON to save data. JSON is a format for your data. You can format your data in any way you'd like including JSON. Where are you trying to save your data? I assume the response from @garryp doesn't help since you are not familiar with JSON. – aemorales1 Feb 18 '16 at 16:04
  • The data, according to my superior, needs to be in a JSON dictionary. I'm not sure why he can't just use the JS array I'm already saving it to, but he's adamant about it being in a dictionary. – Jeremy Brooks Feb 21 '16 at 16:22

1 Answers1

-1

You can use serializeArray()
Example: https://jsbin.com/fokuqaw/edit?html,output

Bye ^.^

Cristián Vargas Acevedo
  • 580
  • 11
  • 16