Add images & search boxes in header & body to pulldowns

hightechredneck · #1 (**permalink**) 09-17-08, 01:11 PM

I'm really new to AJAX, and need some help. I found a 3 pulldown script and modified it to have 7 pulldowns. A pulldown for country, one for region, one for state, one for region of state, county, city and zip/postal code. This is backed up by 7 tables in a MySQL DB.

The structure for the table fields is:

Country table;

Field Type Null Default
id int(4) Yes NULL
country varchar(20) Yes
upload_id int(20) Yes
file_name varchar(50) Yes
file_size varchar(50) Yes
file_type varchar(50) Yes image/gif
site varchar(75) Yes

Region table;

Field Type Null Default
id int(4) Yes NULL
countryid int(4) Yes
regionname varchar(50)Yes
upload_id int(20) Yes
file_name varchar(50)Yes
file_size varchar(50)Yes
file_type varchar(50)Yes image/gif
site varchar(75)Yes

State table;

Field Type Null Default
id int(4) Yes NULL
statename varchar(50) Yes
regionid int(4) Yes
countryid int(4) Yes
upload_id int(20) Yes
file_name varchar(50) Yes
file_size varchar(50) Yes
file_type varchar(50) Yes image/gif
site varchar(75) Yes

State Region table;

Field Type Null Default
id int(6) Yes NULL
stateregionname varchar(50) Yes
stateid int(4) Yes
regionid int(4) Yes
countryid int(4) Yes
upload_id int(20) Yes
file_name varchar(50) Yes
file_size varchar(50) Yes
file_type varchar(50) Yes image/gif
site varchar(75) Yes

County table;

Field Type Null Default
id int(8) Yes NULL
countyname varchar(50) Yes
stateregionid int(6) Yes
stateid int(4) Yes
regionid int(4) Yes
countryid int(4) Yes
upload_id int(20) Yes
file_name varchar(50) Yes
file_size varchar(50) Yes image/gif
file_type varchar(50) Yes
site varchar(75) Yes

City table;

Field Type Null Default
id int(10) Yes NULL
city varchar(50) Yes
countyid int(8) Yes
stateregionid int(6) Yes
stateid int(4) Yes
regionid int(4) Yes
countryid int(4) Yes
upload_id int(20) Yes
file_name varchar(50) Yes
file_size varchar(50) Yes
file_type varchar(50) Yes image/gif
site varchar(75) Yes

Zip/Postal Code table;

Field Type Null Default
id int(10) Yes NULL
zip varchar(10) Yes
cityid int(10) Yes
countyid int(10) Yes
stateregionid int(8) Yes
stateid int(4) Yes
regionid int(4) Yes
countryid int(4) Yes
upload_id int(20) Yes
file_name varchar(50) Yes
file_size varchar(50) Yes
file_type varchar(50) Yes image/gif
site varchar(75) Yes

I want to do two things, first I want to have an image that is relevant to the country, region, state, region of state, county, city or zip/postal code, and the name of the country, region, etc display in the header.

I also want to have a search box that appears once each of the pulldowns have been activated to search another table on the DB for whatever the viewer may be looking for, any ideas how to get started?

The code for the index.php page so far:

Code:

 


<?php # PHP Script  

include ('./dynamic_header.inc'); 
// Use the HTML header file. 

?> 
<html> 
<head> 
<title>some site</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<script language="javascript" type="text/javascript"> 

