0

I am working with node/express/react. I am using a form on the frontend to delete entries from the backend database:

<form id="delete" action="/delete" method="POST">

    <p>First name:</p>  
    <input type="text" name="first" />

    <p>Last Name:</p>
    <input type="text" name="last" />

    <input type="submit" value="delete person from database" />

</form>

The entry gets deleted from the backend database. But I get this message at the bottom of the browser window on the frontend:

Waiting for localhost...

Then after about a minute, I get this:

"This page isn’t working localhost didn’t send any data. ERR_EMPTY_RESPONSE"

Here is the relevant express endpoint:

app.post('/delete', function(req, res) {
    var first = req.body.first;
    var last = req.body.last;

    db.collection("employees").remove({first:first, last:last}, function(error, response) {
        if (error) throw error;
        console.log("success");
    });

});

If I do send data via res.send() or res.json(), then the entire front-end web page gets erased and replaced with whatever data was sent from the backend.

Often with form submission, you send the user to a different web page after submit. But in my case, I want the user to stay on the same page without reloading the page.

How do I get the error messages to go away in this case?

code beginner
  • 285
  • 3
  • 14

1 Answers1

0

For the node/express part of the question, "How do I get the error messages to go away in this case?", you have to send some sort of response from the endpoint:

app.post('/delete', function(req, res) {
    var first = req.body.first;
    var last = req.body.last;

    db.collection("employees").remove({first:first, last:last}, function(error, response) {
        if (error) throw error;
        console.log("success");
        res.status(200).send({msg: `Deleted ${first} ${last}, RIP`}); //returning a status object, but you could return anything useful to the client code here.
    });

});

This gets rid of the error, but you would still be redirected to a page showing the JSON output from the API.

Staying on the same page after submitting a form is discussed here and many other posts as well. You mention it is a React app--you might want to use that framework for making API calls from your frontend.

Henry Mueller
  • 1,309
  • 9
  • 8
  • thanks henry. so you are indicating the error relates to my wanting to stay on the same page... i thought it was something else causing the error. i know this trick to stay on the same page:
    . but express is using action="/delete" as an endpoint. maybe i will need to get the info to the server endpoint using
    and then write myFunction to get the form data up to the /delete endpoint on the server.
     – code beginner Jun 26 '18 at 04:12
  • would using sockets/listeners be a better paradigm if you want to use a form repeatedly without leaving the page? – code beginner Jun 26 '18 at 04:18
  • 1
    No, it is completely normal to use http requests to an API on the server. Essentially anything based on AJAX does this (which includes any SPA architecture--Angular, React, even jquery and the DOM have support for this). A traditional form+action UI predates these techs, which is what you have as it stands. But there is not any real reason to restrict to your app to straight HTML these days. AJAX (i.e. making an http request to a server and returning data rather than a new page) has been around for a very long time. – Henry Mueller Jun 26 '18 at 13:21
  • It it makes it any more clear, all the other techniques use JavaScript on the client in addition to the HTML of the form you currently have. You mention react in your post, so I am assuming you already have some of this in your app. Here is a good tutorial on a very minimal form submission using react: https://medium.com/@everdimension/how-to-handle-forms-with-just-react-ac066c48bd4f – Henry Mueller Jun 26 '18 at 13:32
  • thanks henry. i'm getting the feeling i can omit action="/delete" from the form tag, and handle the form submission entirely using javascript onSubmit(). i – code beginner Jun 26 '18 at 22:29
  • Yep! But you will still have to update the function in node.js to get rid of the error message. Good luck! – Henry Mueller Jun 26 '18 at 22:32
  • the form would be used as a data gathering device only, and not a transmission device. i've never done that before, but the link you referenced talks about a javascript feature called FormData ... again a new one for me. https://developer.mozilla.org/en-US/docs/Web/API/FormData. looks like i have many hours of learning ahead on this topic, but should be worth it. thanks for the concept ideas. i think i can get the bug to go away with this new paradigm. – code beginner Jun 26 '18 at 22:37