malleshtekumatla

How to submit a PHP form using ajax CALL?

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);
}
?>

Leave a Reply

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