Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2008
    Posts
    23
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Using Javascript and Ajax to Refine My Search Results

    Hello all....I've been searching all over for a solution to this problem.
    I would like to refine the results of mysql query using dropdown boxes... live site is here:
    http://www.halfwayenterprises.com/find_policy2.php

    and here is the coding:
    Code:
    <!DOCTYPE HTML>
    <html>
    
    <head>
    
    <!--[if lte IE 8 ]>
    <script>  
        document.createElement("footer");  
        document.createElement("header");    
    </script>
    <![endif]-->
    
    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    
    
    
    <style type="text/css">
    
    .button
    {
    background-color: #0033ff;
    color: #fff;
    font-family: Verdana, Arial;
    }
    a:link {color:#0033FF;}      /* unvisited link */
    a:visited {color:#0033FF;}  /* visited link */
    a:hover {color:#0033FF;}  /* mouse over link */
    a:active {color:#0033FF;}  /* selected link */
    
    
    </style>
    
    
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    
    
    
    
    
    
    
    
    
    
    </head>
    
    <body>
    
    
    
    
    <form name="doublecombo" action="" method="POST">
    
    <table border="1" cellpadding="10px" bgcolor="#CCCCCC">
    
      <tr><td>  <label for="status">Find in:</label>
    
        <label for="current">
            <input class="radio_style" id="current" checked="checked" name="status" type="radio" value="current">
         Current
        </label>
    
        <label for="obsolete">
            <input class="radio_style" id="obsolete" name="status" type="radio" value="obsolete">
         Obsolete
        </label>
    	
        <label for="both">
            <input class="radio_style" id="both" name="status" type="radio" value="both">
        Both
        </label></td></tr>
    	
    	<br />
    	
    	
      <tr><td> 	
     <label for="Category">By category:</label>	
    <select name="category" size="1" width="300" style="width: 300px" onChange="redirect(this.options.selectedIndex)">
    	<option value="null">Category</option>
    <option value="asset management">Asset Management</option>
    <option value="budget">Budget/Finance</option>
    <option value="central office">Central Office</option>
    <option value="client services/programs">Client Services/Programs</option>
    <option value="cam">Customer Account Management</option>
    <option value="dc">Design & Construction</option>
    <option name="disposal" value="disposal">Disposal</option>
    <option value="orm">Organization/Resource Management</option>
    <option value="Procurement/Contracting">Procurement/Contracting</option>
    <option value="real property acquisition">Real Property Acquisition</option>
    <option value="real property management/lease administration">Real Property Management/Lease Administration</option>
    
    
    </select>
    
    
    
    
    
    <select name="subcategory" size="1"width="300" style="width: 300px"  >
    <option value="null">Sub-Category</option>
      <option value="Portfolio">Portfolio</option>
     <option value="Pricing">Pricing</option>
     <option value="Valuation">Valuation</option>
    
     <option value="Claims">Claims</option>
     <option value="Financial Management">Financial Managementt</option>
     <option value="Funding">Funding</option>
     <option value="Internal Controls">Internal Controls</option>
    <option value="Rent/Billling">Rent/Billling</option>
    
     <option value="Central Office">Central Office</option>
     <option value="Conferences">Conferences</option>
    
     <option value="Child Care">Child Care</option>
     <option value="Concessions">Concessions</option>
     <option value="Delegations">Delegations</option>
     <option value="Directives Management">Directives Management</option>
     <option value="Historic Preservation">Historic Preservation</option>
     <option value="Records Management">Records Management</option>
     <option value="Reimbursable Services">Reimbursable Services</option>
     <option value="Sustainable Design">Sustainable Design</option>
     <option value="WorkPlace Programs">WorkPlace Programs</option>
    
     <option value="Customer Account Management">Customer Account Management</option>
     <option value="Accessibility">Accessibility</option>
    <option value="Art in Architecture">Art in Architecture</option>
     <option value="Border Stations">Border Stations</option>
     <option value="Building Information Modeling">Building Information Modeling</option>
     <option value="Courthouse Program">Courthouse Program</option>
     <option value="Design Criteria and Guidelines">Design Criteria and Guidelines</option>
     <option value="Design Excellence">Design Excellence</option>
     <option value="Facilities Standards">Facilities Standards</option>
     <option value="Fire Protection/Life Safety">Fire Protection/Life Safety</option>
     <option value="Project Development">Project Development</option>
     <option value="Project Management">Project Management</option>
     <option value="Repairs and Alterations">Repairs and Alterations</option>
     <option value="Security">Security</option>
     <option value="Seismic">Seismic</option>
     <option value="Urban Design">Urban Designt</option>
    
    <option id="disposal" value="Disposal">Disposal</option>
    
     <option value="Business Planning & Improvement">Business Planning & Improvement</option>
     <option value="Communications/Branding">Communications/Branding</option>
     <option value="External Relations and Inquiries">External Relations and Inquiries</option>
     <option value="Correspondence Management">Correspondence Management</option>
     <option value="Information Technology">Information Technology</option>
     <option value="Management Controls">Management Controls</option>
     <option value="Occupation Safety and Health">Occupation Safety and Health</option>
     <option value="Telework">Telework</option>
    
    
     <option value="Procurement">Procurement</option>
     <option value="Procurement Instructional Bulletins">Procurement Instructional Bulletins</option>
    
     <option value="Assignment & Utilization of Space">Assignment & Utilization of Space</option>
     <option value="Lease Administration/Lease Policy">Lease Administration/Lease Policy</option>
     <option value="Occupancy Services">Occupancy Services</option>
    <option value="Site Acquisition">Site Acquisition</option>
    
     <option value="Building Operations, Maintenance and Cleaning">Building Operations, Maintenance and Cleaning</option>
     <option value="Emergency Preparedness">Emergency Preparedness</option>
     <option value="Energy and Utilities">Energy and Utilities</option>
     <option value="Enviroment">Enviroment</option>
     <option value="Fire Protection/Life Safety">Fire Protection/Life Safety</option>
     <option value="Health">Healtht</option>
     <option value="Lease Administration">Lease Administration</option>
     <option value="Naming Buildings">Naming Buildings</option>
     <option value="Occasional Use of Public Space">Occasional Use of Public Space</option>
     <option value="Recycling">Recycling</option>
     <option value="Repairs and Alterations">Repairs and Alterations</option>
     <option value="Security">Security</option>
     
     
     
     
     
    </select>
    <input name="submitted" class="button" type="submit" value="GO"></td></tr>
    
    <br />
    
    
    
    
    
    
    
    
     <tr><td> 	
    By term: 
    
    <input type="text" name="find" placeholder="Search Term" />
    
     <Select NAME="field">
     <Option id="searchon"  VALUE="null">Search On</option>
     <Option id="title"  VALUE="title">Title</option>
     <Option id="poc" VALUE="poc">POC</option>
     <Option id="purpose" VALUE="purpose">Purpose</option>
      
     </Select>
    
     <input type="hidden" name="searching" value="yes" />
    
    
    
    
    
    <input name="submitted" class="button" type="submit" value="GO"><br /><br />
    
    
    Refine:
    
    
    <select name="office">
    <option value="office">Sort by Office</option>
    <option value="p">P</option>
    <option value="pt">PT</option>
    <option value="pf">PF</option>
    </select>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    </td></tr>
    </form>
    
    </table>
    
    
    
    
    
    
    <br /><br />
    
    <script>
    <!--
    
    /*
    Double Combo Script Credit
    By JavaScript Kit (www.javascriptkit.com)
    Over 200+ free JavaScripts here!
    */
    var groups=document.doublecombo.category.options.length
    var group=new Array(groups)
    for (i=0; i<groups; i++)
    group[i]=new Array()
    
    
    group[0][0]=new Option("Sub Category")
    
    
    group[1][0]=new Option("Portfolio")
    group[1][1]=new Option("Pricing")
    group[1][2]=new Option("Valuation")
    
    group[2][0]=new Option("Claims")
    group[2][1]=new Option("Financial Management")
    group[2][2]=new Option("Funding")
    group[2][3]=new Option("Internal Controls")
    group[2][4]=new Option("Rent/Billing")
    
    group[3][0]=new Option("Central Office")
    group[3][1]=new Option("Conferences")
    
    group[4][0]=new Option("Child Care")
    group[4][1]=new Option("Concessions")
    group[4][2]=new Option("Delegations")
    group[4][3]=new Option("Directives Management")
    group[4][4]=new Option("Historic Preservation")
    group[4][5]=new Option("Records Management")
    group[4][6]=new Option("Reimbursable Services")
    group[4][7]=new Option("Sustainable Design")
    group[4][8]=new Option("WorkPlace Programs")
    
    group[5][0]=new Option("Customer Account Management")
    
    group[6][0]=new Option("Accessibility")
    group[6][1]=new Option("Art in Achitecture")
    group[6][2]=new Option("Border Stations")
    group[6][3]=new Option("Building Information Modeling")
    group[6][4]=new Option("Courthouse Program")
    group[6][5]=new Option("Design Criteria and Guidelines")
    group[6][6]=new Option("Design Excellence")
    group[6][7]=new Option("Facilities Standards")
    group[6][8]=new Option("Fire Protection/Life Safety")
    group[6][9]=new Option("Project Development")
    group[6][10]=new Option("Project Management")
    group[6][11]=new Option("Repairs and Alterations")
    group[6][12]=new Option("Security")
    group[6][13]=new Option("Seismic")
    group[6][14]=new Option("Urban Design")
    
    group[7][0]=new Option("Disposal")
    
    
    
    group[8][0]=new Option("Business Planning &amp; Improvement")
    group[8][1]=new Option("Communications/Branding")
    group[8][2]=new Option("External Relations and Inquires")
    group[8][3]=new Option("Correspondence Management")
    group[8][4]=new Option("Information Technology")
    group[8][5]=new Option("Management Controls")
    group[8][6]=new Option("Occupation Safety and Health")
    group[8][7]=new Option("Telework")
    
    group[9][0]=new Option("Procurement")
    group[9][1]=new Option("Procurement Instructional Bullentins")
    
    group[10][0]=new Option("Assignment & Utilization of Space")
    group[10][1]=new Option("Lease Administration/Lease Policy")
    group[10][2]=new Option("Occupancy Services")
    group[10][3]=new Option("Site Acquisition")
    
    
    group[11][0]=new Option("Building Operations, Maintenance and Cleaning")
    group[11][1]=new Option("Emergency Preparedness")
    group[11][2]=new Option("Enviroment")
    group[11][3]=new Option("Fire Protection/Life Safety")
    group[11][4]=new Option("Health")
    group[11][5]=new Option("Lease Administration")
    group[11][6]=new Option("Naming Buildings")
    group[11][7]=new Option("Occasional Use of Public Space")
    group[11][8]=new Option("Recycling")
    group[11][9]=new Option("Repairs and Alterations")
    group[11][10]=new Option("Security")
    
    
    
    var temp=document.doublecombo.subcategory
    
    function redirect(x){
    for (m=temp.options.length-1;m>0;m--)
    temp.options[m]=null
    for (i=0;i<group[x].length;i++){
    temp.options[i]=new Option(group[x][i].text,group[x][i].value)
    }
    temp.options[0].selected=true
    }
    
    function go(){
    location=temp.options[temp.selectedIndex].value
    }
    
    
    //-->
    </script>
    And the php mysql part:

    Code:
    <?php
    require("config.php");
    
    mysql_connect("localhost",$username,$password);
    mysql_select_db($database) or die( "Unable to select database");
     
     if(isset($_POST["submitted"])){
    
        $status = $_POST['status'];	
    	
    	$category = $_POST['category'];
    
    	$office = $_POST['office'];
     
      $field = @$_POST['field'] ;
    $find = @$_POST['find'] ;
    $searching = @$_POST['searching'] ;
     
      
    
    	
        echo '<div class="status_div">';
    	
    
            if($status=='current')
    				
    		{
    		echo "<h2>Results</h2><p>";
    
                 $res = mysql_query("SELECT * FROM material WHERE status='$status' AND category='$category' ORDER BY `material`.`title` ASC  Limit 0,30 ");
    			 
    	
    			 
    
    	
                while ($row = mysql_fetch_assoc($res)) {
    			
    		
                    echo '<div class="current">';
    				
    			echo 
    			'<a href="'.$row['link'].'">'.$row['documentid'].'&nbsp;'.$row['status'].'&nbsp;'.$row['title'].'</a>'. '<br>'.
    			
    			$row['office'].'&nbsp;'.'&nbsp;'.$row['date'].'&nbsp;'.'&nbsp;'.$row['poc'].','.'&nbsp;'.$row['telephone'].'&nbsp;'.
    			$row['email'].'&nbsp;'.'&nbsp;'.$row['purpose']; 
          
    
                    echo '</div>';
    
                    echo '<br>';
    				
    
                }
    			
    		exit;
    			
    		//filter for CURRENT
    		
    		
    	
     if($_POST['type']){
    
        $result = mysql_query("SELECT * FROM `material` WHERE status='current' AND office='$office' ORDER BY  `material`.`office` ASC" );
    	
    while ($row = mysql_fetch_assoc($result))	
    
                 
    		echo
    '<a href="'.$row['link'].'">'.$row['title'].'</a>'. '<br>'.$row['office'].'&nbsp;'.'&nbsp;'.$row['date'].'&nbsp;'.'&nbsp;'.$row['poc'].','.'&nbsp;'.$row['telephone'].'&nbsp;'.$row['email'].'&nbsp;'.'&nbsp;'.$row['purpose']; 
          
    
    
              
    
    
    
      echo '<br>';
    
    
    }
    
    
    
    
    
    
    
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    	
    		
    		
    		
    	   
    		
    		
    
    
    
    
    
    
    
    
    
    
    
            } if ($status=='obsolete')
    			
    		
    		{
    			echo "<h2>Results</h2><p>";
                $res = mysql_query("SELECT * FROM material WHERE status='$status' AND category='$category' ORDER BY `material`.`title` ASC ");
    
                while ($row = mysql_fetch_assoc($res)) {
    
                     echo '<div class="obsolete">';
    
                   echo '<a href="'.$row['link'].'">'.$row['documentid'].'&nbsp;'.$row['status']  .$row['title'].'</a>'. '<br>'.
    			
    			$row['office'].'&nbsp;'.'&nbsp;'.$row['date'].'&nbsp;'.'&nbsp;'.$row['poc'].','.'&nbsp;'.$row['telephone'].'&nbsp;'.
    			$row['email'].'&nbsp;'.'&nbsp;'.$row['purpose']; 
          
    
                   
    
                    echo '</div>';
    
                    echo '<br>';
    				
    
                }  
    			
    			 
    			 
    			//filter for OBSOLETE
    			   
    			 
    			
    			   
    			 
    			 
    
    
    
    
    
    
    
    
    
    
    			 
    			 
    			 
    			 
    			 
    			 
    			 
    			 
    			 
    			 
    			
    			
    			    } if ($status=='both')			
    				
    				{
    				
    			echo "<h2>Results</h2><p>";
                $res = mysql_query("SELECT * FROM material WHERE status1='both'  AND category='$category' ORDER BY `material`.`title` ASC  ");
    
                while ($row = mysql_fetch_assoc($res)) {
                    echo '<div class="both">';
    
    
    
                        echo   '<a href="'.$row['link'].'">'.$row['documentid'].'&nbsp;'.$row['status']  .$row['title'].'</a>'. '<br>'.
    			
    			$row['office'].'&nbsp;'.'&nbsp;'.$row['date'].'&nbsp;'.'&nbsp;'.$row['poc'].','.'&nbsp;'.$row['telephone'].'&nbsp;'.
    			$row['email'].'&nbsp;'.'&nbsp;'.$row['purpose']; 
          
    
                    echo '</div>';
    
                    echo '<br>';
    
                }               
    			
            }
    		
    		//filter for BOTH
    		
    		
    
    		
    
    
    
    
    
    
    
    
    
    
    
    echo '</div>';
    
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
      
     //This is only displayed if they have submitted the form 
     if ($searching =="yes") 
     { 
     echo "<h2></h2><p>"; 
     
    
     //If they did not enter a search term we give them an error 
     if ($find == "") 
     { 
     
    echo "<a href='find_policy.php'>Clear Search</a>";
    echo '<br>';
    echo '<br>';
    echo '<img src="images/footer.gif" width="935" height="50">';
    
    
     exit; 
     } 
     
    
     // We preform a bit of filtering 
     $find = strtoupper($find); 
     $find = strip_tags($find); 
     $find = trim ($find); 
    
     //Now we search for our search term, in the field the user specified 
     
     
     if($status=='current'){
     
     $data = mysql_query("SELECT * FROM material WHERE status='$status'  AND lower($field) LIKE'%$find%'  ORDER BY `material`.`title` ASC ");
     
         while ($row = mysql_fetch_assoc($data)) {
    
                    echo '<div class="current">';
    
                   echo '<a href="'.$row['link'].'">'  .$row['title'].'</a>'. '<br>'.
    			
    			$row['office'].'&nbsp;'.'&nbsp;'.$row['date'].'&nbsp;'.'&nbsp;'.$row['poc'].','.'&nbsp;'.$row['telephone'].'&nbsp;'.
    			$row['email'].'&nbsp;'.'&nbsp;'.$row['purpose']; 
          
    
                    echo '</div>';
    
                    echo '<br>';
    
                }
     
     
    
    
            }
    		
    		 if ($status=='obsolete'){
    
                $data = mysql_query("SELECT * FROM material WHERE status='$status' AND lower($field) LIKE'%$find%'  ORDER BY `material`.`title` ASC ");
    
                while ($row = mysql_fetch_assoc($data)) {
    
                    echo '<div class="obsolete">';
    
                   echo'<a href="'.$row['link'].'">'  .$row['title'].'</a>'. '<br>'.
    			
    			$row['office'].'&nbsp;'.'&nbsp;'.$row['date'].'&nbsp;'.'&nbsp;'.$row['poc'].','.'&nbsp;'.$row['telephone'].'&nbsp;'.
    			$row['email'].'&nbsp;'.'&nbsp;'.$row['purpose']; 
          
    
                    echo '</div>';
    
                    echo '<br>';
    
                }  
    			
    			 
    			  
    			
    			    } if ($status=='both'){
    
                $data = mysql_query("SELECT * FROM material WHERE status1='both' AND lower($field) LIKE'%$find%'  ORDER BY `material`.`title` ASC ");
    
                while ($row = mysql_fetch_assoc($data)) {
    
                    echo '<div class="">';
    
                        echo '<a href="'.$row['link'].'">'  .$row['title'].'</a>'. '<br>'.
    			
    			$row['office'].'&nbsp;'.'&nbsp;'.$row['date'].'&nbsp;'.'&nbsp;'.$row['poc'].','.'&nbsp;'.$row['telephone'].'&nbsp;'.
    			$row['email'].'&nbsp;'.'&nbsp;'.$row['purpose']; 
          
    
                    echo '</div>';
    
                    echo '<br>';
    
                }               
    			
            }
    		
     
    //This counts the number or results - and if there wasn't any it gives them a little message explaining that 
     $anymatches=mysql_num_rows($data); 
     if ($anymatches == 0) 
     { 
     echo "Sorry, but we can not find an entry to match your query<br><br>"; 
     } 
     
     //And we remind them what they searched for 
     echo "<b>Searched For:</b> " .$find; 
     } 
     
    
    
    	 //Filter 
     
    
      
    	
    
    ?>
    
    
    </center>
    <p align="center"><font face="arial" size="-2">This free script provided by</font><br>
    <font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
    Kit</a></font></p>
    
    </body>
    </html>
    Any help will be greatly appreciated

  • #2
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,979
    Thanks
    4
    Thanked 2,659 Times in 2,628 Posts
    Despite the similar sounding names, Java is not the same as Javascript.
    Moving from Java forum to Javascript forum.

    The PHP/MySQL part is irrelevant to the JS. All that matters is the output which the client developers can see in the live link.

  • #3
    New Coder
    Join Date
    Aug 2008
    Posts
    23
    Thanks
    4
    Thanked 0 Times in 0 Posts
    wow..sorry..am batting 1.000...this week..lol


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •