Connecting Node.JS to HTML Form

Question

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);
});

Luis Antonio Pestana · Accepted Answer · 2016-08-03T05:08:39.240

1

First, you have to setup a server to listen to the requests that you will send to your node.js web api.

I really like recommend you use express.js. It is a very powerful web server.

Read more in: https://expressjs.com/

I am writing some example for you soon.

Hope it help you.

UPDATE 1

Take a look at MEAN Stack
https://github.com/meanjs/mean

UPDATE 2

Here are some examples:
https://scotch.io/tutorials/setting-up-a-mean-stack-single-page-application
https://developers.openshift.com/languages/nodejs/example-meanstack.html

edited Aug 03 '16 at 05:08

answered Aug 03 '16 at 04:59

Luis Antonio Pestana

993
2
9
24

Thanks for the response!! Is there no simple way to just pass javascript arguments to node.js scripts? – Katserbot Aug 03 '16 at 05:20
hmmm, take a look at this post and let me know that is what do you want: http://stackoverflow.com/questions/4295782/how-do-you-extract-post-data-in-node-js – Luis Antonio Pestana Aug 03 '16 at 05:25

Connecting Node.JS to HTML Form

1 Answers1