Syntax: index.html
<![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="container" class="col-xs-6 col-xs-offset-3">
<div class="row">
<h2> Table Operations </h2>
<form method="post" id="add-subject-form" class="col-x-6" action="add_subject.php">
<div class="form-group">
<label for="subject-name">Add a Subject</label>
<input type="text" name="subject_name" class="form-control" required>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="add subject">
</div>
</form>
<div class="col-xs-6">
<div id="subject-result"> </div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$("#add-subject-form").submit(function(evt){
evt.preventDefault();
var postData = $(this).serialize();
var url = $(this).attr('action');
// alert(postData);
$.post(url, postData, function(php_table_data){
$("#subject-result").html(php_table_data);
// $("#add-car-form")[0].reset();
});
});
});
</script>
]]>
Syntax: add_subject.php
<![CDATA[
<?php
$connection = mysqli_connect('localhost', 'root', '','atnyla');
if(isset($_POST['subject_name'])){
echo 'Data recieved <br>';
echo $_POST['subject_name'];
}
?>
]]>
Without Page load add a form value using Ajax
Syntax: Index.html
<![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="container" class="col-xs-6 col-xs-offset-3">
<div class="row">
<h2> Table Operations </h2>
<form method="post" id="add-subject-form" class="col-x-6" action="add_subject.php">
<div class="form-group">
<label for="subject-name">Add a Subject</label>
<input type="text" name="subject_name" class="form-control" required>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="add subject">
</div>
</form>
<div class="col-xs-6">
<div id="subject-result"> </div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$("#add-subject-form").submit(function(evt){
evt.preventDefault();
var postData = $(this).serialize();
var url = $(this).attr('action');
$.post(url, postData, function(php_table_data){
$("#subject-result").html(php_table_data);
});
});
});
</script>
]]>
Syntax: add_subject.html
<![CDATA[
<?php
ob_start();
$connection = mysqli_connect('localhost', 'root', '','atnyla');
if(isset($_POST['subject_name'])) {
$subject_name = $_POST['subject_name'];
$query = "INSERT INTO subjects(Subject_Name) VALUES('$subject_name') ";
$update_subject_name = mysqli_query($connection, $query);
if(!$update_subject_name) {
die("QUERY FAILED");
}
exit;
}
?>
]]>
Add a Subject into table and See it instantly Using Ajax in same page without page loading
Syntax: Index.html
<![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="container" class="col-xs-6 col-xs-offset-3">
<div class="row">
<h2> Table Operations </h2>
<form method="post" id="add-subject-form" class="col-x-6" action="add_subject.php">
<div class="form-group">
<label for="subject-name">Add a Subject</label>
<input type="text" name="subject_name" class="form-control" required>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="add subject">
</div>
</form>
<div class="col-xs-6">
<div id="subject-result"> </div>
</div>
<div class="row">
<div class="col-xs-6">
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody id="show-subjects"></tbody>
</table>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
/**********Update Subject Table Display with time ****************/
setInterval(function(){
updateSubject();
}, 2000);
$("#add-subject-form").submit(function(evt){
evt.preventDefault();
var postData = $(this).serialize();
var url = $(this).attr('action');
$.post(url, postData, function(php_table_data){
$("#subject-result").html(php_table_data);
});
});
function updateSubject(){
$.ajax({
url: 'display_subject.php',
type: 'POST',
success: function(show_subject){
if(!show_subject.error) {
$("#show-subjects").html(show_subject);
}
}
});
}
});
</script>
]]>
Syntax: add_subject.php
<![CDATA[
<?php
ob_start();
$connection = mysqli_connect('localhost', 'root', '','atnyla');
if(isset($_POST['subject_name'])) {
$subject_name = $_POST['subject_name'];
$query = "INSERT INTO subjects(Subject_Name) VALUES('$subject_name') ";
$update_subject_name = mysqli_query($connection, $query);
if(!$update_subject_name) {
die("QUERY FAILED");
}
exit;
}
?>
]]>
Syntax: display_subject.php
<![CDATA[
<?php
ob_start();
$connection = mysqli_connect('localhost', 'root', '','atnyla');
$query = "SELECT * FROM subjects";
$query_subject_info = mysqli_query($connection, $query);
if(!$query_subject_info) {
die("Query Failed" . mysqli_error($connection));
}
while($row = mysqli_fetch_array($query_subject_info)) {
echo "<tr>";
echo "<td>{$row['Subject_Id']}</td>";
echo "<td>{$row['Subject_Name']}</td>";
echo "</tr>";
}
?>
]]>
