PHP MySQL Insert Into Database Without Refreshing Page

by

Hello friends, in this PHP MySQL Insert into Database tutorial we will use jQuery AJAX method to insert values in our MySQL database without refreshing our web page. So lets begin.

PHP MySQL with AJAX Tutorial

  • You can read this tutorial or you can watch this playlist for complete detailed explanation.

What you need before starting with PHP MySQL Insert Tutorial?

  • WAMP / XAMPP server (I will be using wamp)
  • Notepad++ (notepad is also ok)
  • Little knowledge of PHP, SQL and JavaScript

Creating Database

  • First we will create a database
  • Go to phpmyadmin (localhost/phpmyadmin)
  • Create a database
  • Create a table inside the database named users
php mysql insert
Creating Database

I have created a table name users. In users I have three columns (id, username and password) as you can see above. Id is primary key with an auto increment. So we will insert only username and password with our html form.

Creating HTML Form to Insert Values in Database

  • Now we will create our html form.
  • You can use the below html code to create your form.

  • As you can see we have one form with action = insert.php i.e. when we click on the button we will be redirected to insert.php.
  • The method is post and we have also given an id to our form which is myform.
  • The form has two inputs, one for username and other for password with name and id attribute.
  • We will use the id attribute to access the values from jQuery. So we have also added the jQuery file inside the head tag.
  • And at last we have a p element with an id result. This is to show the success message after successful insertion.
  • The above form will generate following output.
php mysql insert tutorial
index.html

Creating PHP Script to Insert Values in Database

  • Create a file named insert.php
  • First we will connect to our database.
  • For connecting we will define some constants.

  • Now we will connect to our database using the constants we defined.

  • Get the values which are coming from our form using post method.

  • Finally we will insert these values into our database

  • Your final php script for php mysql insert project is

  • Now try running your project.
  • It is working fine but we are getting redirected to insert.php. Our task is to insert without refreshing our redirecting the page. For this we will use jQuery AJAX method.

Using jQuery AJAX Methods to insert values in database without refreshing the page

  • Create a new file name insert.js
  • Add your insert.js to your html file below the form

  • First we will stop our form from getting redirected to insert.php

  • Try clicking insert button now, nothing will happen. 😛
  • Now we will execute our php script in background using jQuery post method.

  • We will use the above post method inside the click function of our button
  • So our final insert.js will be

  • Try running your project now. It is working fine the values are getting inserted in database without refreshing our page.
  • You can also download the project source from the link given below. And if you are having any confusion or doubts following the steps feel free to comment. Thank You 🙂

Checkout these tutorials as well:

  • Android Unit Test Room Database - Testing Room DAOs

31 thoughts on “PHP MySQL Insert Into Database Without Refreshing Page”

  2. Your way inserting data into database is not working when the file of insert.php saved in deepest folder. so “return false” failed!

    <form action='folder1/folder2/folder3/folder4/insert.php' ……..

    Could you give me the solutions..?

    Thx, Rgds
    Haryo

    Reply

  4. Thank you for the great job. I am able to get the database updated and success message. But it doesn’t empty the form. so same data can be submitted over and over. Ho can I fix that?

    Reply

      • I think you use this code:-
        $(‘#myform’).submit(function(){
        return false;
        });

        $(‘#insert’).click(function(){
        $.post(
        $(‘#myform’).attr(‘action’),
        $(‘#myform :input’).serializeArray(),
        $(‘#inputfield’).val(“”),
        function(result){
        $(‘#result’).html(result);
        }
        );
        });

        Reply

  8. I did what all you have done here. Starting from creating index.php then insert.php and insert.js.
    I added insert.js below the form inside the index.php and written action = “insert.php”.But still when I click on insert button, it shows success message in insert.php page which I don’t want. If you have a tutorial video in youtube then please let me know.
    Thank You.

    Reply

  11. Hey I got this nearly working. You see I am using more than one form on a page… an add to cart button on serveral products.

    I have changed the form id to form id from myform to myform12 or what ever the prod code is and have also changed the insert id accordingly as well. Then in the js code I have changed all of the ids to match the ones in my form.

    The problem i get is that my input values are not passing to the insert script. I get an Notice: Undefined index on the variables in the insert script 🙁

    Any ideas?

    Reply

  13. hi
    i have one template in which i can add rows dynamically through java script.
    now i wanted to add each row as a one record in my database (php mysql).
    i m beginner to php so cant handle it… can u pls help

    Reply

  15. Hello ,
    I have 1 page and four form tag which are step by step form i want to insert one by one page using ajax i serialize the form by its id but i get output with original text but with that original text there are add “+++++” sign into output,so i can not get proper output how can i fix the problem?

    Reply

  21. thank you so much.
    this is exactly what i have been looking for.
    but what about if i have two form on one page. how do i handle that.

    Reply

Leave a Comment