Thursday, 3 March 2016

Generate one combo box on click of another combo box using Ajax

Dear Friends,

Here I have exemplified a shop with car brands and models. When you select Brand from one combo only those models matching the brands will be displayed in the other combo box.

SQL Database and Tables required

--
-- Database: `carcare`
--

CREATE TABLE IF NOT EXISTS `brand` (
  `bid` varchar(5) NOT NULL,
  `bname` varchar(20) NOT NULL,
  PRIMARY KEY (`bid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE IF NOT EXISTS `model` (
  `bid` varchar(5) NOT NULL,
  `mid` varchar(5) NOT NULL,
  `mname` varchar(20) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Make sure you have data in brand and model tables

1.  database.php

<?php
$cn=mysql_connect("localhost","root","") or die("Could not Connect My Sql");
mysql_select_db("carcare",$cn)  or die("Could connect to Database");
?>


2. servicereq.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Car Service</title>


<script>
function loadDoc() {
//alert('HUP');
     var key=document.frmsearch.brand.value;
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
             document.getElementById("a1").innerHTML = xhttp.responseText;
        }
  };
  xhttp.open("GET", "selectmodel.php?key="+key, true);
  xhttp.send();
}

</script>

</head>

<body>
<table>
<form name=frmsearch  method=post>
<tr><td>Select Brand</td><td><select name="brand" onChange="loadDoc()"><option>select</option>

<?php
include("database.php");

 $qr="select * from brand";
 $data=mysql_query($qr,$cn);
 while($row=mysql_fetch_array($data))
 {
         echo"<option value='$row[bid]'>".$row[bname]."</option>";
 }
 ?>
 </select>
 </td>
 </tr>

 <tr><td>Select Model</td><td><div id=a1></div></td></tr>
 </table>
</body>
</html>


3. selectmodel.php


<select name="model">

 <?php
 $bid=$_GET['key'];
 include("database.php");
 $qr="select * from model where bid like  '%$bid%'";
 $data=mysql_query($qr,$cn);
 while($row=mysql_fetch_array($data))
 {
         echo"<option>".$row[mname]."</option>";
 }
 ?>
 </select>


Upload a file with unique name and save file details in table

Dear Friends,

Here using this files you can upload a file to a folder called "uploads" and can be retrieved for viewing.

In Step 1 you design the form as given below. Make sure enctype="multipart/form-data" is written in the form tag.

Step1. uploadform.html

<html>
<body>

<form name="frm" action="upload.php"  method=post enctype="multipart/form-data" >
<input type="file" name="fileupload" size="70"/>

<input name="upbtn" type="submit" value="Upload files" />
</form>


</body>
</html>





Step 2.  upload.php
Here in the second step the file is uploaded and also file details are stored in the table.
Here whatever be the filename we append the dynamically generated id in front of the file and save in the folder so that in future duplicate filenames can be eliminated.

<?php
$target_dir = "uploads/";
$fname=basename($_FILES["fileupload"]["name"]);

$uploadOk = 1;
$imageFileType = pathinfo($fname,PATHINFO_EXTENSION);
session_start(); // Starting session so that used id can be retrieved for storing in the table.

//Here we retrieve the previously stored id from the table, so that adding one to that id give you the new fileid.
 
$sql="select max(aid) as maid from assignment ";
$aid=0;
$con=mysql_connect("localhost","root","root");
mysql_select_db("test",$con);
$data=mysql_query($sql,$con) or die(mysql_error());
while($row=mysql_fetch_array($data))
{
    $aid=$row['maid']+1;   
}

$userid=$_SESSION["user"];
$dates="2016-3-3"; // Date can be taken from system
$filename=$aid.$fname;
//if the filename is "record.doc" and aid is 123 then the filename will be uploaded as 123record.doc
$target_file = $target_dir . $filename;

$sql="insert into assignment values('$aid','$userid','$dates','12','$filename')"; // Table fields can be set by user

$data=mysql_query($sql,$con)  or die(mysql_error());
// Allow certain file formats
if($imageFileType != "doc" && $imageFileType != "docx" && $imageFileType != "pdf" )
    alert("Only doc or pdf files");
else
       move_uploaded_file($_FILES["fileupload"]["tmp_name"], $target_file);

?>
<html>
<body bgcolor="#33CCFF">
Succesfully inserted
</body>
</html>