CODEWITHSUNDEEP
javascripthtmlnode.jsexpress
Pav108
Pav108

Reputation: 47

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

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>

Upvotes: 0

Views: 1283

Answers (2)

suliak
suliak

Reputation: 15

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.

Upvotes: 0

mscdex
mscdex

Reputation: 106696

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>

Upvotes: 2

Related Questions