In this tutorial we are going to see php form INSERT using Ajax call.
we need .html file in that file we are going to place the ajax call code in <script></script>tags.
Form action we have to give in script only. Here form is have one id after clicking that form we are calling the ajax.
call is : Ajax call
type: “POST”, (we need to mention GET / POST)
url: “./assets/php/getquote.php”,
data: form.serialize(),
SQL TABLE CODE
CREATE TABLE `contact1` (
`id` int(12) NOT NULL,
`name` varchar(200) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`lastname` varchar(200) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`email` varchar(200) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`phonenumber` varchar(200) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`city` varchar(200) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`message` varchar(200) COLLATE utf8mb4_unicode_ci DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
ajax_index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>malleshtekumatla</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Form INSERT using AJAX CALL</h2>
<form action="" id="formId" role="form">
<div class="mt-3">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" name="name">
</div>
<div class="form-group">
<label for="text">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">PhoneNumber:</label>
<input type="text" class="form-control" id="" placeholder="Enter PhoneNumber" name="phonenumber">
</div>
<div class="form-group">
<label for="pwd">city:</label>
<input type="text" class="form-control" id="" placeholder="Enter City" name="city">
</div>
<div class="form-group">
<label for="pwd">Message:</label>
<input type="text" class="form-control" id="" placeholder="Enter Message" name="message">
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
<button id="submitButton" type="submit">Submit</button>
</form>
</div>
<script>
$(() => {
$("#submitButton").click(function(ev) {
var form = $("#formId");
var url = form.attr('action');
$.ajax({
type: "POST",
url: "https://give yoursitename.com/ajax_insert.php",
data: form.serialize(),
success: function(data) {
},
error: function(data) {
}
});
});
});
</script>
</body>
</html
ajax_insert.php
<?php
$servername='localhost';
$username='UR DB USER NAME';
$password='YOUR PASSWORD';
$dbname = "YOUR DB NAME";
$conn=mysqli_connect($servername,$username,$password,"$dbname");
if($_POST) {
$name=$_POST['name'];
$lastname=$_POST['lastname'];
$email=$_POST['email'];
$phonenumber=$_POST['phonenumber'];
$city=$_POST['city'];
$message=$_POST['message'];
$sql = "INSERT INTO contact1 (name,lastname,email,phonenumber,city,message)
VALUES ('$name', '$lastname', '$email', '$phonenumber', '$city', '$message')";
if (mysqli_query($conn, $sql)) {
echo "New record has been added successfully !";
} else {
echo "Error: " . $sql . ":-" . mysqli_error($conn);
}
mysqli_close($conn);
}
?>