HTML page content
<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form id="sampleform" method="post">
<div>
Firstname:
<input type="text" name="firstname" id="firstname" />
Email:
<input type="text" name="email" id="email" />
<input type="submit" name="subBtn" id="subBtn" value="Clickhere" />
</div>
<div id="results"></div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#sampleform').submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: 'phppage.php',
data: $(this).serialize(),
success: function(resp)
{
var jsonData = JSON.parse(resp);
// user is logged in successfully in the back-end
// let's redirect
if (jsonData.success == "1")
{
$('#results').append("Firstname "+jsonData.firstname + "<br>");
$('#results').append("Email "+jsonData.emailid);
}
else
{
$('#results').append(jsonData.message");
}
}
});
});
});
</script>
</body>
</html>
PHP Page
<?php
if (isset($_POST['firstname']) && $_POST['firstname'] && isset($_POST['email']) && $_POST['email']) {
echo json_encode(array('success' => 1,
"emailid" =>$_POST['email'],
"firstname" =>$_POST['firstname']));
} else {
echo json_encode(array("failure"=>0,
'message' => ="there is something wrong with the data"));
}
?>
Programing Solutions 