Passing Variables from dynamic boxes

alanl1 · April 12, 2013

Hi professionals

I have two php webpages shown below and the the problem I am having is I can pass the variable suburb, searchfor, category and radius through no problem to the find-a-radius.php, but I am wanting to pass through the longtitude and latitude co-ordinates from the database to in order for me to do my calculations without them dynamically being seen in the dropdown box by a user

I am sorry if this is a complex post but I am fairly new to php/mysql I do hope there is someone out there who is experienced enough to figure this out

SEARCH.PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<body>

<div id="page-wrap">
<ul id="main-nav">

<li class="home"><a href="index.php">Post Ad</a></li>

<li class="current"><a href="search.php">Search</a></li>

<li class="signin"><a href="signin.php">Sign in</a></li>

<li class="register"><a href="register.php">Register</a></li>

<li class="about"><a href="about.php">About us</a></li>

<li class="contact"><a href="contact.php">Contact</a></li>
</ul>
<div class="clear"></div>

<div id="featured">
<div id="image">
    <div align="left">
        <img src="images/buy_sell.jpg" alt="buy_sell"/> </div>

</div>
<div id="featured-content"> </div>
    <h1>Buy and Sell things</h1>
    <br>
    <form method="get" action="find-a-radius.php" >
    <input name="searchfor" type="text" value="Search for" size="20" maxlength="50" />
<div id="suggest">Postcode or Suburb: <br />
<input name="suburb" type="text" class="" id="suburb" onblur="fill();" onkeyup="suggest(this.value);" size="25" maxlength="50" />
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script>
function suggest(inputString){
  if(inputString.length == 0) {
   $('#suggestions').fadeOut();
  } else {
  $('#suburb').addClass('load');
  $('#latitude').addClass('load');
   $.post("autosuggest.php", {queryString: ""+inputString+""}, function(data){
    if(data.length >0) {
     $('#suggestions').fadeIn();
     $('#suggestionsList').html(data);
     $('#suburb').removeClass('load');
     $('#latitude').removeClass('load');
    }
   });
  }
}

function fill(thisValue) {
  $('#suburb').val(thisValue);
  $('#latitude').val(thisValue);
  setTimeout("$('#suggestions').fadeOut();", 600);
}

</script>
<style>
#result {
height:20px;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
color:#222;
padding:5px;
margin-bottom:10px;
background-color:#F0FFFF;
}
#suburb{
padding:3px;
border:1px #CCC solid;
font-size:12px;
}
#latitude{
padding:3px;
border:1px #CCC solid;
font-size:12px;
}
.suggestionsBox {
position: absolute;
left: 280px;
top:40px;
margin: 26px 0px 0px 0px;
width: 100px;
padding:0px;
background-color: #F0FFFF

border-top: 3px solid #000;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList ul li {
list-style:none;
margin: 0px;
padding: 6px;
border-bottom:1px dotted #666;
cursor: pointer;
}
.suggestionList ul li:hover {
background-color: #FC3;
color:#000;
}
ul {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFF;
padding:0;
margin:0;
}

.load{
background-image:url(loader.gif);
background-position:right;
background-repeat:no-repeat;
}

#suggest {
position:relative;
}

</style></head>

<input type="submit" value="Search">




        <div class="suggestionsBox" id="suggestions" style="display: none;"> <img src="arrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
          <div class="suggestionList" id="suggestionsList"> </div>
        </div>
      </div>

    <br><div class="searchCategory " >
      <select id="select4" name="category"    class="searchFilter">
        <option selected="selected" value="other">Category (select)</option>
        <option value="automotive" >Automotive </option>
        <option value="baby_children" >Baby & Children </option>
        <option value="boating_accesories" >Boating & Accesories </option>
        <option value="caravans_camping" >Caravans & Camping</option>
        <option value="car_sharing_commuting" >Car Sharing - Commuting</option>
        <option value="clothes_accesories" >Clothes & Accesories</option>
        <option value="community" >Community</option>
        <option value="computers_pcs_laptops" >Computers, Pc's & Laptops</option>
        <option value="diy" >DIY</option>
        <option value="farming_livestock_agriculture" >Farming & Livestock
        </option>
        <option value="gaming_videos" >Gaming & Videos</option>
        <option value="garage_sale" >Garage Sale</option>
        <option value="gardening_outdoors" >Gardening & Outdoors</option>
        <option value="health_beauty" >Health & Beauty</option>
        <option value="hobbies_pastimes" >Hobbies & Pastimes</option>
        <option value="holidays" >Holidays</option>
        <option value="home" >Home and Garden</option>
        <option value="jobs_careers" >Jobs & Careers</option>
        <option value="kids_stuff" >Kids Stuff</option>
        <option value="music_instruments" >Music & Instruments</option>
        <option value="office_business" >Office & Business</option>
        <option value="pets" >Pets</option>
        <option value="phones_accesories" >Phones & Accesories</option>
        <option value="property" >Property</option>
        <option value="sports_recreation" >Sports & Recreation</option>
        <option value="weddings" >Weddings</option>
        <option value="other" >Other</option>
        <option value="adult" >Adult</option>
      </select>
      <select name="radius" id="select5" >
        <option selected="selected" value="1" style="width: 30px">Distance
        (select) </option>
        <option value="1">Within 5 kilometers</option>
        <option value="10">Within 10 kilometers</option>
        <option value="20">Within 20 kilometers</option>
        <option value="30">Within 30 kilometers</option>
        <option value="40">Within 40 kilometers</option>
        <option value="60">Within 60 kilometers</option>
        <option value="100">Within 100 kilometers</option>
        <option value="1500">State Wide</option>
        <option value="5000">Country Wide</option>
      </select>