function getXMLHTTP() { //function to return the xml http object 
      var xmlhttp=false;    
      try{ 
         xmlhttp=new XMLHttpRequest(); 
      } 
      catch(e)   {       
         try{          
            xmlhttp= new ActiveXObject("Microsoft.XMLHTTP"); 
         } 
         catch(e){ 
            try{ 
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); 
            } 
            catch(e1){ 
               xmlhttp=false; 
            } 
         } 
      } 
           
      return xmlhttp; 
    } 
   // Get the Location 
   function getRegion(countryid) {       
       
      var strURL="findRegion.php?country="+countryid; 
      var req = getXMLHTTP(); 
       
      if (req) { 
          
         req.onreadystatechange = function() { 
            if (req.readyState == 4) { 
               // only if "OK" 
               if (req.status == 200) {                   
                  document.getElementById('regiondiv').innerHTML=req.responseText;                   
               } else { 
                  alert("There was a problem while using XMLHTTP:\n" + req.statusText); 
               } 
            }             
         }          
         req.open("GET", strURL, true); 
         req.send(null); 
      }       
   } 

   // Get the Region 
   function getRegion(countryid) {       
       
      var strURL="findRegion.php?country="+countryid; 
      var req = getXMLHTTP(); 
       
      if (req) { 
          
         req.onreadystatechange = function() { 
            if (req.readyState == 4) { 
               // only if "OK" 
               if (req.status == 200) {                   
                  document.getElementById('regiondiv').innerHTML=req.responseText;                   
               } else { 
                  alert("There was a problem while using XMLHTTP:\n" + req.statusText); 
               } 
            }             
         }          
         req.open("GET", strURL, true); 
         req.send(null); 
      }       
   } 
   // Get the State 
   function getState(countryid,regionid) {       
      var strURL="findState.php?country="+countryid+"&region="+regionid; 
      var req = getXMLHTTP(); 
       
      if (req) { 
          
         req.onreadystatechange = function() { 
            if (req.readyState == 4) { 
               // only if "OK" 
               if (req.status == 200) {                   
                  document.getElementById('statediv').innerHTML=req.responseText;                   
               } else { 
                  alert("There was a problem while using XMLHTTP:\n" + req.statusText); 
               } 
            }             
         }          
         req.open("GET", strURL, true); 
         req.send(null); 
      } 
             
   } 
   // Get the State Region 
      function getStateRegion(countryid,regionid,stateid) {       
      var strURL="findStateRegion.php?country="+countryid+"&region="+regionid+"&state="+stateid; 
      var req = getXMLHTTP(); 
       
      if (req) { 
          
         req.onreadystatechange = function() { 
            if (req.readyState == 4) { 
               // only if "OK" 
               if (req.status == 200) {                   
                  document.getElementById('stateregiondiv').innerHTML=req.responseText;                   
               } else { 
                  alert("There was a problem while using XMLHTTP:\n" + req.statusText); 
               } 
            }             
         }          
         req.open("GET", strURL, true); 
         req.send(null); 
      } 
             
   } 
      // Get the County 
      function getCounty(countryid,regionid,stateid,stateregionid) {       
      var strURL="findCounty.php?country="+countryid+"&region="+regionid+"&state="+stateid+"&stateregion="+stateregionid; 
      var req = getXMLHTTP(); 
       
      if (req) { 
          
         req.onreadystatechange = function() { 
            if (req.readyState == 4) { 
               // only if "OK" 
               if (req.status == 200) {                   
                  document.getElementById('countydiv').innerHTML=req.responseText;                   
               } else { 
                  alert("There was a problem while using XMLHTTP:\n" + req.statusText); 
               } 
            }             
         }          
         req.open("GET", strURL, true); 
         req.send(null); 
      } 
             
   } 
      // Get the City 
      function getCity(countryid,regionid,stateid,stateregionid,countyid) {       
      var strURL="findCity.php?country="+countryid+"&region="+regionid+"&state="+stateid+"&stateregion="+stateregionid+"&county="+countyid; 
      var req = getXMLHTTP(); 
       
      if (req) { 
          
         req.onreadystatechange = function() { 
            if (req.readyState == 4) { 
               // only if "OK" 
               if (req.status == 200) {                   
                  document.getElementById('citydiv').innerHTML=req.responseText;                   
               } else { 
                  alert("There was a problem while using XMLHTTP:\n" + req.statusText); 
               } 
            }             
         }          
         req.open("GET", strURL, true); 
         req.send(null); 
      } 
             
   } 
      // Get the Zip 
      function getZip(countryid,regionid,stateid,stateregionid,countyid,cityid) {       
      var strURL="findZip.php?country="+countryid+"&region="+regionid+"&state="+stateid+"&stateregion="+stateregionid+"&county="+countyid+"&city="+cityid; 
      var req = getXMLHTTP(); 
       
      if (req) { 
          
         req.onreadystatechange = function() { 
            if (req.readyState == 4) { 
               // only if "OK" 
               if (req.status == 200) {                   
                  document.getElementById('zipdiv').innerHTML=req.responseText;                   
               } else { 
                  alert("There was a problem while using XMLHTTP:\n" + req.statusText); 
               } 
            }             
         }          
         req.open("GET", strURL, true); 
         req.send(null); 
      } 
             
   } 
