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

 

 

Saturday, 22 November 2014

Uplaod PDF File into Database Using PHP and Javascript

Explaination:
In this tutorial i has explained about the upload the PDF file only using PHP  and Javascript.
SO this coding is easy to understand and very helpfull for the develoers for to code the 
sites.
enctype="multipart/form-data" - The enctype attribute specifies how the form-data should be encoded
when submitting it to the server.
action="" - The name of our PHP page that will be created, shortly.This can be used for after upload 
it work's through in that page which url u gave in that Action. 
method="POST" - Submits data to be processed to a specified resource.
input name="pdf" - uploadedfile is how we will access the file in our PHP script.

Now that we have the right HTML form wto upload the PDF files.

Typically, the PHP file should make a key decision with all uploads: keep the file or not accept. 
the folling files are not accept in the upload form.The including files are:

1.The file is too large and do not accept.

2.If u want to upload Images or CSV file or XLSX fole/Xls is should not upload.
3.There were problems uploading the file and so you can't keep it.


HTML FORM:
<form  action="pdf_upload.php" name="formLogin" method="post" enctype="multipart/form-data" onSubmit="return validate();">
<div class="form-group">
<input type="file" name="pdf" value="" id="file" class="form-control">
</div>
<div class="form-group">
<input type="submit" name="add" class="btn btn-primary">
</div>
</form>

pdf_upload.php:
When the pdf_upload.php file is executed, the uploaded file exists in a temporary storage area on the server. 
If the file is not moved to a different location it will be destroyed! To save our precious file we are going to need to make use of the
 $_FILES associative array.

The $_FILES array is where PHP stores all the information about files. 


   1.We have to POST the values throught the submit button.

   $_FILES['pdf']['name'] - name contains the original path of the user uploaded file.
   $_FILES['pdf']['name'] - tmp_name contains the path to the temporary file that resides on the server. The file should exist on the server in a temporary directory with a temporary name.
 Pdf is the name of the field.Now we can finally start to write a basic PHP upload manager script! Here is how we would get the temporary file name, choose a permanent name, and choose a place to store the file. 
<?php
error_reporting(0);
$conn=mysql_connect("localhost","root","") or die(mysql_error());
$db=mysql_select_db("db_name",$conn)or die(mysql_error());
$main=new main();

if(isset($_POST['add']))
{
if(($_FILES['pdf']['name']!='')) 
{ 
$name=str_replace("'","",$_FILES['pdf']['name']);
$pdf=$name;
$size=$_FILES['pdf']['size'];
$type=$_FILES['pdf']['type'];
$temp=$_FILES['pdf']['tmp_name'];
$target=("../pdf/".$pdf);
move_uploaded_file($temp,$target);
}
else
{
$error="** &nbsp; Check your file type &nbsp;!! &nbsp;**";
}
$insert="insert into file_tbl (id,file) values ('','$pdf')";
if($main->db->query($insert))
{
// header('location:dashboard.php');
}
else
{ 
$error="** &nbsp; Check your Connection &nbsp;!! &nbsp;**";
}
}
?>
Javascript:
<script type="text/javascript">
function validate(){var imgpath=$("#file").val();var imgpath1 = document.getElementById('file').value;if(imgpath1 == ""){alert( "Upload PDF File" );return false;}else{var arr1 = new Array;arr1 = imgpath.split("\\");var len = arr1.length;var img1 = arr1[len-1];var filext = img1.substring(img1.lastIndexOf(".")+1);if(filext == "pdf" || filext == "doc"|| filext == "docx"){}else{alert("Invalid File Format Selected");return false;}}}
</script>
Database Structure:
CREATE TABLE IF NOT EXISTS `file_tbl` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(100) NOT NULL,
  `study` varchar(55) NOT NULL,
  `file` varchar(200) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=34 ;


Friday, 14 November 2014

Change the Text by using Javascript

Defintion of .html():
The html() method sets or returns the content (innerHTML) of the selected elements.
Get the HTML contents of the first element in the set of matched elements.
This method does not accept any arguments.
This method is not available on XML documents.

Description:
In an HTML document, .html() can be used to get the contents of any element. If the selector expression matches more than one element,
only the first match will have its HTML content returned.
 Example Code:
     $(".cointaner div").html();
