By using Onchange and Onkeyup Function to Display the Records Using Ajax

Explaination:

                   

In this tutorial i has posted the we ahve two categories one is Category and other is Sub Category In this will select the category that category according datas will dispaly in subcategory by using.Then for price and quantity it will total and will display in the total field  by using Javascript.
then the Image Upload .This all is display  by fetching with Database.

Database fields are:
                  Id->Auto Increment
                  2.Category
                  3.Subcategory
                  4.Image

Form Design:

Form :

<div style="width: 34%; border: 1px solid rgb(0, 0, 0); background-color: #000; color: #FFF;">
<form name="form" method="post" enctype="multipart/form-data">
<p><label for="category">Category</label>
<select name="categorys" onchange="showCustomer(this.value)">
<option value="">--select--</option>
<?php 
$select=mysql_query("select * from categories");
while($cat=mysql_fetch_array($select))
{
?>
<option value="<?php echo $cat['cat_id'];?>"><?php echo $cat['cat_name'];?></option>
<?php }?>
</select>
</p>
<p><label>Sub Category</label>
<span id="txtHint">
    <select name="sub_category"><option><----Select----></option></select>
</p>
<p><label>Price</label>
<input id="box1" type="text" name="price" oninput="calculate()" />
</p>
<p><label>Quantity</label>
<input id="box2" type="text"  name="quantity" oninput="calculate()" />
</p>
<p><label>Total</label>
<input id="result" name="total"/>
</p>
<p><label>Image Upload</label>
<input type="file" name="image" value=""/>
</p>
<p><input type="submit" name="submit" value="Submit"/></p>
</form>
</div>

By Using This Form We have to display the results that has to fetch from the database
oninput="calculate()" is used to calaculate the Price and Quantity 

Display Results:

Coding:

By Using This Form We have to display the results that has to fetch from the database
oninput="calculate()" is used to calaculate the Price and Quantity 
This  onchange="showSearch(this.value)" and onkeyup="showSearchs(this.value)" is used for
to dispaly the results while typing the category onkeyup="showSearchs(this.value)" Onkeyup function 
is used to display the results and onchange="showSearch(this.value)" Onchange funciton is used to
display the results by dropdown.

<tr>
<td><select name="search" onchange="showSearch(this.value)" >
    <option value=""><----Search----></option>
    <?php 
$selects=mysql_query("select * from categories");
while($cats=mysql_fetch_array($selects))
{
?>
<option value="<?php echo $cats['cat_id'];?>"><?php echo $cats['cat_name'];?></option>
<?php }?>
</select>

</td>
</tr>
<form method="post" action="" id="form1">
<div  style="margin: 0px 0px 0px 516px;">
<input type="text" id="category" name="category"   value=""  onkeyup="showSearchs(this.value)"/>
<input type="submit" class="but_style" name="search_list" value="Search" style="width:auto; border:solid thin  #b32d00;
border-radius:.3em; color:#FFF; background-color:#f7803b; cursor:pointer; height:27px;" ></div>
</form>

To display the results  while fetching with database id="txtHint2" this id is used for to disaply the reuslts by using AJAX
Then the inline edit will use in <tr> or <div> class="edit_td" use the class as edit_td then for display the results 
id="category_<?php echo $id; ?>" will pass this id and in input field also will pass this id
id="category_input_<?php echo $id; ?>"

<table width="70%" border="1"  id="txtHint1" cellpadding="0" cellspacing="0" class="table-list" style="text-align:center;">
<tr>
<th width="20%">S.no</th>
<th width="20%">Category</th>
<th width="20%">Category Name</th>
<th width="40%">Sub Category name</th>
<th width="40%">Sub Category </th>
<th width="20%">Price</th>
<th width="20%">Quantity</th>
<th width="20%">Total</th>
<th width="20%">Image</th>
</tr>
<tbody id="txtHint2">
<tr>
<?php 
$i=1;
$select3=mysql_query("select * from demo");
while($cat3=mysql_fetch_array($select3))
{
$id=$cat3['id'];
$pr=$cat3['price'];
$cat=$cat3['category'];
$cat1=$cat3['category_name'];
$sub=$cat3['sub_category'];
$images=$cat3['image'];
$selcts=mysql_query("select * from categories where cat_id='$cat'");
$ro=mysql_fetch_array($selcts);
$ca=$ro['cat_name'];
$selcts1=mysql_query("select * from sub_categories where sub_cat_id='$sub'");
$ro1=mysql_fetch_array($selcts1);
$su=$ro1['sub_cat_name'];
?>

<tr id="<?php echo $id; ?>" class="edit_tr">
<td><?php echo $i++;?></td>
<td class="edit_td">
<span id="category_<?php echo $id; ?>" class="text"><?php echo $cat; ?></span> 
<input type="text" value="<?php echo $cat; ?>" class="editbox" id="category_input_<?php echo $id; ?>"/>
</td>

<td class="edit_td">
<span id="category_name_<?php echo $id; ?>" class="text"><?php echo $ca; ?></span>
<input type="text" value="<?php echo $ca; ?>" class="editbox" id="category_name_input_<?php echo $id; ?>" /&gt;
</td>

<td class="edit_td">
<span id="sub_category_<?php echo $id; ?>" class="text"><?php echo $su; ?></span> 
<input type="text" value="<?php echo $su; ?>" class="editbox" id="sub_category_input_<?php echo $id; ?>"/>
</td>

<td class="edit_td">
<span id="price_<?php echo $id; ?>" class="text"><?php echo $pr; ?></span> 
<input type="text" value="<?php echo $pr; ?>" class="editbox" id="price_input_<?php echo $id; ?>"/>
</td>
<td class="edit_td">
<span id="quantity_<?php echo $id;?>" class="text"> <?php echo $cat3['quantity'];?></span>
<input type="text" value="<?php echo $cat3['quantity'];?>" class="editbox" id="quantity_input_<?php echo $id;?>"/>
</td>

<td>
<span id="total_<?php echo $id;?>" class="text"><?php echo $cat3['total'];?></span>
<input type="text" value="<?php echo $cat3['total'];?>" class="editbox" id="total_input_<?php echo $id;?>"/>
</td>

<td><img src="upload/<?php echo $cat3['image'];?>"width="30px" height="30px"/></td>
<td><a href="#" id="'.$row['id'].'" class="del">Delete</a></td>
</tr>
<?php
}
?>
<tbody>
</table>

