Translate

Sunday 19 June 2016

Ajax dropdown with image upload

 index.php


<?php
error_reporting(0);
include('conn.php');
 if(isset($_POST['submit'])!="")
{
   
    $categorys=$_POST['categorys'];
    $selects=mysql_query("select * from categories where cat_id='$categorys'");
    $ro=mysql_fetch_array($selects);
    $cat_name=$ro['cat_name'];
   
    $sub_category=$_POST['sub_category'];
      $selectss=mysql_query("select * from sub_categories where sub_cat_id='$sub_category'");
    $ros=mysql_fetch_array($selectss);
    $sub_cat_name=$ros['sub_cat_name'];
   
    $price=$_POST['price'];
    $quantity=$_POST['quantity'];
    $total=$_POST['total'];
    $image=$_FILES['image']['name'];
    $tmp_name=$_FILES['image']['tmp_name'];
    $dir='upload/'.$image;
    move_uploaded_file($tmp_name,$dir);
    $insert=mysql_query("insert into demo(category,sub_category,price,quantity,total,image,category_name,sub_cat_name) values('$categorys','$sub_category','$price','$quantity','$total','$image','$cat_name','$sub_cat_name')");
    if($insert)
    {
        echo "inserted";
    }
    else
    {
        echo "not inserted";
    }
}?>
<?php
/*if(isset($_POST['search_list'])) {
        if(trim($_POST['category'])) {
            $con[] = " category_name LIKE '%".trim($_POST['category'])."%' ";
        }
        if($con) {
            $condition = " WHERE ";
            $condition .= implode(" AND ", $con);           
        }}
        $query4 = "SELECT * FROM demo $condition ORDER BY category ASC";
    $result4 = mysql_query($query4);
    while($row4 = mysql_fetch_array($result4)) {
        $city[] = $row4;
    }*/
?>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
 <head>
  <title>Ajax Table Editing</title>
  <style>
 
  .editbox
{
display:none
}
td
{
padding:5px;
}
.editbox
{
font-size:12px;
width:120px;
background-color:#ffffcc;
border:solid 1px #000;
padding:4px;
}
.edit_tr:hover
{
background-image:url(download.jpg) right no-repeat;
cursor:pointer;
}
  *{
    font-family: verdana;
    font-size: 12px;
}
input[type='button']{
    background: #5B8EEE;
    width: 90px;
    height: 30px;
    border: 1px solid #CBDBFA;
    color: white;
    font-weight: bold;
    margin-right: 10px;
}
.table-list{
    font-family: verdana;
    font-size: 12px;
    border: 1px solid #EAEAEA;
    padding: 2px;
}
.table-list th{
    background: #EDF2F6;
    border-bottom: 1px dotted #DDDDDD;
    color: #444444;
    font-size: 12px;
    font-weight: normal !important;
    height: 28px;
    line-height: px;
    padding-left: 5px;
    text-align: center;
}
.table-list td{
    border-bottom: 1px dotted #EAEAEA;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    height: 28px;
    padding: 5px;
    text-align: center;
}
.table-list tr:hover{
    background: #E3F3F9;
}
.entry-form{
    background: #EDF2F6;
    width: 350px;
    padding: 10px;
    border: 5px solid #C5D7E2;
    box-shadow: 3px 3px 5px #888;
    position: absolute;
    top: 25%;
    left: 35%;
    display: none;
    border-radius: 5px;
}
.entry-form input[type='text']{
    border: 0px solid #BBBBBB;
    box-shadow: 2px 2px 4px #C5D7E2 inset;
    height: 25px;
    width: 100px;
}
.entry-form input[type='text']:focus{
    border: 1px solid #C5D7E2;
}


#main {
padding: 10px;
margin: 100px;
margin-left: 300px;
color: Green;
border: 1px dotted;
width: 520px;
}
#display_results {
color: red;
background: #CCCCFF;
}
  </style>
 


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".edit_tr").click(function()
{
var ID=$(this).attr('id');
$("#category_"+ID).hide();
$("#sub_category_"+ID).hide();
$("#price_"+ID).hide();
$("#quantity_"+ID).hide();
$("#total_"+ID).hide();
$("#category_input_"+ID).show();
$("#sub_category_input_"+ID).show();
$("#price_input_"+ID).show();
$("#quantity_input_"+ID).show();
 $("#total_input_"+ID).show();
}).change(function()
{
var ID=$(this).attr('id');
var category=$("#category_input_"+ID).val();
var sub_category=$("#sub_category_input_"+ID).val();
var price=$("#price_input_"+ID).val();
var quantity=$("#quantity_input_"+ID).val();
var total=$("#total_input_"+ID).val();
var dataString = 'id='+ ID +'&category='+category+'&sub_category='+sub_category+'&price='+price+'&quantity='+quantity+'&total='+total;
$("#category_"+ID).html('<img src="load.jpg"  />'); // Loading image

if(category.length>0&& sub_category.length>0&&price.length>0&&quantity.length>0&&total.length>0)
{

$.ajax({
type: "POST",
url: "inline.php",
data: dataString,
cache: false,
success: function(html)
{
$("#category_"+ID).html(category);
$("#sub_category_"+ID).html(sub_category);
$("#price_"+ID).html(price);
$("#quantity_"+ID).html(quantity);
$("#total_"+ID).html(total);
}
});
}
else
{
alert('Enter something.');
}

});

