Redirect after form submit or not?

Question

At the bottom of my personal page (1 page website) I have a contact form that sends a message to my database so I can read it later.

The problem is that if I don't redirect to anywhere, the page doesn't reload, which is what I want, but is searching for something and have a loading icon in the tab and eventually disconnects and show the "ECONNRESET" error from Cloud9.

If I do redirect back to /#contact (to the page and then down to the contact section), then it reloads the page, and that's not what I want to happen because of the site's functionality. It has some animations that load right after sending the message and the reload cancels them out and it looks terrible.

How do I make it so that the page doesn't have to reload after sending the message, meaning I don't have to redirect anywhere, but I also don't get the ECONNRESET error?

app.post("/", function (req, res){
  // Retrieve form data
  var name = req.body.name;
  var email = req.body.email;
  var subject = req.body.subject;
  var message = req.body.message;
  var newMessage = {name: name, email: email, subject: subject, message: message};
  // Save new message to database
  Message.create(newMessage, function (err, sendMessage) {
    if (err) {
      console.log(err);
    } else {
      console.log(sendMessage);
    }
  });
});

Mike Hamilton · Answer 1 · 2018-03-11T13:28:20.650

If you are not posting the form via AJAX, then you should redirect to the GET endpoint where your view is rendered. If you do not want to redirect, then at the very least you will need to have a res.render() call to render the correct view. The drawback to not redirecting is that if the user refreshes the page, they may get prompted to resubmit the form.

Message.create(newMessage, function(err, sendMessage){
    if(err){
        console.log(err);
    } else {
        console.log(sendMessage);
        res.render('contact'); //change 'contact' to the name of the view you are rendering
    }
});

score 0 · Accepted Answer · answered Mar 11 '18 at 19:32

I did some searching and I found a way to do it how I want it to work: no redirecting or reloading the page.

I removed the unnecessary error handling and console.log since all I need is for the form to send the data to my database so I can read it later.

app.post("/", function(req, res){
    // Retrieve form data
    var name = req.body.name;
    var email = req.body.email;
    var subject = req.body.subject;
    var message = req.body.message;
    var newMessage = {name: name, email: email, subject: subject, message: message};
    // Save new message to database
    Message.create(newMessage);
});

Apparently I need a Ajax/jQuery request, which looks like this:

$('form').submit(function(e){
    e.preventDefault();
    $.ajax({
        url:'/',
        type:'post',
        data:$('form').serialize(),
        success:function(){
            //whatever you wanna do after the form is successfully submitted
        }
    });
});

Source to the answer I found (First answer)

Redirect after form submit or not?

2 Answers2