Ajax Coding For  id="txtHint" for Sub Category:

<script>
  function showCustomer(str)
        {
        var xmlhttp;    
        if (str=="")
          {
          document.getElementById("txtHint").innerHTML="";
          return;
          }
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
            }
          }
        xmlhttp.open("GET","ajax_cat.php?q="+str,true);
        xmlhttp.send();
        }
        </script>

Ajax Coding For  id="txtHint1" for select the options:

<script>
  function showSearch(str)
        {
        var xmlhttp;    
        if (str=="")
          {
          document.getElementById("txtHint1").innerHTML="";
          return;
          }
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("txtHint1").innerHTML=xmlhttp.responseText;
            }
          }
        xmlhttp.open("GET","ajax_search.php?q1="+str,true);
        xmlhttp.send();
        }
        </script>

Ajax Coding For  id="txtHint2" for Onkeyup:

function showSearchs(str)
        {
        var xmlhttp;    
        if (str=="")
          {
          document.getElementById("txtHint2").innerHTML="";
          return;
          }
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("txtHint2").innerHTML=xmlhttp.responseText;
            }
          }
        xmlhttp.open("GET","search.php?q2="+str,true);
        xmlhttp.send();
        }
        </script>

Javascript Coding For calaculate Price and Quantity :

<script type="text/javascript">
function calculate() {
  var myBox1 = document.getElementById('box1').value; 
  var myBox2 = document.getElementById('box2').value;
  var result = document.getElementById('result'); 
  var myResult = myBox1 * myBox2 ;
  result.value = myResult; 
 }
 </script>
 

search.php for to display table records :

Through the Ajax by passing the Values to the div r table there we'll get the datas to search.php page.
by passing the values through id="txtHint2" or we can give any vlaue but we should pass the id's
correctly.Then we should GET that Passing Datas in search.php page.

<?php
include('conn.php');
if($_GET['q2'])
{
$id3=$_GET['q2'];
$select=mysql_query("select * from demo where category_name='$id3'");
        while($search=mysql_fetch_array($select))
        {
        $id=$search['id'];
        $pr=$search['price'];
        $qu=$search['quantity'];
        $to=$search['total'];
        $cat=$search['category'];
        $cat1=$search['category_name'];
        $sub=$search['sub_category'];
        $su=$search['sub_cat_name'];
        $images=$search['image'];
        echo "<tr>";
        echo "<td>" . $id . "</td>";
        echo "<td>" . $cat. "</td>";
        echo "<td>" . $cat1. "</td>";
        echo "<td>" . $sub . "</td>";
        echo "<td>" . $su . "</td>";
        echo "<td>" . $pr . "</td>";
        echo "<td>" . $qu . "</td>";
        echo "<td>" . $to. "</td>";
        echo "<td><img src=upload/$images width='50px' height='50px'></td>";
        echo "</tr>";
        }}
else 
{
echo "No Records Found";

}
?> 

ajax_cat.php for sub-category:

For Sub categorys when we select that categeory list that subcategory list releated with category 
datas is coming by using the ajax.

<?php
include('conn.php');
?>
<?php
if(isset($_GET['q']))
{
    //print_r($_GET);
    $id1=$_GET['q'];
    
    ?>
<p>
<select name="sub_category">
    <option><----Select----></option>
<?php
$select1=mysql_query("select * from sub_categories where cat_id=$id1") ;
while($cat1=mysql_fetch_array($select1))
{
 ?>
<option value="<?php echo $cat1['sub_cat_id'];?>"><?php echo $cat1['sub_cat_name'];?></option>
<?php }?>
</select>
</p>
<?php }?>