Insert Data using Ajax Jquery and PHP

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

Syntax: index.html 

<span class="pln">

</span><span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"en"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;head&gt;</span><span class="pln">
    </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"UTF-8"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;title&gt;</span><span class="pln">Document</span><span class="tag">&lt;/title&gt;</span><span class="pln">
    </span><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"//code.jquery.com/jquery-1.11.2.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    
</span><span class="tag">&lt;/head&gt;</span><span class="pln">
</span><span class="tag">&lt;body&gt;</span><span class="pln">


</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"container"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-xs-6 col-xs-offset-3"</span><span class="tag">&gt;</span><span class="pln"> 
    
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">&gt;</span><span class="pln">  
    </span><span class="tag">&lt;h2&gt;</span><span class="pln"> Table Operations </span><span class="tag">&lt;/h2&gt;</span><span class="pln">
       </span><span class="tag">&lt;form</span><span class="pln"> </span><span class="atn">method</span><span class="pun">=</span><span class="atv">"post"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"add-subject-form"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-x-6"</span><span class="pln"> </span><span class="atn">action</span><span class="pun">=</span><span class="atv">"add_subject.php"</span><span class="tag">&gt;</span><span class="pln"> 
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln"> 
            </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"subject-name"</span><span class="tag">&gt;</span><span class="pln">Add a Subject</span><span class="tag">&lt;/label&gt;</span><span class="pln"> 
            </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"subject_name"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">required</span><span class="tag">&gt;</span><span class="pln"> 
        </span><span class="tag">&lt;/div&gt;</span><span class="pln"> 
          </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">  
            </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"add subject"</span><span class="tag">&gt;</span><span class="pln"> 
         </span><span class="tag">&lt;/div&gt;</span><span class="pln">  
       </span><span class="tag">&lt;/form&gt;</span><span class="pln"> 

 </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-xs-6"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"subject-result"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln">
 </span><span class="tag">&lt;/div&gt;</span><span class="pln"> 

    </span><span class="tag">&lt;/div&gt;</span><span class="pln">

 </span><span class="tag">&lt;/div&gt;</span><span class="pln">  
 

</span><span class="tag">&lt;/body&gt;</span><span class="pln">
</span><span class="tag">&lt;/html&gt;</span><span class="pln">

 </span><span class="tag">&lt;script&gt;</span><span class="pln">
     
   $</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln"> 
         
   $</span><span class="pun">(</span><span class="str">"#add-subject-form"</span><span class="pun">).</span><span class="pln">submit</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">evt</span><span class="pun">){</span><span class="pln"> 
    
       evt</span><span class="pun">.</span><span class="pln">preventDefault</span><span class="pun">();</span><span class="pln">
       
       </span><span class="kwd">var</span><span class="pln"> postData </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">serialize</span><span class="pun">();</span><span class="pln">  
       </span><span class="kwd">var</span><span class="pln"> url </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">attr</span><span class="pun">(</span><span class="str">'action'</span><span class="pun">);</span><span class="pln"> 
       </span><span class="com">// alert(postData);</span><span class="pln">
       
       $</span><span class="pun">.</span><span class="pln">post</span><span class="pun">(</span><span class="pln">url</span><span class="pun">,</span><span class="pln"> postData</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">php_table_data</span><span class="pun">){</span><span class="pln"> 
     
          $</span><span class="pun">(</span><span class="str">"#subject-result"</span><span class="pun">).</span><span class="pln">html</span><span class="pun">(</span><span class="pln">php_table_data</span><span class="pun">);</span><span class="pln"> 
         </span><span class="com">// $("#add-car-form")[0].reset(); </span><span class="pln">
     
     </span><span class="pun">});</span><span class="pln">  
   
   </span><span class="pun">});</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
 
 </span><span class="tag">&lt;/script&gt;</span><span class="pln">
  

</span>

Syntax: add_subject.php 

<span class="pln">

</span><span class="pun">&lt;?</span><span class="pln">php

$connection </span><span class="pun">=</span><span class="pln"> mysqli_connect</span><span class="pun">(</span><span class="str">'localhost'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'root'</span><span class="pun">,</span><span class="pln"> </span><span class="str">''</span><span class="pun">,</span><span class="str">'atnyla'</span><span class="pun">);</span><span class="pln">


