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
1 2 3 4 5 6 7 8 9 | 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
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | <!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"></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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <?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);}?> |