Here we have a form with an id called myForm, which has 2 input box.
A button with id sub. And a span tag with an id of result.

Once the user enters his/her name, age and hits Save button, the information will be sent to userInfo.php file present in the action field, via post method.

Using AJAX technique, we would make sure the form doesn’t redirect to userInfo.php file after the submission, and we’ll display appropriate message to the user on index.html file itself after the user entered values has been processed by userInfo.php file.

Once the user hits the Save button of our form in index.html, the information is being sent to userInfo.php

Where the user entered values are being copied to local variables $name and $age.
Next a simple MySQL query is formed to insert the data into the tableuser.

Using mysql_query() standard php function, the MySQL query is being processed.
Using if else conditional statements, we check if the process was successful or failed. Based on which we echo the result.

We fetch the URL from myForm form, from its action attribute.
Serialize all the user entered input’s.
SerializeArray makes the input into property: value pair.
After the data is passed to the url and is being processed, the result will be returned back to the callback function and is caught in info variable, and is inserted inside the span tag using html() method – which is similar to innerHTML() method of JavaScript.

38 thoughts on “Insert Data Into MySQL: jQuery + AJAX + PHP”

Nice tutorial. I coded your example using PostgreSQL instead MySQL. It gave me some problems for some hours ’cause I used the same table name and the field name “name”. Those are reserved words and you need to escape them in order to use them.

Anyway, I see you put the script elements after the form instead inside the head element. Playing around with it I saw that moving around just the element that include my_script.js the form is redirected to userInfo.php. To avoid that just put the first jQuery blocks inside a ready function like this:

But writing $(‘#myForm’).submit(function() { return false; }); outside $(document).ready(); won’t have any problem, as .submit will be invoked once the user clicks on the submit button of #myForm form.

Hi, I liked your tutorial, but I have run into an issue which is my form keeps redirecting to the php file. The data is saved in the db, but I cannot stop the redirection, plz any help would be greatly appreciated! I post my code:

hi satish your video is really simple to understand php and ajax, now can you help me to delete record (row of records) which are fetched from the database using jquery. i mean first display the records using jquery and php and then delete record from that table. thank you.

I am very new to Jquery. Not sure what I am doing wrong but I followed along a half a dozen times and I still have the same problem. It is as if the browser (Chrome, EI7+) does not recognize the My_Scripts.js file. Pressing button redirects to userInfo.php. I am using XAMPP server. All files are int the htdocs folder. Is there something that needs to be configured in order for My_Scripts.js to be recognized?

Nice to know that you could fix it yourself ..sorry, I was not able to help early on – this is a old tutorial and I’ve moved to angular from long back. I don’t do jQuery these days. Anyway, happy to know that my old tutorials could serve a bit too.