</span><span class="kwd">if</span><span class="pun">(</span><span class="pln">isset</span><span class="pun">(</span><span class="pln">$_POST</span><span class="pun">[</span><span class="str">'subject_name'</span><span class="pun">])){</span><span class="pln">

	echo </span><span class="str">'Data recieved &lt;br&gt;'</span><span class="pun">;</span><span class="pln">
	echo $_POST</span><span class="pun">[</span><span class="str">'subject_name'</span><span class="pun">];</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="pun">?&gt;</span><span class="pln">

</span>

Without Page load add a form value using Ajax

Syntax: Index.html 

<span class="pln">

</span><span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"en"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;head&gt;</span><span class="pln">
    </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"UTF-8"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;title&gt;</span><span class="pln">Document</span><span class="tag">&lt;/title&gt;</span><span class="pln">
    </span><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"//code.jquery.com/jquery-1.11.2.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    
</span><span class="tag">&lt;/head&gt;</span><span class="pln">
</span><span class="tag">&lt;body&gt;</span><span class="pln">


</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"container"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-xs-6 col-xs-offset-3"</span><span class="tag">&gt;</span><span class="pln"> 
    
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">&gt;</span><span class="pln">  
    </span><span class="tag">&lt;h2&gt;</span><span class="pln"> Table Operations </span><span class="tag">&lt;/h2&gt;</span><span class="pln">
       </span><span class="tag">&lt;form</span><span class="pln"> </span><span class="atn">method</span><span class="pun">=</span><span class="atv">"post"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"add-subject-form"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-x-6"</span><span class="pln"> </span><span class="atn">action</span><span class="pun">=</span><span class="atv">"add_subject.php"</span><span class="tag">&gt;</span><span class="pln"> 
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln"> 
            </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"subject-name"</span><span class="tag">&gt;</span><span class="pln">Add a Subject</span><span class="tag">&lt;/label&gt;</span><span class="pln"> 
            </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"subject_name"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">required</span><span class="tag">&gt;</span><span class="pln"> 
        </span><span class="tag">&lt;/div&gt;</span><span class="pln"> 
          </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">  
            </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"add subject"</span><span class="tag">&gt;</span><span class="pln"> 
         </span><span class="tag">&lt;/div&gt;</span><span class="pln">  
       </span><span class="tag">&lt;/form&gt;</span><span class="pln"> 

 </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-xs-6"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"subject-result"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln">
 </span><span class="tag">&lt;/div&gt;</span><span class="pln"> 

    </span><span class="tag">&lt;/div&gt;</span><span class="pln">

 </span><span class="tag">&lt;/div&gt;</span><span class="pln">  
 

</span><span class="tag">&lt;/body&gt;</span><span class="pln">
</span><span class="tag">&lt;/html&gt;</span><span class="pln">

 </span><span class="tag">&lt;script&gt;</span><span class="pln">
     
   $</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln"> 
         
   $</span><span class="pun">(</span><span class="str">"#add-subject-form"</span><span class="pun">).</span><span class="pln">submit</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">evt</span><span class="pun">){</span><span class="pln"> 
    
       evt</span><span class="pun">.</span><span class="pln">preventDefault</span><span class="pun">();</span><span class="pln">
       
       </span><span class="kwd">var</span><span class="pln"> postData </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">serialize</span><span class="pun">();</span><span class="pln">  
       </span><span class="kwd">var</span><span class="pln"> url </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">attr</span><span class="pun">(</span><span class="str">'action'</span><span class="pun">);</span><span class="pln">  
       $</span><span class="pun">.</span><span class="pln">post</span><span class="pun">(</span><span class="pln">url</span><span class="pun">,</span><span class="pln"> postData</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">php_table_data</span><span class="pun">){</span><span class="pln"> 
     
            $</span><span class="pun">(</span><span class="str">"#subject-result"</span><span class="pun">).</span><span class="pln">html</span><span class="pun">(</span><span class="pln">php_table_data</span><span class="pun">);</span><span class="pln">  
     </span><span class="pun">});</span><span class="pln">  
   
   </span><span class="pun">});</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
 
 </span><span class="tag">&lt;/script&gt;</span><span class="pln">
  