</form>
</div>
</div>
</body>
</html>

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

AUTOSUGGEST.PHP

<?php

require("phpsqlsearch_dbinfo.php");

   $db = new mysqli($databasehost,$databaseusername,$databasepassword, $databasename);

if(!$db) {

  echo 'Could not connect to the database.';
} else {

  if(isset($_POST['queryString'])) {
   $queryString = $db->real_escape_string($_POST['queryString']);

   if(strlen($queryString) >0) {

    $query = $db->query("SELECT suburb,postcode,state,longtitude,latitude FROM Postcode WHERE suburb LIKE '$queryString%' or postcode LIKE '$queryString%' LIMIT 10");
    if($query) {
    echo '<ul>';
     while ($result = $query ->fetch_object()) {
             echo '<li onClick="fill(\''.addslashes($result->suburb).'\');">'.$result->suburb.' '.$result->postcode.' '.$result->state.'</li>';

            }
    echo '</ul>';

    } else {
     echo 'OOPS we had a problem :(';
    }
   } else {
    // do nothing
   }
  } else {
   echo 'There should be no direct access to this script!';
  }
}
?>

wright67uk · April 12, 2013

It looks like you close your </head> twice in the first page, and you have html in your head aswell.

May be worth checking over your page structure.

alanl1 · April 12, 2013

thanks for that I have ammended my page structure to this, but I still not sure how to pass the longtitude and latitude through to the next page without the user seeing them.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script>
function suggest(inputString){
  if(inputString.length == 0) {
   $('#suggestions').fadeOut();
  } else {
  $('#suburb').addClass('load');
  $('#latitude').addClass('load');
   $.post("autosuggest.php", {queryString: ""+inputString+""}, function(data){
    if(data.length >0) {
     $('#suggestions').fadeIn();
     $('#suggestionsList').html(data);
     $('#suburb').removeClass('load');
     $('#latitude').removeClass('load');
    }
   });
  }
}

function fill(thisValue) {
  $('#suburb').val(thisValue);
  $('#latitude').val(thisValue);
  setTimeout("$('#suggestions').fadeOut();", 600);
}

</script>
<style>
#result {
height:20px;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
color:#222;
padding:5px;
margin-bottom:10px;
background-color:#F0FFFF;
}
#suburb{
padding:3px;
border:1px #CCC solid;
font-size:12px;
}
#latitude{
padding:3px;
border:1px #CCC solid;
font-size:12px;
}
.suggestionsBox {
position: absolute;
left: 280px;
top:40px;
margin: 26px 0px 0px 0px;
width: 100px;
padding:0px;
background-color: #F0FFFF

border-top: 3px solid #000;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList ul li {
list-style:none;
margin: 0px;
padding: 6px;
border-bottom:1px dotted #666;
cursor: pointer;
}
.suggestionList ul li:hover {
background-color: #FC3;
color:#000;
}
ul {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFF;
padding:0;
margin:0;
}

.load{
background-image:url(loader.gif);
background-position:right;
background-repeat:no-repeat;
}

#suggest {
position:relative;
}

</style></head>
<body>

<div id="page-wrap">
<ul id="main-nav">

<li class="home"><a href="index.php">Post Ad</a></li>

<li class="current"><a href="search.php">Search</a></li>

<li class="signin"><a href="signin.php">Sign in</a></li>

<li class="register"><a href="register.php">Register</a></li>

<li class="about"><a href="about.php">About us</a></li>

<li class="contact"><a href="contact.php">Contact</a></li>
</ul>
<div class="clear"></div>