</script> 
</head> 
<body> 
<form method="post" action="" name="form1"> 
  <table width="60%" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
      <td width="150">World Wide</td> 
      <td  width="150">&nbsp; </td> 
    </tr> 
    <tr style=""> 
      <td>Country</td> 
      <td > 
          
          <select name="country" onChange="getRegion(this.value)"> 
            <option value="">Select Country</option> 
            <option value="1">United States</option> 
             <option value="2">Afghanistan</option> 
             <option value="3">Albania</option> 
             <option value="4">Algeria</option> 
             <option value="5">Andorra</option> 
             <option value="6">Angola</option> 
             <option value="7">Antigua & Barbuda</option> 
             <option value="8">Argentina</option> 
             <option value="9">Armenia</option> 
             <option value="10">Australia</option> 
             <option value="11">Austria</option> 
             <option value="12">Azerbaijan</option> 
             <option value="13">Bahamas</option> 
             <option value="14">Bahrain</option> 
             <option value="15">Bangladesh</option> 
             <option value="16">Barbados</option> 
             <option value="17">Belarus</option> 
             <option value="18">Belgium</option> 
             <option value="19">Belize</option> 
             <option value="20">Benin</option> 
             <option value="21">Bhutan</option> 
             <option value="22">Bolivia</option> 
             <option value="23">Bosnia & Herzegovina</option> 
             <option value="24">Botswana</option> 
             <option value="25">Brazil</option> 
             <option value="26">Brunei & Darussalam</option> 
             <option value="27">Bulgaria</option> 
             <option value="28">Burkina Faso</option> 
             <option value="29">Burma (Myanmar)</option> 
             <option value="30">Burundi</option> 
             <option value="31">Cambodia</option> 
             <option value="32">Cameroon</option> 
             <option value="33">Canada</option> 
             <option value="34">Cape Verde</option> 
             <option value="35">Central African Republic</option> 
             <option value="36">Chad</option> 
             <option value="37">Chile</option> 
             <option value="38">China</option> 
             <option value="39">Colombia</option> 
             <option value="40">Comoros</option> 
             <option value="41">Congo</option> 
             <option value="42">Congo, Democratic Republic of</option> 
             <option value="43">Costa Rica</option> 
             <option value="44">C&ocirc;te d'Ivoire</option> 
             <option value="45">Croatia</option> 
             <option value="46">Cuba</option> 
             <option value="47">Cyprus</option> 
             <option value="48">Czech Republic</option> 
             <option value="49">Denmark</option> 
             <option value="50">Djibouti</option> 
             <option value="51">Dominica</option> 
             <option value="52">Dominican Republic</option> 
             <option value="53">Ecuador</option> 
             <option value="54">East Timor</option> 
             <option value="55">Egypt</option> 
             <option value="56">El Salvador</option> 
             <option value="103">England</option> 
             <option value="57">Equatorial Guinea</option> 
             <option value="58">Eritrea</option> 
             <option value="59">Estonia</option> 
             <option value="60">Ethiopia</option> 
             <option value="61">Fiji</option> 
             <option value="62">Finland</option> 
             <option value="63">France</option> 
             <option value="64">Gabon</option> 
             <option value="65">Gambia</option> 
             <option value="66">Georgia</option> 
             <option value="67">Germany</option> 
             <option value="68">Ghana</option> 
             <option value="103">Great Britain</option> 
             <option value="69">Greece</option> 
             <option value="70">Grenada</option> 
             <option value="71">Guatemala</option> 
             <option value="72">Guinea</option> 
             <option value="73">Guinea-Bissau</option> 
             <option value="74">Guyana</option> 
             <option value="75">Haiti</option> 
             <option value="76">Honduras</option> 
             <option value="77">Hungary</option> 
             <option value="78">Iceland</option> 
             <option value="79">India</option> 
             <option value="80">Indonesia</option> 
             <option value="81">Iran</option> 
             <option value="82">Iraq</option> 
             <option value="83">Ireland</option> 
             <option value="84">Israel</option> 
             <option value="85">Italy</option> 
             <option value="86">Jamaica</option> 
             <option value="87">Japan</option> 
             <option value="88">Jordan</option> 
             <option value="89">Kazakhstan</option> 
             <option value="90">Kenya</option> 
             <option value="91">Kiribati</option> 
             <option value="131">Korea, North</option> 
             <option value="163">Korea, South</option> 
             <option value="92">Kuwait</option> 
             <option value="93">Kyrgyzstan</option> 
             <option value="94">Laos</option> 
             <option value="95">Latvia</option> 
             <option value="96">Lebanon</option> 
             <option value="97">Lesotho</option> 
             <option value="98">Liberia</option> 
             <option value="99">Libya</option> 
             <option value="100">Liechtenstein</option> 
             <option value="101">Lithuania</option> 
             <option value="102">Luxembourg</option> 
             <option value="104">Macedonia</option> 
             <option value="105">Madagascar</option> 
             <option value="106">Malawi</option> 
             <option value="107">Malaysia</option> 
             <option value="108">Maldives</option> 
             <option value="109">Mali</option> 
             <option value="110">Malta</option> 
             <option value="111">Marshall Islands</option> 
             <option value="112">Mauritania</option> 
             <option value="113">Mauritius</option> 
             <option value="114">Mexico</option> 
             <option value="115">Micronesia</option> 
             <option value="116">Moldova</option> 
             <option value="117">Monaco</option> 
             <option value="118">Mongolia</option> 
             <option value="119">Montenegro</option> 
             <option value="120">Morocco</option> 
             <option value="121">Mozambique</option> 
             <option value="29">Myanmar (Burma)</option> 
             <option value="122">Namibia</option> 
             <option value="123">Nauru</option> 
             <option value="124">Nepal</option> 
             <option value="125">Netherlands</option> 
             <option value="126">New Zealand</option> 
             <option value="127">Nicaragua</option> 
             <option value="128">Niger</option> 
             <option value="129">Nigeria</option> 
             <option value="130">Northern Ireland</option> 
             <option value="132">Norway</option> 
             <option value="133">Oman</option> 
             <option value="134">Pakistan</option> 
             <option value="135">Palau</option> 
             <option value="136">Palestine</option> 
             <option value="137">Panama</option> 
             <option value="138">Papua New Guinea</option> 
             <option value="139">Paraguay</option> 
             <option value="140">Peru</option> 
             <option value="141">Philippines</option> 
             <option value="142">Poland</option> 
             <option value="143">Portugal</option> 
             <option value="144">Qatar</option> 
             <option value="145">Romania</option> 
             <option value="146">Russia</option> 
             <option value="147">Rwanda</option> 
             <option value="148">Samoa</option> 
             <option value="149">San Marino</option> 
             <option value="150">S&atilde;o Tom&eacute; and Pr&iacute;ncipe </option> 
             <option value="151">Saudi Arabia</option> 
             <option value="152">Scotland</option> 
             <option value="153">Senegal</option> 
             <option value="154">Serbia</option> 
             <option value="155">Seychelles</option> 
             <option value="156">Sierra Leone</option> 
             <option value="157">Singapore></option> 
             <option value="158">Slovakia</option> 
             <option value="159">Slovenia></option> 
             <option value="160">Solomon Islands</option> 
             <option value="161">Somalia</option> 
             <option value="162">South Africa</option> 
             <option value="164">Spain</option> 
             <option value="165">Sri Lanka</option> 
             <option value="166">St Kitts & Nevis</option> 
             <option value="167">St Lucia</option> 
             <option value="168">St Vincent & The Grenadines</option> 
             <option value="169">Sudan</option> 
             <option value="170">Suriname</option> 
             <option value="171">Swaziland</option> 
             <option value="172">Sweden</option> 
             <option value="173">Switzerland</option> 
             <option value="174">Syria</option> 
             <option value="175">Taiwan</option> 
             <option value="176">Tajikistan</option> 
             <option value="177">Tanzania</option> 
             <option value="178">Thailand</option> 
             <option value="179">Togo</option> 
             <option value="180">Tonga</option> 
             <option value="181">Trinidad & Tobago</option> 
             <option value="182">Tunisia</option> 
             <option value="183">Turkey</option> 
             <option value="184">Turkmenistan</option> 
             <option value="185">Tuvalu</option> 
             <option value="186">Uganda</option> 
             <option value="187">Ukraine</option> 
             <option value="188">United Arab Emirates</option> 
             <option value="103">United Kingdom</option> 
             <option value="189">Uruguay</option> 
             <option value="190">Uzbekistan</option> 
             <option value="191">Vanuatu</option> 
             <option value="192">Vatican City</option> 
             <option value="193">Venezuela</option> 
             <option value="194">Vietnam</option> 
             <option value="195">Wales</option> 
             <option value="196">Western Sahara</option> 
             <option value="197">Yemen</option> 
             <option value="198">Zambia</option> 
             <option value="199">Zimbabwe</option> 
          </select> 
        
      </td> 
    </tr> 
    <tr style=""> 
      <td>Region of Country</td> 
      <td > 
        <div id="regiondiv"><select name="region"> 
            <option>Select Country First</option> 
          </select> 
      </div> 
      </td> 
    </tr> 
    <tr style=""> 
      <td>State/Province</td> 
      <td > 
        <div id="statediv"><select name="state"> 
            <option>Select Region First</option> 
          </select> 
        </div> 
      </td> 
    </tr> 
    <tr> 
      <td>Region of State/Province</td> 
      <td> 
        <div id="stateregiondiv"><select name="stateregion" > 
            <option>Select State/Province First</option> 
          </select> 
      </div>  
      </td> 
    </tr> 
    <tr> 
      <td>County</td> 
      <td> 
        <div id="countydiv"><select name="county" > 
            <option>Select Region of State/Province First</option> 
          </select> 
        </div> 
     </td> 
    </tr> 
    <tr> 
      <td>City</td> 
      <td> 
        <div id="citydiv"><select name="city"> 
            <option>Select County First</option> 
          </select> 
        </div> 
     </td> 
    </tr> 
    <tr> 
      <td>Zip/Postal Code</td> 
      <td> 
        <div id="zipdiv"><select name="zip"> 
            <option>Select City First</option> 
          </select> 
        </div> 
     </td> 
    </tr> 
  </table> 