Screenshot:
       Step 1:

 Step 2:


Style:
<style>
#type1
{
border: 1px solid #000;
float: left;
padding: 3px 67px 6px 50px;
width: 2px;background-color: #000000;
color: #FFFFFF;
}
#type2
{
border: 1px solid #000;
float: left;
padding: 3px 67px 6px 50px;
width: 2px;background-color:blue;
color: #FFFFFF;
}
.cointaner
{
border: 1px solid #FFF;
width:34%;
height:75px;
}
.heading1
{
margin:57px -15px 36px -115px;
}
#sel_hotel
{
font-size:16px;
color:green;
font-weight:bold;
}
</style>

HTML Form:
<body>
<form name="form1" id="form1" method="post">
<div class="cointaner">
<div id="type1" class="change_ho">PHP</div>
<div id="type2" class="change_ho">JS</div>
<div><input type="hidden" id="type3" name="type" value="PHP"></div>
<div align="center" class="heading1" id="sel_hotel">Search Creatersite</div>
</div>
</form>
</body>
Javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
//$("#type3").removeAttr("disabled");
$(".cointaner div").click(function(){
var htmlone=$(this).html();
$("#type1").removeClass("change_ho");
$("#type2").removeClass("change_ho");
if(htmlone == "PHP") {
$("#type3").val("PHP");
$("#sel_hotel").html("Search Creatersite");
}  else {
$("#type3").val("JS");
$("#sel_hotel").html("Creatersite is a Blog");
}
});
});
</script>

Thursday, 13 November 2014

Concatenation the Strings in PHP and HTML

Defintion:
The concat() method is used to join two or more strings.
This method does not change the existing strings, but returns a new string containing the text of the joined strings.

Syntax:
string.concat(string1, string2, ..., stringX)
string1 - First string to be joined.
string2 - Second string to be joined. Up to N number of strings can be specified this way.

Explaination:
when you need Displaying more than one strings or combining the two strings where there may be variables or other things between them, 
it would be annoying to write a new statement to echo all the parts. php has a nice way of doing this for you, string concatenating
let me show you an example:
The . operator is the string concatenation operator and is very useful for situations like this. 
( i left spaces after and before '.' operators to make them more visible. this is not needed in fact. )

Example For HTML String
<div class="test"  name="<?php echo This." ".is." ".$row['name']." ".Blog; ?>"><div>

Example For PHP String
<?php 
echo '<div class="test" name=" '.This.' '.is.' '.$row['name'].' '.ucwords($row['blog']).'"></div>';
?>

Tuesday, 11 November 2014

Append the HTML Elements Using Javascript and Jquery

Explaination:
Defintion of Append:
The append() method inserts specified content at the end of the selected elements.
           (or)

The .append() method inserts the specified content as the last child of each element in the jQuery collection.
Syntax:
$(selector).append(content,function(index,html))

Append means to add  r insert the elements using jquery.Here if we want to add the more forms using a button.
If we click on that button it will add the forms one by one if you dont want we can delete by using 
delete button for both add and delete the elements using ID's to delete."#add1" this can be used for
add the elements and "#delete1" this can be used for to delete the elements.I hope this tutorial is very helpfull for the add and delete the html elements using Javascript and Jquery.
Screenshot:

HTML Form:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body style="background-color: rgb(224, 255, 240);">
<form name="form" method="post" enctype="multipart/form-data" id="article">
<div class="col-sm-9" id="box" style="width: 27%;">
<div class="form-group col-sm-12" style="padding: 28px 0px 0px 6px;">
<label class="col-sm-2" style="float: left;">Title</label>
<div class="col-sm-2"> <select class="form-control" name="name_title[]" style="margin:2px 2px 2px 60px;"> <option>Dr.</option>  <option value="Dr.">Dr.</option>  <option value="Mr.">Mr.</option>  <option value="Mrs.">Mrs.</option>  <option value="Ms.">Ms.</option>  <option value="Prof.">Prof.</option></select></div>
</div>

