Thursday, 5 May 2022

Steps to make Ajax POST request with JQuery and PHP

 step 1:- ajaxfrom.php file code :-



<!DOCTYPE html>

<html>

<head>

<title>Ajax POST request with JQuery and PHP</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<style type="text/css">

body {

font-family: calibri;

}

.box {

margin-bottom: 10px;

}

.box label {

display: inline-block;

width: 80px;

text-align: right;

margin-right: 10px;

}

.box input, .box textarea {

border-radius: 3px;

border: 1px solid #ddd;

padding: 5px 10px;

}

.btn-submit {

margin-left: 90px;

}

</style>

</head>

<body>

<form>

<div class="box">

<label>First Name:</label><input type="text" name="firstName" id="firstName" />

</div>

<div class="box">

<label>Last Name:</label><input type="text" name="lastName" id="lastName" />

</div>

<div class="box">

<label>Email:</label><input type="email" name="email" id="email" />

</div>

<div class="box">

<label>Message:</label><textarea type="text" name="message" id="message"></textarea>

</div>

<input id="submit" type="button" class="btn-submit" value="Submit" />

</form>

<script>

$(document).ready(function() {


$("#submit").click(function() {


var firstName = $("#firstName").val();

var lastName = $("#lastName").val();

var email = $("#email").val();

var message = $("#message").val();


if(firstName==''||lastName==''||email==''||message=='') {

alert("Please fill all fields.");

return false;

}


$.ajax({

type: "POST",

url: "submission.php",

data: {

firstName: firstName,

lastName: lastName,

email: email,

message: message

},

cache: false,

success: function(data) {

$("#response").html(data);

},

error: function(xhr, status, error) {

console.error(xhr);

}

});

});


});

</script>

<div id="response"></div>

</body>

</html>


step 2:- 

submission.php file code :


<?php


/*

* Write your logic to manage the data

* like storing data in database

*/


// POST Data

$name= $_POST['firstName'] . " " . $_POST['lastName'];

$email = $_POST['email'];

$message = $_POST['message'];


echo $name;

echo $email;

echo $message;


?>


or you can use with json code ..

<?php


/*

* Write your logic to manage the data

* like storing data in database

*/


// POST Data

$data['name'] = $_POST['firstName'] . " " . $_POST['lastName'];

$data['email'] = $_POST['email'];

$data['message'] = $_POST['message'];


echo json_encode($data);

exit;


?>

No comments:

Post a Comment