3

I know this might be a simple question and has a tutorial somewhere but I can't seem to find it. I generated an app using express-generatorand i added a simple form to a route

views/form.ejs

<div>
<h1>This is <%= name %></h1>
<form action="/form" method="POST">
    <input type="text" name="question" placeholder="question"><br>
    <input type="text" name="answer" placeholder="answer"><br>
    <input type="submit">
</form>

what i am trying to do is process the request after the form submission without doing anything to the page. Basically I want it to stay the same so I tried the following

routes/index.js

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

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

router.get('/form', function (req, res) {
    res.render('form', {name: "My Name"});
});

router.post('/form', function (req, res) {
    console.log(req.body);
});

module.exports = router;

what happens is that the browser keeps waiting for a response from the server. I tried adding next() but it gives an error, I also tried returning from the function with no use. So how can I make a post request or handle any route in general without responding to the client?

omarwaleed
  • 571
  • 7
  • 19
  • Visit https://stackoverflow.com/questions/50702693/how-to-stay-at-the-same-page-after-submitting-post-request-with-express I hope you may get the solution. – Kenil Modi Mar 08 '19 at 07:23

3 Answers3

1

I guess the question here is "why would you want to?"; What are you trying to achieve by allowing post requests that don't respond to the client?

Your best bet, I think, would be to do res.json(successOrFailureMessage) so that your client side application is informed of what's happened and can do something (or indeed nothing) from there. Otherwise it will hang whilst it waits for a response.

Nimmo
  • 116
  • 7
  • i just want to do some database manipulation without having to give the client any response currently – omarwaleed Sep 04 '16 at 12:52
  • You'll need to give the client a response of some sort (otherwise what are you going to do in case of error? Not let the client know?), your issue here is how you handle that response rather than what is actually sent. :) – Nimmo Sep 04 '16 at 14:56
  • I completely understand your concept but let's say if it's an error i will want to reply with a json containing the error message "without" refreshing the page or redirecting to anywhere. If there is no error then this json object is still given to the client but now empty. The problem here is that whenever `res.send()` is called, the view is changed and the is "not" what i want to happen – omarwaleed Sep 04 '16 at 18:08
  • Oh you know what, my bad - I know I said you should use res.send, but actually I meant res.json! This should solve your problem of the page refreshing. :) I've edited my previous response. – Nimmo Sep 04 '16 at 18:11
  • sorry but this didn't work either :/ it gives the same behavior as res.send() – omarwaleed Sep 04 '16 at 19:26
1

update your post code to:

router.post('/form', function (req, res) {
    console.log(req.body);
    res.render('form', {req: req.body});
});
amit
  • 21
  • 3
0

Updated the answer based on comments

Pass the parameters to ejs:

app.get('/form', function(req, res) {
res.render('form.ejs', {
    question: req.body.question,
    answer: req.body.answer
});
vijayst
  • 20,359
  • 18
  • 69
  • 113
  • doesn't work. `res.send({})` redirects to the path where the form is removed and it prints an empty json object – omarwaleed Sep 04 '16 at 12:55
  • it depends on how you are calling: via ajax or full form post. for full form post, do some operation, and redirect to /form or wherever you came from again. – vijayst Sep 04 '16 at 19:15
  • i am calling via full form submission. redirecting to the form loses all the data. i would like to keep the form filled without having to manually insert them by passing them back through the route. i have read somewhere that this might only be possible via ajax or via sth like angular... any thoughts? – omarwaleed Sep 04 '16 at 19:23
  • Nothing is "only" possible via Angular. This seems like a weird problem to be solving, but, assuming there's method to your madness here, perhaps you could return the user's data as an object after the POST, and redirect them to the form they were filling out, and repopulate the form's data with the data you've just returned to them. – Nimmo Sep 04 '16 at 23:02