<div id="featured">
<div id="image">
    <div align="left">
        <img src="images/buy_sell.jpg" alt="buy_sell"/> </div>

</div>
<div id="featured-content"> </div>
    <h1>Buy and Sell things</h1>
    <br>
    <form method="get" action="find-a-radius.php" >
    <input name="searchfor" type="text" value="Search for" size="20" maxlength="50" />
<div id="suggest">Postcode or Suburb: <br />
<input name="suburb" type="text" class="" id="suburb" onblur="fill();" onkeyup="suggest(this.value);" size="25" maxlength="50" />

<input type="submit" value="Search">




        <div class="suggestionsBox" id="suggestions" style="display: none;"> <img src="arrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
          <div class="suggestionList" id="suggestionsList"> </div>
        </div>
      </div>

    <br><div class="searchCategory " >
      <select id="select4" name="category"    class="searchFilter">
        <option selected="selected" value="other">Category (select)</option>
        <option value="automotive" >Automotive </option>
        <option value="baby_children" >Baby & Children </option>
        <option value="boating_accesories" >Boating & Accesories </option>
        <option value="caravans_camping" >Caravans & Camping</option>
        <option value="car_sharing_commuting" >Car Sharing - Commuting</option>
        <option value="clothes_accesories" >Clothes & Accesories</option>
        <option value="community" >Community</option>
        <option value="computers_pcs_laptops" >Computers, Pc's & Laptops</option>
        <option value="diy" >DIY</option>
        <option value="farming_livestock_agriculture" >Farming & Livestock
        </option>
        <option value="gaming_videos" >Gaming & Videos</option>
        <option value="garage_sale" >Garage Sale</option>
        <option value="gardening_outdoors" >Gardening & Outdoors</option>
        <option value="health_beauty" >Health & Beauty</option>
        <option value="hobbies_pastimes" >Hobbies & Pastimes</option>
        <option value="holidays" >Holidays</option>
        <option value="home" >Home and Garden</option>
        <option value="jobs_careers" >Jobs & Careers</option>
        <option value="kids_stuff" >Kids Stuff</option>
        <option value="music_instruments" >Music & Instruments</option>
        <option value="office_business" >Office & Business</option>
        <option value="pets" >Pets</option>
        <option value="phones_accesories" >Phones & Accesories</option>
        <option value="property" >Property</option>
        <option value="sports_recreation" >Sports & Recreation</option>
        <option value="weddings" >Weddings</option>
        <option value="other" >Other</option>
        <option value="adult" >Adult</option>
      </select>
      <select name="radius" id="select5" >
        <option selected="selected" value="1" style="width: 30px">Distance
        (select) </option>
        <option value="1">Within 5 kilometers</option>
        <option value="10">Within 10 kilometers</option>
        <option value="20">Within 20 kilometers</option>
        <option value="30">Within 30 kilometers</option>
        <option value="40">Within 40 kilometers</option>
        <option value="60">Within 60 kilometers</option>
        <option value="100">Within 100 kilometers</option>
        <option value="1500">State Wide</option>
        <option value="5000">Country Wide</option>
      </select>

</form>
</div>
</div>
</body>
</html>

wright67uk · April 13, 2013

You should use form method post, or you will display these parameters within the URL and the users will be able to see the longitude and latitude anyway.

If you want to use the form to pass information that you do not want to display then you can use input type = hidden.

alanl1 · April 13, 2013

ok i can use method post and a text box of input = hidden but my question is actually how do i pass the longtitude which is seleected from the database during the onclick event

as you can see in the while loop in the autosuggesat.php above it is dynamically building the drop down list with a selected value (suburb) from the database

while ($result = $query ->fetch_object()) {
echo '<li onClick="fill(\''.addslashes($result->suburb).'\');">'.$result->suburb.' '.$result->postcode.' '.$result->state.'</li>';

}
echo '</ul>';

how do i actually populate the hidden box with the latitude value what the user wouldnt see, could this be done after the while loop if so how

thanks again

mac_gyver · April 13, 2013

your Postcode table should have an id (auto increment) column. you would just submit the id value and query the database table at any point where you need all the other information related to that submitted id.

also your current use of the suburb as the submitted value is not unique. an auto increment id would be unique.

Sign In

Passing Variables from dynamic boxes

Recommended Posts

alanl1

Link to comment

Share on other sites

wright67uk

Link to comment

Share on other sites

alanl1

Link to comment

Share on other sites

wright67uk

Link to comment

Share on other sites

alanl1

Link to comment

Share on other sites

mac_gyver

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information