Insert Data Into MySQL Database using jQuery + AJAX + PHP

today we shall see how to insert data into MySQL database using jQuery and PHP jQuery has an ajax method we will be using the shortcut that is the post method of jquery to implement the ajax @exif equation of this HTML form and the insertion of user entered values into the mysql database I will take in take a form and give it an ID called my form see here we have taken post as the method I will take an input box and name it as name itself because the user would be entering his or her name in this input box which is a textbox the second input box will hold age of the person now the button to submit the date on I will give it an ID called su B meaning submit also let me take a span here so that I could display some information like the record was inserted or it was wasn't insulted so this is our HTML form now before that I'll connect our form that is HTML to the database if you don't know PHP please visit the PHP category on our blog that is techno tip dot form this is a simple tutorial you need not know much about PHP here the connection the first line of code is connecting to the SQL server with the username root we do not have any password so have left it empty let me run the server first vamp server I will open PHP myadmin here we have a database called test I will create a table called user with two fields in it first one being the name which is worker I will give the length as 15 next age which is an integer a length of 3 is okay for me right now okay we have a database called test inside which we have a table called user now select the database test and get connected to it and save it as DV dot PHP now the actual code to save the user enter data into database goes here before that let me connect to the database by including DB dot PHP file so we got connected to the database test once the user hit hits the Save button the name and the age gets passed to this file using post method which we will store inside a local variable called name similarly for the age now write a simple SQL statement that is insertion insert into user is the table name so insert into user values our user table has two values two fields in it namely name and age which we will pass here the user enter name and age well I will wrap this inside a PHP function called MySQL underscore query which processes this my SQL statement I'll also check if it was successful if the execution of the processing of this my SQL statement was successful I'll say successful successfully inserted if not I'll say maybe like something like insertion fail so these these two things either successfully inserted or insertion fail will be returned toward my script that is the script we would write next so user hits submit which the user entered values and this name and age would be pass it to user info dot PHP which we would collect inside the local variables name and then age and by forming a simple my SQL statement we would execute it and insert inside the user table now before proceeding let's see how it works on a browser post inside post folder and techno tip our company has been running for two years now it's a C inserted successfully inserted message comes but the page gets redirected to user info dot PHP which we don't want we want to add jexif i that which means which shouldn't get redirected all the things should appear on the same page that is index dot PHP instantly without reloading the page once the user hits the submit button that is the button which has an ID for sqb we will call an anonymous function now before inserting user entered values we we want to serialize these data so I'll serialize the data and store it inside a local variable called data so get select our form and its input fields then we have a method called serialized array which formats the input data into value into property and value so then select the file to which we need to pass the user entered data we select the form and its attribute action which has the file name to which we need to pass the user entered data next the serialize the data once this data has been sent to this file it returns something which would be stored as info here the output from user info dot PHP after processing so this is user info dot PHP which has this base codings after execution it either tell successfully inserted or fail which would be stored inside info so using this output we need to echo or else okay we would append it to the span tag which has an ID for result so dot HTML element this info variable which has the output of user info dot PHP instead of writing this data I will just cut this out and paste it here to make it look compact so so ultimately you have only one line of code to learn here and an important thing that is once the user hits the submit button it shouldn't get redirected to user info dot PHP file so I will select my form that is the ID of the form inside our index dot HTML and the submit I'll write the function and tell return 0 which means don't get redirected to any other pages once the user hits this button which has an ID sub that's it now open index dot PHP file so - my name 25-years save successfully inserted look at the database here ok it has been inserted successfully and this file didn't get redirected to some other pages now the fault is name my name and age is still here which doesn't make any sense once the user hits the submit button let us clear those fields I will write a function custom function called clear input select the form that is my form and its input fields all the input fields so loop through each of the input field using each write an anonymous function and tell and then set its value the input box being loop that is being iterated now which is being selected its value should be nothing which makes it here that is empty now once you write it call this clear input function in sign this submit are inside here click so for the click event of the button for clear input let us look at it and say with a 24 over years page save successfully inserted and the box has been clear ok practice this for next videos we will show how to retrieve the data from the database using JSON that is JavaScript object notation it would be more interesting and learning insertion and extraction of data from the database would make all the fun and make your applications like desktop application so please share this video with your friends on Facebook Google+ LinkedIn Twitter etc also email your friends about techno tip calm gaze deep subscribe to techno tip Broadcom and power youtube channel also like this video on youtube

Channel: Technotip

Views: 329,624

Keywords: jQuery, AJAX, PHP, post method, insertion of data, MySQL, Insert (SQL)

Id: gvGb5Z0yMFY

Length: 12min 13sec (733 seconds)

Published: Tue Oct 02 2012