Save data to mysql with node.js/express without refreshing page

Question

I am learning node.js and I have managed to save data into mysql with form submit. The code looks like this:

    app.post('/auth', function(request, response) { 
    let date = request.body.date;
    let user = request.body.user;
    let email = request.body.email;
    connection.connect(function(err) {
                if (err) throw err;
                console.log("Connected!");
                var sql = "INSERT INTO demotable (date, user, email) VALUES (?,?,?)"; 
                connection.query(sql, [date, user, email], function (err, result) {
                  response.end(); 
                });
              });
});

This works and the data is added to the table, but because I use input submit it takes me to a new page (/auth) afterwards. I need to update the database without updating or refreshing the whole page, meaning I cant use submit form. What is the best way to accomplish this instead?

Possible duplicate of [Prevent redirect after form is submitted](https://stackoverflow.com/questions/4038567/prevent-redirect-after-form-is-submitted) — dusthaines, Sep 18 '19 at 20:48
If you don't want to navigate to a new page or reload the existing page you'll want to accomplish this with an ajax `post` rather than a form submit. https://stackoverflow.com/questions/4038567/prevent-redirect-after-form-is-submitted — dusthaines, Sep 18 '19 at 20:49
@dusthaines - This is NOT a JQuery question, why are you treating it as such? — EternalHour, Sep 18 '19 at 21:58

score 2 · Accepted Answer · answered Sep 18 '19 at 21:36

I accomplished this by using an AJAX POST request on the client's side. Instead of having your button submit a form, have it perform a function with the onclick attribute. You can grab the values of each input with their IDs. As for the server side route, just use res.send() or whatever you'd like to send a simple response. In the function below, the response received is extremely simple. On your route, if the auth fails just do something like res.send({"status": "failed"}) and the AJAX call will receive that, see that (response callback).status is failed and alert the user, same with if the auth is successful (just changed failed to success in the res.send() call). Hope this helped!

function authenticate() {
    $.ajax({
        type: "POST",
        url: "/auth",
        data: {
            "date": Date.now(),
            "user": document.getElementById('usernameInput').value,
            "email": document.getElementById('emailInput').value
        },
        success: function(data) {
            if(data.status == "success") {
                alert("successfully authenticated!")
            } else if(data.status == "failed") {
                alert("failed authentication!")
            }
        }
    });
}

Thank you so much for your help! I used this and it worked great. It is always so much easier to learn if you have a working example. — Hejhejhej123, Sep 18 '19 at 22:41

score 0 · Answer 2 · answered Sep 18 '19 at 22:48

I used the code provided by bobmartin1234. On the server side I wrote the following code:

app.post('/auth', function(request, response) { 
let user = request.body.user 
let email = request.body.email;
let date = new Date(); //I added the date on the serverside instead

connection.connect(function(err) {
    if (err) throw err;
    console.log("Connected!");
    var sql = "INSERT INTO demotable (date, user, email) VALUES (?,?,?)"; 
    connection.query(sql, [date, user, email], function (err, result) { 
      if (err) throw err;
      console.log("1 record inserted");
    });
  });
});

Save data to mysql with node.js/express without refreshing page

2 Answers2