<div class="form-group col-sm-12" style="padding: 28px 0px 0px 6px;">                  
<label class="col-sm-2" style="float: left;">First Name<sup class="star">*</sup></label>
<div class="col-sm-10"><input type="text" name="fname[]"  class="form-control" id="inputEmail3" placeholder="Enter Your First Name"></div>
</div>

<div class="form-group col-sm-12" style="padding: 28px 0px 0px 6px;">                  
<label class="col-sm-2" style="float: left;">Last Name</label>
<div class="col-sm-10"><input type="text"name="lname[]" class="form-control" id="inputEmail3" style="margin: 2px 2px 2px 11px;" placeholder="Enter Your Last Name"></div>
</div>

<div class="form-group col-sm-12" style="padding: 28px 0px 0px 6px;">                  
<label class="col-sm-2" style="float: left;">Email<sup class="star">*</sup></label>
<div class="col-sm-10"><input type="text" name="email[]"  class="form-control" id="inputEmail3" style="margin: 2px 2px 2px 45px;" placeholder="Enter Your Email Address"></div>
</div>

<div class="form-group col-sm-12" style="padding: 28px 0px 0px 6px;">                  
<label class="col-sm-2" style="float: left;">Affilate<sup class="star">*</sup></label>
<div class="col-sm-10"><input type="text" name="affilate[]" class="form-control" id="inputEmail3" style="margin: -21px 4px 3px 99px;"  placeholder="Enter Your Affilate"></div>
</div>

<div class="form-group col-sm-12" style="padding: 28px 0px 0px 6px;">                  
<label class="col-sm-2" style="float: left;">Mobile</label>
<div class="col-sm-10"><input type="text" name="mobile[]" class="form-control" id="inputEmail3" style="margin: -20px 2px 2px 98px;" placeholder="Enter Your Mobile"></div>
</div>

<div class="form-group col-sm-12" style="padding: 28px 0px 0px 6px;">                  
<label class="col-sm-2" style="float: left;">Coressponding Author</label>
<div class="col-sm-1"><input type="radio" name="head[]" class="form-control" style="margin: 2px 2px 2px 20px;"/></div>
</div>
</div>

<div  class="field"><div id="label"> </div>

<label class="col-sm-3"></label>
<div class="col-sm-4">  <input type="submit" name="add_author" id="add1" value="Add Author">  <input type="submit" name="delete1" class="add-button" value="Delete" id="delete1" > </div>
</div>
</form>
</body>
</html>
Javascript:
<script type="text/javascript">
$(document).ready(function(){
var counter = 1;
$("#add1").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}   
else
{
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);

newTextBoxDiv.after().html(' <div id="box" class="col-sm-12" style="width: 100%;"><div class="form-group col-sm-12" style="padding: 28px 0px 0px 62px;"><label class="col-sm-2"  style="float: left;">Title</label><div class="col-sm-2"> <select class="form-control" name="name_title[]" style="margin:2px 2px 2px 10px;"> <option>Dr.</option> <option value="Dr.">Dr.</option>  <option value="Mr.">Mr.</option>  <option value="Mrs.">Mrs.</option>  <option value="Ms.">Ms.</option><option value="Prof.">Prof.</option></select></div></div><div class="form-group col-sm-12" style="padding: 28px 0px 0px 6px;"><label class="col-sm-2"  style="float: left;">First Name<sup class="star">*</sup></label><div class="col-sm-10"><input type="text" name="fname[]"  class="form-control" id="inputEmail3" placeholder="Enter Your First Name"  ></div></div><div class="form-group col-sm-12" style="padding: 28px 0px 0px 6px;"><label class="col-sm-2"  style="float: left;">Last Name</label><div class="col-sm-10"><input type="text"name="lname[]" class="form-control" id="inputEmail3" placeholder="Enter Your Last Name"  style="margin: 2px 2px 2px 11px;"></div></div><div class="form-group col-sm-12" style="padding: 28px 0px 0px 6px;"><label class="col-sm-2"  style="float: left;">Email<sup class="star">*</sup></label><div class="col-sm-10"><input type="text" name="email[]"  style="margin: 2px 2px 2px 45px;" class="form-control" id="inputEmail3" placeholder="Enter Your Email Address"></div></div><div class="form-group col-sm-12" style="padding: 28px 0px 0px 6px;"><label class="col-sm-2"  style="float: left;">Affilate<sup class="star">*</sup></label><div class="col-sm-10"><input type="text" name="affilate[]" class="form-control" id="inputEmail3" placeholder="Enter Your Affilate" style="margin: -21px 2px 2px 100px;"></div></div><div class="form-group col-sm-12" style="padding: 28px 0px 0px 36px;"><label class="col-sm-2"  style="float: left;">Mobile</label><div class="col-sm-10"><input type="text" name="mobile[]" class="form-control" id="inputEmail3" placeholder="Enter Your Mobile" style="margin:-20px 2px 2px 69px;"></div></div><div class="form-group col-sm-12" style="padding: 28px 0px 0px 6px;"><label class="col-sm-2"  style="float: left;">Coressponding Author</label><div class="col-sm-1"><input type="radio" name="head[]" value="+counter+" class="form-control" style="margin: 2px 2px 2px 20px;"/></div></div></div> </div>');
newTextBoxDiv.appendTo("#box");
counter++;
return false;
}
});