</span>

Syntax: add_subject.html 

<span class="pln">

</span><span class="pun">&lt;?</span><span class="pln">php
ob_start</span><span class="pun">();</span><span class="pln">
$connection </span><span class="pun">=</span><span class="pln"> mysqli_connect</span><span class="pun">(</span><span class="str">'localhost'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'root'</span><span class="pun">,</span><span class="pln"> </span><span class="str">''</span><span class="pun">,</span><span class="str">'atnyla'</span><span class="pun">);</span><span class="pln">


</span><span class="kwd">if</span><span class="pun">(</span><span class="pln">isset</span><span class="pun">(</span><span class="pln">$_POST</span><span class="pun">[</span><span class="str">'subject_name'</span><span class="pun">]))</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
	
$subject_name </span><span class="pun">=</span><span class="pln"> $_POST</span><span class="pun">[</span><span class="str">'subject_name'</span><span class="pun">];</span><span class="pln">
$query </span><span class="pun">=</span><span class="pln"> </span><span class="str">"INSERT INTO subjects(Subject_Name) VALUES('$subject_name') "</span><span class="pun">;</span><span class="pln">
$update_subject_name </span><span class="pun">=</span><span class="pln"> mysqli_query</span><span class="pun">(</span><span class="pln">$connection</span><span class="pun">,</span><span class="pln"> $query</span><span class="pun">);</span><span class="pln">
    
</span><span class="kwd">if</span><span class="pun">(!</span><span class="pln">$update_subject_name</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">

</span><span class="kwd">die</span><span class="pun">(</span><span class="str">"QUERY FAILED"</span><span class="pun">);</span><span class="pln">

</span><span class="pun">}</span><span class="pln">   
 
</span><span class="kwd">exit</span><span class="pun">;</span><span class="pln">


</span><span class="pun">}</span><span class="pln">

</span><span class="pun">?&gt;</span><span class="pln">

</span>

Add a Subject into table and See it instantly Using Ajax in same page without page loading

Syntax: Index.html 

<span class="pln">

</span><span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"en"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;head&gt;</span><span class="pln">
    </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"UTF-8"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;title&gt;</span><span class="pln">Document</span><span class="tag">&lt;/title&gt;</span><span class="pln">
    </span><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"//code.jquery.com/jquery-1.11.2.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    
</span><span class="tag">&lt;/head&gt;</span><span class="pln">
</span><span class="tag">&lt;body&gt;</span><span class="pln">


</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"container"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-xs-6 col-xs-offset-3"</span><span class="tag">&gt;</span><span class="pln"> 
    
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">&gt;</span><span class="pln">  
    </span><span class="tag">&lt;h2&gt;</span><span class="pln"> Table Operations </span><span class="tag">&lt;/h2&gt;</span><span class="pln">
       </span><span class="tag">&lt;form</span><span class="pln"> </span><span class="atn">method</span><span class="pun">=</span><span class="atv">"post"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"add-subject-form"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-x-6"</span><span class="pln"> </span><span class="atn">action</span><span class="pun">=</span><span class="atv">"add_subject.php"</span><span class="tag">&gt;</span><span class="pln"> 
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln"> 
            </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"subject-name"</span><span class="tag">&gt;</span><span class="pln">Add a Subject</span><span class="tag">&lt;/label&gt;</span><span class="pln"> 
            </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"subject_name"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">required</span><span class="tag">&gt;</span><span class="pln"> 
        </span><span class="tag">&lt;/div&gt;</span><span class="pln"> 
          </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">  
            </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"add subject"</span><span class="tag">&gt;</span><span class="pln"> 
         </span><span class="tag">&lt;/div&gt;</span><span class="pln">  
       </span><span class="tag">&lt;/form&gt;</span><span class="pln"> 

 </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-xs-6"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"subject-result"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln">
 </span><span class="tag">&lt;/div&gt;</span><span class="pln"> 


  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">&gt;</span><span class="pln"> 
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-xs-6"</span><span class="tag">&gt;</span><span class="pln"> 
           </span><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table"</span><span class="tag">&gt;</span><span class="pln">
               </span><span class="tag">&lt;thead&gt;</span><span class="pln">
                   </span><span class="tag">&lt;tr&gt;</span><span class="pln"> 
                       </span><span class="tag">&lt;th&gt;</span><span class="pln">Id</span><span class="tag">&lt;/th&gt;</span><span class="pln">
                       </span><span class="tag">&lt;th&gt;</span><span class="pln">Name</span><span class="tag">&lt;/th&gt;</span><span class="pln">
                   </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
               </span><span class="tag">&lt;/thead&gt;</span><span class="pln">
                 </span><span class="tag">&lt;tbody</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"show-subjects"</span><span class="tag">&gt;&lt;/tbody&gt;</span><span class="pln">
                   
           </span><span class="tag">&lt;/table&gt;</span><span class="pln">
           
        </span><span class="tag">&lt;/div&gt;</span><span class="pln">



    </span><span class="tag">&lt;/div&gt;</span><span class="pln">

 </span><span class="tag">&lt;/div&gt;</span><span class="pln">  
 

