Using Ajax/jQuery to make POST request to insert row to mysql table on node js server

Question

I have a form that takes in information such as name, age, etc, and the goal is to submit this information via the client side to insert this data into a mysql table row. However, I am not able to get the data to insert. Here is my client side JS code (the form id is 'form1' and the form submit button id is 'formSub', and the mysql table name is 'formTable'):

function insertData() {
    document.getElementById('formSub').addEventListener('click', function(event) {
        var formQuery = $("#form1").serialize();

        $.post('/insert', formQuery);
    });
}

This is my server side code (node.js):

app.post('/insert', function(req, res, next) {
    mysql.pool.query("INSERT INTO formTable (`name`, `age`, `city`) VALUES (?, ?, ?)", 
        [req.body.name, req.body.age, req.body.city], function(err, result) {
            if (err) {
                next(err);
                return;
            }
    });
});

This is the error I get:

POST http://ipaddress:3000/insert 500 (Internal Server Error)    jquery.min.js:4

Navigated to http://ipaddress:3000/?name=Bob&age=20&city=NYC

The form seems to be taking the data by looking at what is navigated to, but I don't see this data in the mysql table when I go to look at it in mysql. I'm not sure what to do.

score 0 · Answer 1 · answered May 29 '16 at 08:52

0

"Navigated to http://ipaddress:3000/?name=Bob&age=20&city=NYC" Doesn't that mean it's somehow sending the data via GET and not POST if you're URL encoding?

Is this using Express 3 or 4?

answered May 29 '16 at 08:52

P. Brown

94
1
3

Yeah, I'm still confused about that as well, this is Express 4 – scatterbrain29 May 29 '16 at 08:59
Apparently what you're doing is deprecated in 4 and works in 3. There's a thread here on a work around: http://stackoverflow.com/questions/24330014/bodyparser-is-deprecated-express-4 *edit* Workaround is the wrong term; I mean how to use it in #4 is on that link. – P. Brown May 29 '16 at 09:04
I tried calling: `app.use(bodyParser.json());` and `app.use(bodyParser.urlencoded({ extended: true }));`, but it still didn't work. On the server side I also noticed I'm getting the following error: `Error: ER_BAD_NULL_ERROR: Column 'name' cannot be null`, although my "Navigated to" notification indicates that the name key has a value and isn't null, so I'm not sure why I'm receiving that. – scatterbrain29 May 29 '16 at 09:50
What happens if you do the following: app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); app.post('/insert', function(req,res) { var name = req.body.name; var age = req.body.age; var city = req.body.city; console.log('Name: '+name+', Age: '+age+', City: '+city); req.end(); } – P. Brown May 29 '16 at 11:50
Hmmm, when I do that, I get the same "Column 'name' cannot be null" error – scatterbrain29 May 29 '16 at 16:13
1

Hmm, I finally figured it out, I had my form in a table format instead of just inputs with a submit button, so I scrapped the table and just had the inputs in the form, then it worked. I'm not really sure why that did it lol. Thanks for the help though – scatterbrain29 May 29 '16 at 16:55

Using Ajax/jQuery to make POST request to insert row to mysql table on node js server

1 Answers1