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.
Checkout more articles on PHP
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
Let’s create a simple contact form in HTML which contains the name, email and message fields.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <html> <head> <title>Form submit without refresh</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div id="container"> <form method="post" action="" id="contactform"> <div class="form-group"> <label for="name">Name:</label> <input type="text" class="form-control" id="name"> </div> <div class="form-group"> <label for="email">Email Address:</label> <input type="email" class="form-control" id="email"> </div> <div class="form-group"> <label for="message">Message:</label> <textarea name="message" class="form-control" id="message"></textarea> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> <div class="result"> </div> </div> </body> </html> |
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.
1 2 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <script> $(document).ready(function () { $('.btn-primary').click(function (e) { e.preventDefault(); var name = $('#name').val(); var email = $('#email').val(); var message = $('#message').val(); $.ajax ({ type: "POST", url: "form_submit.php", data: { "name": name, "email": email, "message": message }, success: function (data) { $('.result').html(data); $('#contactform')[0].reset(); } }); }); }); </script> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <?php //Database connection $dbhost = 'localhost'; $dbuser = 'root'; $dbpass = ''; $db = 'demo'; $conn = mysqli_connect($dbhost, $dbuser, $dbpass , $db) or die($conn); //insert into database if(!empty($_POST)) { $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; mysqli_query($conn, "insert into users (name, email, message) values ('$name', '$email', '$message')"); echo "Name : ".$name."</br>"; echo "Email : ".$email."</br>"; echo "Message : ".$message."</br>"; } ?> |
That’s it for today.
Thank you for reading. Happy Coding!
Excellent post! Thanks for the content.It saves my time. Thanks a lot.
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.
Hi Germano,
You can store the first form data in session and submit it along with the second-page form request.
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?
Refer to the following article for jQuery validation in PHP.
https://www.cluemediator.com/form-validation-using-jquery-in-php