</span><span class="tag">&lt;/body&gt;</span><span class="pln">
</span><span class="tag">&lt;/html&gt;</span><span class="pln">

 </span><span class="tag">&lt;script&gt;</span><span class="pln">
     
   $</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln"> 


     </span><span class="com">/**********Update Subject Table Display with time ****************/</span><span class="pln"> 
         
       setInterval</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln">  
         updateSubject</span><span class="pun">();</span><span class="pln"> 
         </span><span class="pun">},</span><span class="pln"> </span><span class="lit">2000</span><span class="pun">);</span><span class="pln">

         
   $</span><span class="pun">(</span><span class="str">"#add-subject-form"</span><span class="pun">).</span><span class="pln">submit</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">evt</span><span class="pun">){</span><span class="pln"> 
    
       evt</span><span class="pun">.</span><span class="pln">preventDefault</span><span class="pun">();</span><span class="pln">
       
       </span><span class="kwd">var</span><span class="pln"> postData </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">serialize</span><span class="pun">();</span><span class="pln">  
       </span><span class="kwd">var</span><span class="pln"> url </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">attr</span><span class="pun">(</span><span class="str">'action'</span><span class="pun">);</span><span class="pln">  
       $</span><span class="pun">.</span><span class="pln">post</span><span class="pun">(</span><span class="pln">url</span><span class="pun">,</span><span class="pln"> postData</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">php_table_data</span><span class="pun">){</span><span class="pln"> 
     
            $</span><span class="pun">(</span><span class="str">"#subject-result"</span><span class="pun">).</span><span class="pln">html</span><span class="pun">(</span><span class="pln">php_table_data</span><span class="pun">);</span><span class="pln">  
     </span><span class="pun">});</span><span class="pln">  
   
   </span><span class="pun">});</span><span class="pln">



</span><span class="kwd">function</span><span class="pln"> updateSubject</span><span class="pun">(){</span><span class="pln">

        $</span><span class="pun">.</span><span class="pln">ajax</span><span class="pun">({</span><span class="pln">
    
        url</span><span class="pun">:</span><span class="pln"> </span><span class="str">'display_subject.php'</span><span class="pun">,</span><span class="pln">
        type</span><span class="pun">:</span><span class="pln"> </span><span class="str">'POST'</span><span class="pun">,</span><span class="pln">
        success</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">show_subject</span><span class="pun">){</span><span class="pln">
        
            </span><span class="kwd">if</span><span class="pun">(!</span><span class="pln">show_subject</span><span class="pun">.</span><span class="pln">error</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                
           $</span><span class="pun">(</span><span class="str">"#show-subjects"</span><span class="pun">).</span><span class="pln">html</span><span class="pun">(</span><span class="pln">show_subject</span><span class="pun">);</span><span class="pln">
            
            
            </span><span class="pun">}</span><span class="pln">
        
        </span><span class="pun">}</span><span class="pln">
    
    </span><span class="pun">});</span><span class="pln">
</span><span class="pun">}</span><span class="pln">



</span><span class="pun">});</span><span class="pln">
 
 </span><span class="tag">&lt;/script&gt;</span><span class="pln">
  

