Insert Data using Ajax Jquery and PHP

Rumman Ansari   2020-02-20   Student   Web Development > PHP-Ajax-JQuery   431 Share

Syntax: index.html 



<!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 



<?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 



<!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 



<?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 



<!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 



<?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 



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


?>
Share this Post: