CODEWITHSUNDEEP
htmlnode.js
dev777
dev777

Reputation: 1019

How to send the response to the same html page after clicking submit button using node.js

Onclick of submit button,I'm redirecting the data "name" to this url http://localhost:3000/getfileNames.But, now I'm trying to get the data "name" to same html page(http://localhost:3000/login).Can anyone please help me out regarding this ...

My sample.html:

<html>
<head>
</head>
<h1>
Login
</h1>

</head>
<body>
    <div id="formContainer">
        <form method="post" action="/getfileNames">
             Name: <input type="text" name="name" id="name" placeholder="name"> <br><br>
             Password: <input type="text" name="pwd" id="pwd" placeholder="password"> <br><br>
            <input type="submit" name="submit" value="submit" />
        </form>
    </div>
</body>
</html>

My index.js:

var express = require('express');
var router = express.Router();


router.get("/login", function(req, res)
{

    res.sendFile("login.html", {"root": __dirname});

});


router.post('/getfileNames', function(req, res) {
    console.log(req.body.name);
    res.send('Name: ' + req.body.name);
});




module.exports = router;

Upvotes: 2

Views: 3800

Answers (1)

Vladimir G.
Vladimir G.

Reputation: 885

If you want to build some kind of auth, I suggest to use server-side template system e.g. Jade. So your code would be like: 

var express = require('express');
var router = express.Router();


router.get("/", function(req, res)
{
    if(req.user)
       res.render('index', {user: req.user.name})
    else res.redirect('/login');
});
router.get('/login', function(req, res) {
    res.render('login');
});

router.post('/login', function(req, res) {
    /* Log user in, set cookies, whatever */
    res.redirect('/');
});

In top of the app you have to use some some auth middleware (e.g. passport.js or write it by yourself). Of course, you can just make AJAX to get user name but I don't think it's a good solution in this case.

UPDATE

If you just want to show some text you stored on server.

index.js

<html>
<head>
</head>
<h1>
Login
</h1>

</head>
<body>
    <p id="savedName"></p>
    <div id="formContainer">
        <form>
             Name: <input type="text" name="name" id="name" placeholder="name"> <br><br>
             Password: <input type="text" name="pwd" id="pwd" placeholder="password"> <br><br>
            <button name="submit" value="submit" id="btn"/>
        </form>
    </div>
</body>
</html>

client.js

$(function(){
   $.get('/name').done(fucntion(name){   $('#savedName').text(name) }).fail(alert);  


   $('#btn').click(function(){
     var name = $('#name').val();
     var pwd = $('#pwd').val();
     $.post('/name', {name: name, pwd: pwd}).done(fucntion(){ $('#savedName').text(name) }).fail(alert);
  })

})

server.js

var express = require('express');
var router = express.Router();

var name = "";
router.get("/", function(req, res)
{
    res.sendFile("login.html", {"root": __dirname});

});

router.get('/name', function(req, res) {
    res.send(name);
});

router.post('/name', function(req, res) {
    name = req.body.name;
    res.senStatus(200);
});

Upvotes: 2

Related Questions