How to stay at the same page after submitting post request with Express?

Question

I know this might be a simple question but I just didn't find the solution I want. I write a post route with express. like this:

app.post('/search', function(req, res){
    // Some code to get data from req and save data to db
    // Then want to stay current page.
});

My html:

<form action="/search" method="post">
     <input value="name" name="marker[name]">
     <input value="address" name="marker[address]">
     <input value="rating" name="marker[rating]">

     <button id="favo-button" type="submit">
         Submit
     </button>
 </form>

When user click submit button, the data sent through req to the post route, and there insert to db. Then I want the page not direct to anywhere but stay current page. I tried some ways but not handle it very well. what I tried:

in the route,

res.render('/search');

this makes the page re-render with the same view, but the page will flash because of the re-render.

don't do anything to the res in the route, then the page loading circle will never stop.

app.post('/search', function(req, res){
    var data = req.body.marker;
    // some code insert data to db
    // then do nothing to res. The page will stay but keep loading.
});

Is there a way to just do nothing to res and stay, meanwhile not keep the page loading?

Related: _[What is AJAX and how does it work?](https://stackoverflow.com/questions/6009206/what-is-ajax-and-how-does-it-work)_ — Luca Kiebel, Jun 05 '18 at 14:34

Quentin · Accepted Answer · 2023-01-24T15:42:32.840

23

There are two ways to do this.

Return a 204 No Content response. (In Express: app.post('/search', (req, res) => res.status(204).send());, but that's basic HTTP you can do in any server-side code)
Make the request with JavaScript (i.e. Ajax, e.g. with XMLHttpRequest) instead of submitting the form

(You could also submit the form to a hidden iframe, but that's just an ugly hack).

edited Jan 24 '23 at 15:42

answered Jun 05 '18 at 14:34

Quentin

914,110
126
1,211
1,335

2

Hi, what if I want to stay on the same page and give an alert 'data submitted successfully' and clear the form data?@Quentin – Akhila May 08 '20 at 22:34
Then pick option 2 and do the alert and clearing in JS. – Quentin Dec 23 '22 at 13:29

score 1 · Answer 2 · answered Jul 03 '20 at 08:29

You can do it in 2 ways:
1 - Do it using Jquery AJAX call, you need to write this code in your view page, not in controller or route of NODEJS App.

$("#YOUR_FORM_ID").on("submit", function () {
    $.ajax({
        url: '/search',
        type: 'POST',
        cache: false,
        data: { $("#YOUR FORM ID").serialize() },
        success: function (data) {
            alert('Success!')
        }
        , error: function (jqXHR, textStatus, err) {
            alert('text status ' + textStatus + ', err ' + err)
        }
    });
});

2 - By redirecting the request to the source request

app.post('/search', function(req, res){
   //Do Something
   res.redirect('/');//redirect to the page from where request came
});

How to stay at the same page after submitting post request with Express?

2 Answers2

Linked