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
- Get current page URL in PHP
- Convert CSV to JSON in PHP
- Get keys from an associative array in PHP
- Sorting Arrays in 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.
<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.
<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.
<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
<?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!