Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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:

  1. 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.

  1. 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?

like image 827
Robin Avatar asked Jun 05 '18 14:06

Robin


People also ask

How do you stay in the same page after submit a form in HTML?

You could include a hidden iframe on your page and set the target attribute of your form to point to that iframe.

How do you retain the values of form after submit in Javascript?

To keep the values, you must fill in the values on the server while rendering the page. Usually, you can simply copy the data from the HTML request parameters into the fields.

Can express handle multiple requests?

Express. js use different kinds of middleware functions in order to complete the different requests made by the client for e.g. client can make get, put, post, and delete requests these requests can easily handle by these middleware functions.


2 Answers

There are two ways to do this.

  1. Return a 204 No Content response. (app.post('/search', (req, res) => res.status(204).send());)
  2. 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).

like image 194
Quentin Avatar answered Sep 28 '22 02:09

Quentin


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
});
like image 29
pranav shinde Avatar answered Sep 28 '22 00:09

pranav shinde