</span>

Syntax: add_subject.php 

<span class="pln">

</span><span class="pun">&lt;?</span><span class="pln">php
ob_start</span><span class="pun">();</span><span class="pln">
$connection </span><span class="pun">=</span><span class="pln"> mysqli_connect</span><span class="pun">(</span><span class="str">'localhost'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'root'</span><span class="pun">,</span><span class="pln"> </span><span class="str">''</span><span class="pun">,</span><span class="str">'atnyla'</span><span class="pun">);</span><span class="pln">


</span><span class="kwd">if</span><span class="pun">(</span><span class="pln">isset</span><span class="pun">(</span><span class="pln">$_POST</span><span class="pun">[</span><span class="str">'subject_name'</span><span class="pun">]))</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
	
$subject_name </span><span class="pun">=</span><span class="pln"> $_POST</span><span class="pun">[</span><span class="str">'subject_name'</span><span class="pun">];</span><span class="pln">
$query </span><span class="pun">=</span><span class="pln"> </span><span class="str">"INSERT INTO subjects(Subject_Name) VALUES('$subject_name') "</span><span class="pun">;</span><span class="pln">
$update_subject_name </span><span class="pun">=</span><span class="pln"> mysqli_query</span><span class="pun">(</span><span class="pln">$connection</span><span class="pun">,</span><span class="pln"> $query</span><span class="pun">);</span><span class="pln">
    
</span><span class="kwd">if</span><span class="pun">(!</span><span class="pln">$update_subject_name</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">

</span><span class="kwd">die</span><span class="pun">(</span><span class="str">"QUERY FAILED"</span><span class="pun">);</span><span class="pln">

</span><span class="pun">}</span><span class="pln">   
 
</span><span class="kwd">exit</span><span class="pun">;</span><span class="pln">


</span><span class="pun">}</span><span class="pln">

</span><span class="pun">?&gt;</span><span class="pln">

</span>

Syntax: display_subject.php 

<span class="pln">

</span><span class="pun">&lt;?</span><span class="pln">php 
ob_start</span><span class="pun">();</span><span class="pln">
$connection </span><span class="pun">=</span><span class="pln"> mysqli_connect</span><span class="pun">(</span><span class="str">'localhost'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'root'</span><span class="pun">,</span><span class="pln"> </span><span class="str">''</span><span class="pun">,</span><span class="str">'atnyla'</span><span class="pun">);</span><span class="pln">

 	 $query </span><span class="pun">=</span><span class="pln"> </span><span class="str">"SELECT * FROM subjects"</span><span class="pun">;</span><span class="pln">
   	 $query_subject_info </span><span class="pun">=</span><span class="pln"> mysqli_query</span><span class="pun">(</span><span class="pln">$connection</span><span class="pun">,</span><span class="pln"> $query</span><span class="pun">);</span><span class="pln">

        </span><span class="kwd">if</span><span class="pun">(!</span><span class="pln">$query_subject_info</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">

        </span><span class="kwd">die</span><span class="pun">(</span><span class="str">"Query Failed"</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> mysqli_error</span><span class="pun">(</span><span class="pln">$connection</span><span class="pun">));</span><span class="pln">


        </span><span class="pun">}</span><span class="pln">

        </span><span class="kwd">while</span><span class="pun">(</span><span class="pln">$row </span><span class="pun">=</span><span class="pln"> mysqli_fetch_array</span><span class="pun">(</span><span class="pln">$query_subject_info</span><span class="pun">))</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            
           
            echo </span><span class="str">"&lt;tr&gt;"</span><span class="pun">;</span><span class="pln">

            echo </span><span class="str">"&lt;td&gt;{$row['Subject_Id']}&lt;/td&gt;"</span><span class="pun">;</span><span class="pln">
            echo </span><span class="str">"&lt;td&gt;{$row['Subject_Name']}&lt;/td&gt;"</span><span class="pun">;</span><span class="pln">


            echo </span><span class="str">"&lt;/tr&gt;"</span><span class="pun">;</span><span class="pln">
            
        
        
        </span><span class="pun">}</span><span class="pln">


</span><span class="pun">?&gt;</span><span class="pln">

</span>
Share this Post: