PHP forums, MySQL forums, Web Development resources - View topic - Add images & search boxes in header & body to pulldo

Add images & search boxes in header & body to pulldo

WeberForums.com Forum Index -> Java Script / AJAX

View previous topic :: View next topic

Author

Message

hightechredneck

Joined: 05 Mar 2005
Posts: 159

Posted: Wed Sep 17, 2008 5:52 pm Post subject: Add images & search boxes in header & body to pulldo

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">  </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ô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ão Tomé and Prí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

Display posts from previous:

WeberTrivia Questions
	Think you are smart? Prove it!. Try your skills with these questions :
	Recursive arrays and multi-dimensional arrays are one and the same. (PHP and MySQL)
	The \"cache_dir\" tag of the squid configuration has a default of /var/spool/squid. (Linux)

	WeberForums.com Forum Index -> Java Script / AJAX	All times are GMT + 2 Hours
Page 1 of 1

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum