Take HTML form and pass values to variables in node.js function

Question

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.

Possible duplicate of How do you extract POST data in Node.js? — PMV
– PMV, Commented Aug 9, 2017 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
– ravi_javi, Commented Aug 9, 2017 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
– PMV, Commented Aug 10, 2017 at 0:19

Rayee Roded · Accepted Answer · 2017-08-09 23:52:19Z

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

answered Aug 9, 2017 at 23:52

Rayee Roded

2,6901 gold badge23 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ravi_javi Over a year ago

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)...

Stephen P Over a year ago

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 <form> that is in index.html should use method="POST" and action="/solve"

Rayee Roded Over a year ago

@Stephen is correct! this is the <form> line in the html: <form action="/solve" method="post">

Collectives™ on Stack Overflow

Take HTML form and pass values to variables in node.js function

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related