</form> 
</body> 
</html>

Present code in the header (I think it needs to be changed drastically)

Code:

 

      <?php # PHP Script - map_display.php 

    
   // Get site info. 
if ( isset($_POST['id']) ) { 

    // get provider info from database 
    $_SESSION['id'] = $_POST['id']; 
    $id = $_SESSION['id']; 
    
   //get the data 
$query = "SELECT * FROM uploads WHERE site_id = '$id' LIMIT 1"; 
$result = mysql_query($query); 


//set variables and constants. 
DEFINE('NUM_COLUMNS', 2); 
DEFINE('TABLE_WIDTH', 330); 
$record_number = 0; 
$column_width = floor(TABLE_WIDTH / NUM_COLUMNS); 

echo '<table align="center" width="'. TABLE_WIDTH . '">'; 
while($row = mysql_fetch_array($result, MYSQL_NUM)) 
  { 
  if(fmod($record_number, NUM_COLUMNS) == 0) 
    echo '<tr>'; 
  //--information for each individual cell in the row 
  echo '<td valign="top" align="center"  width="' . $column_width . '">'; 
  if ($image = @filesize ("../uploads/{$row[1]}")) { 
      echo "<img src=\"../uploads/{$row[1]}\" height=\"100\" />"; 
   } else { 
      echo "<div align=\"center\"><font face=\"arial\" size=\"2\"><b>No image available.</b></font></div>"; 
   }  
  echo '<td valign="middle" align="center" width="' . $column_width . '">'; 
  echo '<font face="Arial, Helvetica, sans-serif" size="4"><b>' . $row[6] . '</b>'; 
  echo '</td>'; 
    
     
  //--- 
  
  $record_number++;    
  if(fmod($record_number, NUM_COLUMNS) == 0) 
    echo '</tr>'; 
  
  } 
echo '</table>'; 
} 
?>

