node.js: How can I output a variable directly to index.html

Question

How can I get the user inputs from index.html, process in node and output the result back into the index.html? Instead of outputting - as currently does - to a new page.

Form file

var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.get('/', function(req, res){
res.sendFile('index.html', { root: __dirname}); 

app.post('/mess', function(req, res){ //means same dir
    var userNum1 = req.body.num1; 
    var userNum2 = req.body.num1; 
    var answer = parseInt (userNum1) + parseInt (userNum2);
    res.send ('The answer is ' + answer);
});

app.listen(80);

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Forms></title>
    </head>
    <body>
        <form action="mess" method="post"> 
            <p>Enter a number:</p>
            <input type="text" name="num1" placeholder="..." />
            <br>
            <p>Enter a number:</p>
            <input type="text" name="num2" placeholder="..." />
            <br>
            <button type="submit">Submit</button>
            <br>
        </form>
    </body>
</html>

What template engine are you using? Without a template engine, it's very difficult to have a "dynamic" view, so to speak. — qJake
– qJake, Commented Jan 7, 2015 at 19:46
Here's a list of template engines that support Node.js. Popular ones include Jade, Kiwi, Swig, and Twig, just to name a few. — qJake
– qJake, Commented Jan 7, 2015 at 19:48
If you don't want to load a new page, you can use javascript on the html page and send an ajax request to your node.js server. Then you can update your page with the results. — drorw
– drorw, Commented Jan 7, 2015 at 20:38

mscdex · Accepted Answer · 2015-01-07 19:46:44Z

2

Probably the easiest way is to use ejs.

First npm install ejs. Then add this to your Express app code:

app.set('view engine', 'ejs');
// this allows you to render .html files as templates in addition to .ejs
app.engine('html', require('ejs').renderFile);

In your route handler you just do something like:

res.render('form', { answer: 'foo' });

and then your template (e.g. ./views/form.html) would look like:

<html>
<p> The answer is <%= answer %> </p>
</html>

answered Jan 7, 2015 at 19:46

mscdex

107k15 gold badges201 silver badges159 bronze badges

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

3 Comments

Pav108 Over a year ago

I amended the code following your instructions, added the template to the views folder. But I get, Error: Failed to lookup view "form" in views directory "C:\myapp\dick\views/form.html

teleaziz Over a year ago

I think you need to set the views folder also: ` app.set('views', '/server/views');`

mscdex Over a year ago

The default is __dirname + '/views', which I alluded to in my answer. Of course if you already have views, you may need to change the path accordingly.

suliak · Accepted Answer · 2015-01-07 22:05:53Z

0

An alternative to the EJS is to use socket.io. You can attach an event handler to each entry, or to the submit button and then use socket.io to send it from client to server, process it and have it sent back. Then you page can update on receiving the data from the server.

answered Jan 7, 2015 at 22:05

suliak

154 bronze badges

Collectives™ on Stack Overflow

node.js: How can I output a variable directly to index.html

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related