$("#delete1").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}   
counter--;
$("#TextBoxDiv" + counter).remove();

return false;
});

$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>


Monday, 10 November 2014

Simple Pagination Using PHP with Mysql

Explaination:
In this Tutorial i explained simple Pagination Using PHP.Here not include any javascript and
Jquery library files.Only by using PHP only i done the Pagination with fetching datas from 
database.Just here we can get that id and pass that in to pagination href link.
I hope this tutorial is very helpfull for the Developers as well as the learners also.
Screenshot:
DB Connection:
<?php
$query1=mysql_connect("localhost","root","");
mysql_select_db("db_name",$query1);
?> 
Style.css:
<style type="text/css">
.page
{
margin: -44px 17px 3px 166px;
padding: 0;height: 29px;
}
.page li
{
list-style: none;
display:inline-block;
}
.page li a, .current
{
display: block;
padding: 5px;
text-decoration: none;
color: #blue;
font-weight:bold
margin: 33px 2px 2px;
border:1px solid black;
}
.current{
display: block;
padding: 5px;
text-decoration: none;
color: #FFF;
border: 1px solid #000;
font-size: 16px;
background: #000;
}
.button
{
padding: 5px 15px;
text-decoration: none;
color: #F3F3F3;
font-size: 13PX;
border-radius: 2PX;
margin: 0 4PX;
display: block;
margin: -7px 961px 13px 270px;
padding: 7px 3px;
}
.button1{
text-decoration: none;
margin: 10px 1136px -36px 84px;
font-size: 13px;
border-radius: 2px;
display: block;
padding: 6px 40px;
}
</style>
Pagination Coding from Database:
Screenshot:
<body>
<table width="60%" cellpadding="7" cellspacing="0" border="1" style="margin: 59px 0px 3px;
font-size:14px;">
<thead>
<tr class="table_tr1">
<th>S.No</th>
<th >Name</th>
<th >Mobile_no</th>
<th>Email_id</th>
<th>City</th>
<th>Message</th>
<th>Created On</th>
</tr>
</thead>

<?php
$start=0;
$limit=3;
$rows=mysql_num_rows(mysql_query("select * from form"));
$total=ceil($rows/$limit);
if(isset($_GET['id']))
{
    $id=$_GET['id'];
    $start=($id-1)*$limit;
    if($id>1)
{
    echo "<a  href='?id=".($id-1)."' class='button1'><img src='arrow_left.png' width='22px'
 height='22px'/></a>";
}
if($id!=$total)
{
    echo "<a  href='?id=".($id+1)."' class='button'><img src='arrow_right.png'  width='22px'
 height='22px'/></a>";
}
    
$i=($id-1)*$limit+1;

$query=mysql_query("select * from form LIMIT $start, $limit");

echo "<div>";
if($rows>0)
 {
while($row=mysql_fetch_array($query))
{
    $id=$row['id'];
  $name=$row['name'];
  $mobileno=$row['mobileno'];
  //$seat_numbers = str_replace(",", ", ", $seat_numbers); 
  $email_id=$row['email_id'];
  $starting_city=$row['starting_city'];
  $message=$row['message'];
  $createdon=$row['created_on'];
  
  echo "<tr class='table_tr2' style='text-align:center;'>";
  echo "<td>" . $i++. "</td>";
  echo "<td>" . $name. "</td>";
  echo "<td>" . $mobileno. "</td>";
   echo "<td>" . $email_id. "</td>";
  echo "<td>" . $starting_city. "</td>";
  echo "<td>" . $message . "</td>";
  echo "<td> " . $createdon ."</td>";
  echo "</tr>";
 
}
}
else
{
    echo "<tr>";
    echo "<td  align='center' style='font-weight: bold;  font-size: 20px;color:#3399FF;
text-align:center;'>NO DATA FOUND</td>";
    echo "</tr>";
    echo "</table>";
}
} 
$id=$_REQUEST['id'];
echo "<ul class='page'>";
        for($i=1;$i<=$total;$i++)
        {
            if($i==$id) { echo "<li class='current'>".$i."</li>"; }
            
            else { echo "<li><a href='?id=".$i."'>".$i."</a></li>"; }
        }