and the php file for one of the pulldowns

Code:

 

<? 
$countryid=''; 
$regionid=''; 
$stateid=''; 
$stateregionid=''; 
$countyid=''; 
$cityid=''; 
if(isset($_GET['country'])){ 
$countryid=intval($_GET['country']); 
} 
if(isset($_GET['region'])){ 
$regionid=intval($_GET['region']); 
} 
if(isset($_GET['state'])){ 
$stateid=intval($_GET['state']); 
} 
if(isset($_GET['stateregion'])){ 
$stateregionid=intval($_GET['stateregion']); 
} 
if(isset($_GET['county'])){ 
$countyid=intval($_GET['county']); 
} 
if(isset($_GET['city'])){ 
$cityid=intval($_GET['city']); 
} 
$link = mysql_connect('localhost', 'mdhpc', 'ti329br'); //changet the configuration in required 
if (!$link) { 
    die('Could not connect: ' . mysql_error()); 
} 
mysql_select_db('pixels'); 
$query="SELECT id,zip FROM zip WHERE countryid='$countryid' AND regionid='$regionid' AND stateid='$stateid' AND stateregionid='$stateregionid' AND countyid='$countyid' AND cityid='$cityid'"; 
$result=mysql_query($query); 

?> 
<select name="zip"> 
<option>Select Zip/Postal Code</option> 
<? while($row=mysql_fetch_array($result)) { ?> 
<option value="<?=$row['id']?>"><?=$row['zip']?></option> 
<? } ?> 
</select>

Thanks for your help.

T