Jump to content

Passing Variables from dynamic boxes

alanl1

By alanl1
in PHP Coding Help

 Share
Go to solution Solved by mac_gyver,

Recommended Posts

alanl1 Member

alanl1

Posted
Posted

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">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</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" /> 
     <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!';
  }
 }
?>

 

 

 

Link to comment
Share on other sites
alanl1 Member

alanl1

Posted
  • Author
Posted

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>

Link to comment
Share on other sites
wright67uk Advanced Member

wright67uk

Posted
Posted

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.

Link to comment
Share on other sites
alanl1 Member

alanl1

Posted
  • Author
Posted

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

Link to comment
Share on other sites
  • Solution
mac_gyver Prolific Member

mac_gyver

Posted
  • Solution
Posted

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.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.