In this tutorial, we are going to learn how to insert data in the MySQL database using PHP Ajax.
OK, Mainly Ajax is used for sending and receiving data from the server without reloading the page and the same page easily insert multiple data.
$ads={1}
First, we need to create three empty files
- dbconfig.php
- index.php
- savedata.php
And then, I already created a database and I named it studentresults and create a table student.
CREATE A TABLE:
CREATE TABLE student (
id int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
name varchar(100) NOT NULL,
email varchar(50) NOT NULL,
mobileno varchar(100) NOT NULL,
city varchar(50) NOT NULL
);
DBCONFIG.PHP
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname="studentresults";
$conn = mysqli_connect($servername, $username, $password, $dbname);
?>
INDEX.PHP
<html>
<head>
<title>Insert data in MySQL database using Ajax</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>
<body>
<div class="container py-5">
<h1 class="text-center py-2">Insert data in MySQL database using Ajax</h1>
<div class="col-md-8" style="margin:0 auto;">
<div>
<div id="success" class="alert alert-success close" style="display:none;">
</div>
<div class="mb-3">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Name" name="name">
</div>
<div class="mb-3">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Email" name="email">
</div>
<div class="mb-3">
<label for="Mobile NO">MobileNo:</label>
<input type="text" class="form-control" id="mobileno" placeholder="Mobile No" name="mobileno">
</div>
<div class="mb-3" >
<label for="city">City:</label>
<select name="city" id="city" class="form-select">
<option value="">Select</option>
<option value="Chennai">Chennai</option>
<option value="Mumbai">Mumbai</option>
<option value="Kerala">Kerala</option>
</select>
</div>
<div class="d-grid py-5">
<input type="submit" name="submit" class="btn btn-primary" value="Save" id="submit">
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>
</html>
Here, JQuery Ajax is used to post the data in database using PHP without page reload.
Read also:
<script>
$(document).ready(function() {
$('#submit').on('click', function() {
var name = $('#name').val();
var email = $('#email').val();
var mobileno = $('#mobileno').val();
var city = $('#city').val();
if(name!="" && email!="" && mobileno!="" && city!=""){
$.ajax({
url: "savedata.php",
type: "POST",
data: {
name: name,
email: email,
mobileno: mobileno,
city: city
},
cache: false,
success: function(data){
$('#success').show();
$('#success').html(data);
window.setTimeout(function() {
$(".close").fadeTo(100, 0).slideUp(100, function(){
$(this).remove();
});
}, 5000);
}
});
}
else{
alert('Please fill all the field !');
}
});
});
</script>
SAVEDATA.PHP
<?php
include 'dbconfig.php';
$name=$_POST['name'];
$email=$_POST['email'];
$mobileno=$_POST['mobileno'];
$city=$_POST['city'];
$sql = "INSERT INTO student(name, email, mobileno, city)
VALUES ('$name','$email','$mobileno','$city')";
if (mysqli_query($conn, $sql))
{
echo "Data Inserted Successfully..!";
}
else
{
echo "Error Occurred while Inserting...!";
}
mysqli_close($conn);
?>