3

Problem Statement: I have a simple HTML form that asks for three numbers from the user. When they hit submit, I would the form to be passed to a node.js file and assign each value to a variable.

Below is my HTML file:

<body>
<form action="/" method="post">
<fieldset>
First number: <input type="number" name="param1"><br>
Second number: <input type="number" name="param2"><br>
Third number: <input type="number" name="param3"><br>
<input type="submit" value="submit" />
</fieldset>
</form>
</body>

And here is the little bit I have for the node.js file:

var http = require('http');
var math = require('mathjs');

    var m = 3;
    var n = 5;
    var o = 7;
    var p = 2;

http.createServer(function(req,res) {

function pleaseSolve () {

    var comp = math.chain(m)
    .add(m)
    .divide(p)
    .multiply(o)
    .done();

res.writeHead(200, {'Content-Type': 'text/html'});
res.end("The answer is " + comp);

}

pleaseSolve();

}).listen(8080);

Instead, I would like a method or something similar that would assign those variables using input from the HTML form rather than me simply hard-coding them.

EDIT: I've already been downvoted and I have been searching the web for two days for an answer for this and I haven't found one. Please be constructive and at least link another post versus downvoting and being non-constructive.

ravi_javi
  • 55
  • 1
  • 5
  • 1
    Possible duplicate of [How do you extract POST data in Node.js?](https://stackoverflow.com/questions/4295782/how-do-you-extract-post-data-in-node-js) – PMV Aug 09 '17 at 23:44
  • Really? I had seen that question before, but there were a lot of answers that were now deprecated. Also, none of them seemed to explicitly say how to assign a specific value in the HTML to a specific variable in the node file. – ravi_javi Aug 09 '17 at 23:52
  • When you parse the POST variables, the name of the input field is the name of the property containing the data, as illustrated in the examples on that link. For example, request.body.foo contains the value of the input named "foo". And the accepted answer shows both an older and newer way to do this (depending on if you're using express version 3.x or 4.x). – PMV Aug 10 '17 at 00:19

1 Answers1

3

This following Node.js code will solve your question. You need a route to return your main html file and a route that gets post data and returns a result based on this data.

var express = require('express')
var http = require('http');
var math = require('mathjs');
var bodyParser = require('body-parser');

var app = express()

// use body parser to easy fetch post body
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json())

// route to '/' to return the html file
app.get('/', function (req, res, next) {
  res.sendfile('index.html');
});

//route that receives the post body and returns your computation
app.post('/solve', function (req, res, next) {
  pleaseSolve(req.body, res);
});

app.listen(8080);

function pleaseSolve(parms, res) {
  //get the parameters based on input name attribute from the html
  //and parse strings to numbers
  var m = +parms.param1;
  var o = +parms.param2;
  var p = +parms.param3;

  var comp = math.chain(m)
    .add(m)
    .divide(p)
    .multiply(o)
    .done();

  res.writeHead(200, { 'Content-Type': 'text/html' });
  res.end("The answer is " + comp);
}
Rayee Roded
  • 2,440
  • 1
  • 20
  • 21
  • 1
    First of all, thank you so much for your help so far. I have followed your example, but when I launch the node server and submit the user input, the next page states "Cannot POST /this_folder_calc.js". Do you know what may be the problem? Should app.post point to a specific html file? Right now mines just says "app.post('/', function(req,res,next)... – ravi_javi Aug 11 '17 at 21:58
  • 1
    Let's see, I know exactly _zero_ about node.js or its express thing, but it seems to me that `app.post('/solve' ... )` suggests that it's listening for a POST on the path `/solve` so the `
    ` that is in index.html should use `method="POST"` and `action="/solve"`
    – Stephen P Aug 11 '17 at 23:47
  • @Stephen is correct! this is the
    line in the html:
    – Rayee Roded Aug 14 '17 at 18:58