echo "</ul>";
?>

</body>
</html> 
 Screenshot For Dispaly Results:
Database Structure:

--
-- Table structure for table `form`
--

CREATE TABLE IF NOT EXISTS `form` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL,
  `mobileno` bigint(12) NOT NULL,
  `email_id` varchar(50) NOT NULL,
  `starting_city` varchar(100) NOT NULL,
  `message` longtext NOT NULL,
  `created_on` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=137 ; 
 

Thursday, 6 November 2014

Calendar Function Onclick event on Dates using Ajax and Javascript

Explaination:
In this tutorial  has explained about the calendar function usinh Ajax and Javascript function.Here if we click on that datys numbers according to that days and month is to be displayed in to days tabs by using Ajax and Javascript.In the javascriptwe have to written the coding as defaultView: 'agendaDay',because acyually in the id function as calendar #calendar here we have to pass the varualble as defaultDate and defaultView and dat_req are important variable this two have to write over there.In the default date the request date is to been displayed and the default view the js varialbe is 'agendaDay' have to write in that place.$_REQUEST['dates'].I hope this POst is very usefull for to develop diffferent calendar function using javascript in PHP.

Screenshot:



Css style:
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}

#calendar {
max-width: 900px;
margin: 0 auto;
}
.fc-today-button ui-button ui-state-default ui-corner-left ui-corner-right ui-state-disabled
{
display:block;
}
</style> 



Library Css Styles:
<link rel='stylesheet' href='jquery-ui.min.css' />
<link href='fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar.print.css' rel='stylesheet' media='print' />
Download Css Files:
jquery-ui.min.css
fullcalendar.css
fullcalendar.print.css
Library Javascript Styles:
<script src='moment.min.js'></script>
<script src='jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
Download Js Files:
moment.js,jquery.min.js,fullcalendar.min.js
moment.js,jquery.min.js,fullcalendar.min.js
Main-javacsript:
<script type="text/javascript">$(document).ready(function(){var d = new Date();var n = d.getMonth(); var dt = d.getDate(); var y = d.getFullYear(); var mon = Number(n)+1;var cur_date = y+'-'+mon+'-'+dt;if(Number(dt) <= 9){ var dt1 = '0'+dt;} else{var dt1 = dt; } var dat_req = <?php echo $dates; ?>;var cur_date1 = y+'-'+mon+'-'+dt1; getJsnData(dat_req); var myArray = jQuery.parseJSON(data_result); $('#calendar').fullCalendar({theme: true,header: {left: 'prev,next',center: 'title',right: 'month,agendaWeek,agendaDay'}, defaultDate: dat_req, defaultView: 'agendaDay',editable: true,eventLimit: true, events:myArray });}); </script>
Form:

<body><div id='calendar'></div></body></html>

PHP function to Pass the Variable:

if(isset($_REQUEST['dates'])){$dates = "'".$_REQUEST['dates']."'";} else{$dates = "'".date('Y-m-d')."'";}?>

This Script Pass from JS file:

<script type="text/javascript">
var data_result = 0;
var data_result2= 0;function getJsnData(dates){}function data(dat){ var url = "nlog.php?dates="+dat;window.location=url;} </script>