I am new to node.js and I'm trying to create an easy way for a user to input data into an html form, then on the click of submit the data is passed to a node.js script. The node.js script is a post script that takes the user's inputed data and then makes a post to a API and takes a return in JSON from the API. I am trying to get the returned JSON to be printed back onto the html page. How do you do this in a clean and easy manner?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Commute | Ad-hoc</title>
<link rel="stylesheet" href="css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container cf">
<div class="container cf">
<div>
<h1>Manual Query</h1>
<label>Mode</label>
<select id="modes">
<option value="driving">Driving</option>
<option value="walking">Walking</option>
<option value="cycling">Cycling</option>
</select>
<label>Latitude Origin</label>
<input type="text" name="latitude_origin" id="latitude_origin" value="37.791871">
<label>Longitude Origin</label>
<input type="text" name="longitude_origin" id="longitude_origin" value = "-122.396742">
<label>Latitude Destination</label>
<input type="text" name="latitude_dest" id="latitude_dest" value = "37.782461">
<label>Longitude Destination</label>
<input type="text" name="longitude_dest" id="longitude_dest" value = "-122.454807">
<button id="singleQuery" class="singleQuery" input type="default small">Run</button>
</div>
<div>
<h1>Multi-Query (.tsv)</h1>
<label>Upload</label>
<input type="file" name="pic" id="laserPrinters">
<button id="testLaser" class="default small" input type="default small">Run</button>
</div>
<div>
<h1>Result</h1>
<textarea rows="4" cols="50"> </textarea>
</body>
</html>
<script type="text/javascript">
var mode = $("#modes").val();
var latitude_origin = $("#latitude_origin").val();
var longitude_origin = $("#longitude_origin").val();
var latitude_dest = $("#latitude_dest").val();
var longitude_dest = $("#longitude_dest").val();
</script>
My Node.JS post script:
var request = require("request");
var options = { method: 'POST',
url: 'http://blah:8000/blah/blah/blah/blah/[latitude_origin]/[longitude_origin]/',
headers:
{ 'postman-token': 'blah',
'cache-control': 'no-cache' },
body: '{"query1":[latitude_dest,longitude_dest]}' };
request(options, function (error, response, body) {
if (error) throw new Error(error);
console.log(body);
});