// Edit input box click action
$(".editbox").mouseup(function()
{
return false
});

// Outside click action
$(document).mouseup(function()
{
$(".editbox").hide();
$(".text").show();
});

});
</script>
   
   
   
   
  <link rel="stylesheet" href="css/style.css">
 </head>
<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>
<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>
       
        <script>
  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>

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




</head>
<body>
<div>
    <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>
<p id="txtHint">
    <select name="sub_category">
<option><----Select----></option>
    </select>
</p></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>
</div>

 <br>
<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>
</body>
      <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>
    </div>
   
 </body>


<?php
/*if($city) {
foreach($city as $key1 => $val1) {
$slno = $key1+1;
if($slno > 10 ) {
echo "<tr class='table_tr2' id='row$slno' style='display:none;'>";
}else{
echo "<tr class='table_tr2' id='row$slno'>";
}
echo '<td width="5%">'.$slno.'</td>';
echo '<td width="12%">'.$val1['category'].'</td>';
echo '<td width="12%">'.$val1['category_name'].'</td>';
echo '<td width="12%">'.$val1['sub_category'].'</td>';
echo '<td width="15%">'.$val1['price'].'</td>';
echo '<td width="15%">'.$val1['quantity'].'</td>';
echo '<td width="15%">'.$val1['total'].'</td>';

//echo '<td><img src=upload/$val1['image] width=50px height=50px></td>';
echo '</tr>';
}
} else {
echo "<tr class='table_tr2'><td colspan='7' style='text-align:center;height:125px;'><span class='NoResult'>No Records Found</span></td></tr>";
}*/
?>
</table>
</form>

</html>



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

inline.php

<?php
include("conn.php");
if($_POST['id'])
{
$id=$_POST['id'];
$category=$_POST['category'];
$sub_category=$_POST['sub_category'];
$price=$_POST['price'];
$quantity=$_POST['quantity'];
$total=$price*$quantity;
$sql = "update demo set category='$category',sub_category='$sub_category',price='$price',quantity='$quantity',total='$total' where id='$id'";
mysql_query($sql);
}
?>
 

ajax_search.php

<?php
include('conn.php');
if($_GET['q1'])
{
    $id2=$_GET['q1'];
        $i=1;
    $select=mysql_query("select * from demo where category='$id2'");
     echo "<table border='1'>
    <tr>
    <th>S.No</th>
     <th >Category</th>
            <th >Category Name</th>
            <th >Sub Category</th>
            <th >Sub Category Name</th>
                <th >Price</th>
                    <th >Quantity</th>
                        <th >Total</th>
                            <th >Image</th>
                           
                   
   
    </tr>";

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'];
    $images=$search['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'];

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

ajax_cat.php


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


conn.php

<?php
$conn=mysql_connect("localhost","root","") or die(mysql_error());
$db=mysql_select_db("gomathi",$conn)or die(mysql_error());
?>


categories.sql 
CREATE TABLE IF NOT EXISTS `categories` (
  `cat_id` int(11) NOT NULL AUTO_INCREMENT,
  `cat_name` varchar(150) NOT NULL,
  PRIMARY KEY (`cat_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

 

sub_categories.sql

CREATE TABLE IF NOT EXISTS `sub_categories` (
  `sub_cat_id` int(11) NOT NULL,
  `cat_id` int(10) NOT NULL,
  `sub_cat_name` varchar(150) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

 final  Demo.sql

--
-- Table structure for table `demo`
--

CREATE TABLE IF NOT EXISTS `demo` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `category` varchar(150) NOT NULL,
  `category_name` varchar(150) NOT NULL,
  `sub_category` varchar(150) NOT NULL,
  `price` int(30) NOT NULL,
  `quantity` int(30) NOT NULL,
  `total` int(30) NOT NULL,
  `image` varchar(150) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE