Submit a form without page refresh using jQuery, Ajax, PHP and MySQL

In this tutorial, we’ll explain to you how to submit a form without page refresh using jQuery, Ajax, PHP and MySQL.

Submit The Form Without Page Refresh Using Ajax, jQuery and PHP, Form submit with AJAX passing form data to PHP without page refresh, Submit form without reload using jQuery AJAX in PHP MySQL, how to insert data with ajax and php without page refresh, Submit form without page reloading, Submit ajax form without page refresh php, Form Submit Without Page Refreshing- jQuery/PHP, Submit php form without page refresh using Jquery Ajax, Submit Form using jQuery AJAX and PHP without Page Refresh, form submission using ajax php and javascript, submit form using ajax in php example, insert data in php using jquery ajax without page refresh, submit form php same page, submit form php code, submit form php mysql, submit form php without leaving page, submit form php ajax.

Now, we’ll create HTML forms which contain the name, email and message fields. After submitting the form, data will be stored into the database and displayed below the form.

Steps to submit a form without refreshing the page

  1. Create HTML form
  2. Include jQuery and Bootstrap library
  3. Call Ajax method
  4. Store data into database

1. Create HTML form

Let’s create a simple contact form in HTML which contains the name, email and message fields.

2. Include jQuery and Bootstrap library

If you noticed that we have already included the jQuery and Bootstrap library in HTML page. jQuery will be used to work with Ajax call and for the styling, bootstrap library is added to the form.

3. Call Ajax method

Now we call the ajax method to submit the form without refresh. You can also validate the form using jQuery validations.

4. Store data into database

It’s time to store data into a database. So let’s create a file called form_submit.php to write PHP code for data connection and save it into the database.

form_submit.php

That’s it for today.
Thank you for reading. Happy Coding!

If you found value in this article,
you can support us by buying me a coffee! ☕

You may also like...

5 Responses

  1. phptechie says:

    Excellent post! Thanks for the content.It saves my time. Thanks a lot.

  2. Germano says:

    Hi, thank you very much for the post, well explained. Could you please be so kind and help. If I have two forms, how can I store the information of the first page to the second page and submit/send to both database and email without refreshing the page? The second form must be shown after hit the send button of the first page and after filling all form the information is sent to database and email of the recipient from the user.

    • Clue Mediator says:

      Hi Germano,
      You can store the first form data in session and submit it along with the second-page form request.

  3. Laljibhai Gajjar says:

    Thank you sir, very nice perfect solution for registration form, but one issue is that when I press submit button without entry and I check in to mysql its blanck entry also submited, so which solution for it means I cannot geting to blanck entry into mysql database system. which validation rule add into javascript?

Leave a Reply

Your email address will not be published. Required fields are marked *