simple drop down search list

10 posts by 2 authors in: Forums > CMS Builder
Last Post: August 14, 2017   (RSS)

By willydoit - July 19, 2017

Hi all,

I have a table called "advertisers" and within that a field called "title" which contains each advertisers business name.

I want to create a search facility based on the "title" field but am unsure how to populate the search form. I am using code which was designed to show options from a pre-created drop down list within the table and thought I would just need to change the field name from that of the dropdown options list to that containing the business name ("title" ) but that doesnt work.

The drop down list will ultimately be used to show an advertisers location on a google map ( I already have this working when selecting from a services-provided field to show businesses providing certain services but this is drawing data from a precreated options list within the table if that makes sense.

The code I am trying to get to work is shown below and produces a source code error of  " Unknown optionsType"  and I am not sure whether I need to simply use different php syntax due to the field not being a list field or whether I need to create a "list field" containing the business names within the cmsb table using the related records function but then if I do I am unsure how to accomplish this.

Ideally I would like to have this search on the same page as the existing services search as the ultimate goal is to allow the user to search for businesses providing certain services ie Hotel and from that initial search to have it populate the google map with pins and at the same time populate the secondary search box with all the business names that meet that critera so that they can select any of the short listed business names to have that business location displayed on the redrawn map as a solitary pin.

Any help would be appreciated.

<form method="post" action="?">
        
      
      
       <select name="title">
      <h5>  <?php foreach (getListOptions('advertisers', 'title') as $value => $label): ?> 

<option value = "<?php echo $value;?>" <?php selectedIf($value, @$_REQUEST['title']);?>>

<?php echo $label; ?></option> 

<?php endforeach ?> </p></h5>

      
         
         </select>
<br/>
        
        
        <div align="left"><h5>
          <input type="submit" name="search" value="  Search Listings  "/></h5>
        </div>
        
        
        
</form>

By Dave - July 28, 2017

Hi willydoit, 

Sorry for the delay in responding.  How about this?

  // show pulldown of option for table/field
  $tablename            = "advertisers";
  $fieldname            = "title";
  $showEmptyOptionFirst = true; 
  $selectedValue        = isset($_REQUEST[$fieldname]) ? $_REQUEST[$fieldname] : ''; // default value
  $valuesToLabels       = getListOptions($tablename, $fieldname);
  $optionsHTML          = getSelectOptions($selectedValue, array_keys($valuesToLabels), array_values($valuesToLabels), $showEmptyOptionFirst);
  print "<select name='$fieldname'>$optionsHTML</select>\n";

Let me know if that works for you!

Dave Edis - Senior Developer
interactivetools.com

By willydoit - August 1, 2017

Hi Dave,

sorry for the late response, been up to my eyes in it.

It may be better to explain what I want to do.

I have a page with a google map which displays the locations of all records in our advertisers table, on the page we also have a search box which allows the user to select particular types of business such as hotel, bakery etc ( this field is a multi selection list field within the table) Once a business type is selected the page reloads showing only the locations for businesses of the selected type.

Thats what we have at the moment and all that works fine.

What I want to do is have a second search form which contains the business names of the curently sorted content ie if the user has elected to show the locations of bakers in the town and we have information on two, the business name list will have just two entries. The idea being that by selecting one of the names in the business list the page will again reload showing only the pin depicting the location of that business.

I appreciate that in this example the exercise seems a bit pointless but if the user was looking for accommodation locations the list could be quite long so the ability to select one entry from a longer list would have obvious benefits.

I assumed the solution would consist of something like for each record in the array that has been created on the current page load, echo each business name in a drop down search box and upon selection reload the page with just that one record loaded.

That's how simplistic it is in my mind but the stumbling block I have is that the first search box relating to "BusinessType" is created using the contents of a predifined multi selection list field so all the options in the list are contained in a single field, wheras the business name list would have to be created by pulling the content from the business_name field from multiple records which I dont know how to do or even if it is possible.

Hopefully this explains my requirements a little better.

Thanks in advance.

By Dave - August 8, 2017

Hi willydoit, 

What you want to do is break it down into steps.  It's getting into a bit of more complicated programming, but basically, you work with the data you have.  So working in reverse: 

  • You want a list of business_name's from TableA 
  • And you only want business name's that match... a record number?  

If you had a list of record numbers you could load only records that matched those record numbers.  Something like this: 

  // load records match certain record numbers
  $recordNums      = [118, 167, 145];
  $recordNumsAsCSV = mysql_escapeCSV($recordNums);
  $records         = mysql_select("accounts", " num IN ($recordNumsAsCSV) ");
  $numToUsername   = array_column($records, 'username', 'num');
  showme($numToUsername);
  exit;

Hope that helps!

Dave Edis - Senior Developer
interactivetools.com

By willydoit - August 9, 2017

Hi Dave,

  I dont think thats what I am after.

here is a link to my page as I have it so far http://bridlington.www68-66-241-20.a2hosted.com/bridlington-advertiser-map.php

As you will see it displays markers for businesses on a google map. You will see that there is a drop down box to refine that search to a business type using the "services_provided" field values, the coding used for this search filter, which may or may not be relevant is

<form method="post" action="?">
        
      
      
       <select name="services_provided">
      <h5>  <?php foreach (getListOptions('advertisers', 'services_provided') as $value => $label): ?> 

<option value = "<?php echo $value;?>" <?php selectedIf($value, @$_REQUEST['services_provided']);?>>

<?php echo $label; ?></option> 

<?php endforeach ?> </p></h5>

      
         
         </select>
<br/>
        
        
        <div align="left"><h5>
          <input type="submit" name="search" value="  Search Listings  "/></h5>
        </div>
        
        
        
</form>

Once a "services_provided" value is selected from the list the page reloads showing only pin locations for businesses offering that service. 

I assume this is doing this via causing the page to reload with a ?services_provided = value of selected item parameter which causes the page to go to the table "advertisers" and create an array consisting of all the records where the field "services_provided" has content which matches the submitted search value.

All of this works fine.

What I want to add is another search filter box next to the services search box which contains a drop down list of the business names (<?php echo htmlencode($record['title']) ?>)  of the businesses contained in the current array. I then want to be able to apply a search against any selected business name ("title") so that the page is reloaded containing the location pin of just that one business.

So where the page was initially loaded using the criteria  where "services_provided" = "search criteria" when the second search box is used it would  reload the page using where "title" = the value selected from the list.

In my head it seems quite straightforward but thats probably because I dont program php or mysql :-(

Hopefully the link and what I hope is a better description of my needs will help you to understand my requirements. The main thing is to know that I am not a programmer so instructions need to be basic to say the least.

Thanks again.

By Dave - August 9, 2017

Hi willydoit, 

Can you attach bridlington-advertiser-map.php to this post so we can see the code?

Thanks!

Dave Edis - Senior Developer
interactivetools.com

By willydoit - August 9, 2017

Hi Dave,

not in office at moment and working on iPad which makes things awkward but I have managed to get at and copy code below if it helps.. Not sure if this will work properly but here goes. Looks like you have to scroll code to right for some reason.

<?php 
  // load viewer library
$libraryPath = 'cmsb/lib/viewer_functions.php';
   $dirsToCheck = array('/home/sites/lpl-testsite.co.uk/public_html/','','../','../../','../../../');
  foreach ($dirsToCheck as $dir) { if (@include_once("$dir$libraryPath")) { break; }}
  if (!function_exists('getRecords')) { die("Couldn't load viewer library, check filepath in sourcecode."); }

  // error checking
  if (!@$GLOBALS['GEOCODER_PLUGIN']) { die("You must activate the Geocoder plugin before you can access this page."); }
if (!@$GLOBALS['GEOCODER_GOOGLE_API_KEY']) { die("You must have a Google Maps API key to display a map, see the readme file for instructions on getting one."); }
  // get records
   list($advertisersRecords, $advertisersMetaData) = getRecords(array(
   'tableName'   => 'advertisers',
    'loadUploads' => false,
    'allowSearch' => true,


  ));

?>

<!DOCTYPE html>
<html lang="en"><!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" -->

<head> 

<!-- ====================================
:: META 
===================================== -->

    <!-- InstanceBeginEditable name="meta" -->

    <title>Bridlington Business Map</title>
<meta content="" name="Keywords" />
<meta content="" name="Description" />
<meta name="author" content="Bridlington .net">
<link rel="icon" type="image/png" href="/Site/images/favicon.png" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <!-- InstanceEndEditable -->
    
<!-- ====================================
:: MOBILE 
===================================== -->

    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800' rel='stylesheet' type='text/css'>

<!-- ==================================== 
:: GOOGLE WEB FONT LOADER 
===================================== -->

    <!-- InstanceBeginEditable name="font-loader1" -->
    <script type="text/javascript">
    WebFontConfig = {
        google: {
            families: ['Open+Sans:400,300,700,800:latin', 'Open+Sans+Condensed:300,300italic,700:latin',
                'Roboto+Slab:400,700,300,100:latin'
            ]
        }
    };
    (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
    })();
    </script>
    <!-- InstanceEndEditable -->

<!-- ==================================== 
:: GOOGLE ASYNC CSS LOADING  
===================================== -->

    <!-- InstanceBeginEditable name="grid" -->
<link href="/Site/styles/grid.css" rel="stylesheet" type="text/css">
<!-- InstanceEndEditable -->
    
    <!-- InstanceBeginEditable name="theme-css" -->
    <link href="/Site/styles/theme.css" rel="stylesheet" type="text/css">
    <link href="/Site/styles/styles.css" rel="stylesheet" type="text/css">
    <link href="/Site/styles/shared.css" rel="stylesheet" type="text/css">
    <link href="/Site/styles/components.css" rel="stylesheet" type="text/css">
<!-- InstanceEndEditable -->

    <!-- InstanceBeginEditable name="vendorsss" -->
    <link href="/Site/styles/vendor/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="/Site/styles/vendor/animate.min.css" rel="stylesheet" type="text/css">
    <link href="/Site/javascript/vendor/fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css">
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- InstanceEndEditable -->

    <!-- InstanceBeginEditable name="helper" -->
    <link href="/Site/styles/helper.css" rel="stylesheet" type="text/css">
<!-- InstanceEndEditable -->

    <!-- InstanceBeginEditable name="current-page-css" -->
    <link href="#" rel="stylesheet" type="text/css"> 
    <!-- InstanceEndEditable -->
    
    <!-- InstanceBeginEditable name="google-pagespeed2" -->
    <script>
    var cb = function() {
        var async_stylesheets = new Array(
            "",
            "" // ALWAYS LOAD THIS STYLE LAST
        );
        for (i in async_stylesheets) {
            var l = document.createElement('link');
            l.rel = 'stylesheet';
            l.href = async_stylesheets[i];
            var h = document.getElementsByTagName('head')[0];
            h.parentNode.insertBefore(l, h);
        }
    };
    var raf = requestAnimationFrame || mozRequestAnimationFrame ||
        webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(cb);
    else window.addEventListener('load', cb);
    </script>
    
    
    
    <!-- InstanceEndEditable -->

<!-- ==================================== 
:: PAGE SPECIFIC CSS 
===================================== -->


<!-- ==================================== 
:: IE COMPATIBILITY 
===================================== -->

    <!--[if IE]> 
        <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> 
        <![endif]-->
    <!--[if lt IE 9]> 
        <script src="/Site/javascript/vendor/html5shiv.js"></script> 
        <script src="/Site/javascript/vendor/respond.min.js"></script> 
        <![endif]-->

</head>

<body class="designview template">

<!-- ==================================== 
:: PAGE / VIDEO BACKGROUND
===================================== -->

    <!-- InstanceBeginEditable name="body-bg2" -->
    <!-- InstanceEndEditable -->

<!-- ==================================== 
:: MAIN WRAPPER START
===================================== -->

<main>

<!-- ==================================== 
:: SKROLL WRAPPER 
===================================== -->

<div id="skrollr-body">
    <div class="skroll-container">

<!-- ====================================
:: HEADER
===================================== -->

<!-- Facebook SDK -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.9";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Facebook SDK -->
<!-- InstanceBeginEditable name="header-main2" -->

<header class="header">
<body onload="initialize()">

<!-- social icons -->
<div class="social-icons"><!-- #BeginLibraryItem "/Library/shared/social-icons.lbi" -->


<div class="slidedivide" >Switch to code view to edit icon names and links</div>

<div class="social-icon-fontawesome">
<p align="center">
<img src="/Site/site/sewerby.jpg" class="img-rounded bannerimg-responsive"> </p></div>

    <div class="slidedivide">
        <style>
.slidedivide {
    width: 100%;
    height: 20px;
    background: #222222;
    color: #ffffff;
    font-family: sans-serif;
    text-align: center;
    font-size: 40px;
    text-transform: uppercase;
    margin: 100px 0px 10px 0px;
}

        </style>
    </div>



<!-- #EndLibraryItem --></div>

            <!-- logo container -->
            <div class="logo-wrapper">            
            <div class="logo">

                <!-- graphic-logo -->
                <div class="graphic-logo">
                    <!-- #BeginLibraryItem "/Library/shared/graphic-logo.lbi" -->

<!-- place your graphic here -->


<!-- place your graphic here -->





<!-- #EndLibraryItem --></div>
                <!-- website-name -->
                <div class="website-name"><!-- #BeginLibraryItem "/Library/shared/website-name.lbi" -->

<div class="slidedivide" >Switch to code view to edit website name</div>


    <!-- WEBSITE NAME TEXT GOES HERE -->
        <a href="index.htm">
            <span class="website-name1">Bridlington</span><span class="website-name2"> .net</span>
        </a>
    <!-- WEBSITE NAME TEXT GOES HERE -->

    
    
    
<div class="slidedivide">
<style>
.slidedivide {
    width: 100%;
    height: 20px;
    background: #222222;
    color: #ffffff;
    font-family: sans-serif;
    text-align: center;
    font-size: 40px;
    text-transform: uppercase;
    margin: 100px 0px 10px 0px;
}
</style>
</div>





<!-- #EndLibraryItem --></div>
                <!-- tagline -->
                <div class="tagline"><!-- #BeginLibraryItem "/Library/shared/tagline.lbi" -->


    <p>


    <!-- TAGLINE TEXT GOES HERE -->
        Providing<span> Bridlington Information</span> Since 1998
    <!-- TAGLINE TEXT GOES HERE -->
    

    </p>
    





<!-- #EndLibraryItem --></div>
            </div>            
            </div>

            <!-- logo container -->
            
<!-- phone / contact email -->
<div class="phone"><!-- #BeginLibraryItem "/Library/shared/phone.lbi" -->


<div class="phone-email">
<i class="fa fa-envelope-o"></i><strong> E-Mail:  <a href="mailto:info@Bridlington.net">Info@Bridlington.net</a></strong>
</div>

<div class="phone-number"><strong>
<i class="fa fa-phone"></i> Tourist Information: <a href="tel:01482 391634">01482 391634</a></strong></div>

<div class="phone-number"><strong>
 <i class="fa fa-phone"></i> Advertising Enquiries: <a href="tel:01377 236282">01377 236282</a></strong
></div>

<div class="phone-number">
<div class="fb-like" data-href="http://www.Bridlington.net" data-width="200" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>

</div>

<div class="phone-number">
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="200" data-href="http://www.Bridlington.net"></div>
</div>

<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
  window.___gcfg = {lang: 'en-GB'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script> 
</div>

<!-- #EndLibraryItem --></div>
    

</header>


<div class="menu-wrapper">
    <div class="container">
            <div class="row">
    
     <!-- menu top -->
     <div class="menu-top"><!-- #BeginLibraryItem "/Library/shared/menu-top.lbi" -->

<nav class="navbar navbar-default" role="navigation">

    <div class="navbar-header">
        <button class="navbar-toggle" data-target=".navbar-ex1-collapse" data-toggle="collapse" type="button">
            <span class="sr-only">Toggle navigation</span>
            <span class="menu-toggle">Main Menu</span>
            <span class="fa fa-th-list"></span>
        </button>
    </div>


    <div class="collapse navbar-collapse navbar-ex1-collapse">

       
<ul id="menu" class="menu nav navbar-nav">
<li><a href="/index.php">Home</a></li>
<li><a href="#"> Holidays</a>
<ul>
<li><a href="#"><i class="fa fa-car"></i> Getting Here..</a>
<ul>
<li><a href="/bridlington-information-list.php?Airport Routes" title="Directions to Bridlington from British Airports"> By Air</a></li>
                    <li><a href="/bridlington-information-list.php?Rail Routes" title="Directions to Bridlington by Rail"> By Rail</a></li>
    <li><a href="/bridlington-information-list.php?Coach Routes" title="Directions to Bridlington by Coach"> By Coach</a></li>
</ul>
</li>
            
            <li><a href="#"><i class="fa fa-building"></i> Accommodation</a>
<ul>
<li><a href="http://www.bridlington.net/bridlington-group-accommodation.html" title="Hotel Accommodation in Bridlington"><i class="fa fa-group"></i> Group Bookings</a></li>
<li><a href="/bridlington-business-directory.php?services_provided=Hotel" title="Hotel Accommodation in Bridlington"><i class="fa fa-building"></i> Hotels</a></li>
                    <li><a href="/bridlington-business-directory.php?services_provided=Guest House" title="Guest Houses in Bridlington"><i class="fa fa-home"></i> Guest Houses</a></li>
                     <li><a href="/bridlington-business-directory.php?services_provided=Bed & Breakfast" title="Bed & Breakfast Accommodation in Bridlington"><i class="fa fa-home"></i> Bed & Breakfast</a></li>
    <li><a href="/bridlington-business-directory.php?services_provided=Holiday Flats" title="Self Catering Accommodation in Bridlington"><i class="fa fa-building"></i> Flats &amp; Apartments</a></li>
                    <li><a href="/bridlington-business-directory.php?services_provided=Chalet" title="Chalet Accommodation in Bridlington"><i class="fa fa-home"></i> Chalets</a></li>
    <li><a href="/bridlington-business-directory.php?services_provided=Holiday Property" title="Holiday Property Accommodation in Bridlington"><i class="fa fa-home"></i> Holiday Cottages</a></li>
    <li><a href="/bridlington-business-directory.php?services_provided[]=Holiday Park&services_provided[]=Caravan Park&services_provided[]=Camp Site&services_provided[]=Holiday Park" title="Bridlington Camp and Caravan Parks"><i class="fa fa-car"></i> Camp &amp; Caravan Parks</a></li>
</ul>
</li> 
            
          <li><a href="#"><i class="fa fa-cutlery"></i> Food &amp; Drink</a>
<ul>
<li><a href="/bridlington-business-directory.php?services_provided=Cafe" title="Bridlington Cafe's"><i class="fa fa-coffee"></i> Cafe's</a></li>
    <li><a href="/bridlington-business-directory.php?services_provided=Restaurant" title="Bridlington Restaurants"><i class="fa fa-cutlery"></i> Restaurants</a></li>
                    <li><a href="/bridlington-business-directory.php?services_provided=Takeaway"><i class="fa fa-cutlery"></i> Take Aways</a></li>
    <li><a href="/bridlington-business-directory.php?services_provided=Public House" title="Bridlington Pubs"><i class="fa fa-cutlery"></i> Public Houses</a></li>
</ul>
</li> 
             
<li><a href="#"><i class="fa fa-info"></i> Helpful Information</a>
                <ul> 
<li><a href="/bridlington-information-list.php?Parking" title="Car Parks in Bridlington"> Car Parking</a></li>
    <li><a href="/bridlington-information-list.php?Parking" title="Bridlington Park and Ride"> Park &amp; Ride</a></li>
<li><a href="/bridlington-information-list.php?Conveniences" title="Bridlington Publc Conveniences"> Public Conveniences</a></li>
                    <li><a href="/bridlington-information-list.php?Beaches" title="Being safe on Bridlington Beaches"> Beach Safety</a></li>
                    <li><a href="/bridlington-information-list.php?Beaches" title="Taking Dogs on Bridlington Beaches"> Dogs on the Beach</a></li>
</ul>
</li>
            
<li><a href="/bridlington-information-list.php?category=Place of Interest " title="Interesting places around the Bridlington Area"><i class="fa fa-camera"></i> Places of Interest</a></li>
<li><a href="/bridlington-walks-list.php" title="Bridlington and Local Area Walks"><i class="fa fa-camera"></i> Local Walks</a></li>
<li><a href="/bridlington-cycle-list.php" title="Bridlington and Local Area Cycle Routes"><i class="fa fa-bicycle"></i> Bridlington Cycle Routes</a></li>
<li><a href="Library/shared//bridlington-business-directory.php?services_provided=Leisure Attraction" title="Bridlington Attractions"> <i class="fa fa-smile-o"></i> Local Attractions</a></li>
<li><a href="/bridlington-information.php?Bridlington-Events-2" title="Events in Bridlington"> <i class="fa fa-calendar"></i> What's On Diary</a></li>
<li><a href="/bridlington-news.php?category=Entertainment" title="Entertainment News"> <i class="fa fa-calendar"></i> Entertainment News</a></li>
</ul>
</li>
<li><a href="#">Community</a>
<ul>
<li><a href="/bridlington-news.php" title="Bridlington News"><i class="fa fa-bullhorn"></i> News</a></li>
<li><a href="/bridlington-news.php?category=Entertainment" title="Entertainment News"> <i class="fa fa-calendar"></i> Entertainment News</a></li>
<li><a href="http://www.bridlington.net/bridlington-library.htm" title="Bridlington Local Studies Library"><i class="fa fa-book"></i> Bridlington Library</a></li>
<li><a href="http://www.bridlington.net/bridlington-schools" title="Bridlington Schools Contact Details"><i class="fa fa-building"></i> Bridlington Schools </a></li>
</ul>
</li>
                
<li><a href="#">History</a>
<ul>
<li><a href="/bridlington-information-list.php?category=Place of Interest" title="Stories from Bridlington History"><i class="fa fa-history"></i>
 Bridlington History</a></li>
 
  <li><a href="/bridlington-information-list.php?category=Boats of Bridlington" title="Boats of Bridlington"><i class="fa fa-anchor"></i>
 Boats of Bridlington</a></li>
<li><a href="http://www.bridlington.net/bridlington-priory" title="Bridlington Priory Information"><i class="fa fa-history"></i>
 Bridlington Priory</a></li>
</ul>
</li>
                
<li><a href="#">Business</a>
<ul style="width: 250px;">
<li><a href="/bridlington-advertiser-map.php" title="Find a Business on out Bridlington Business Map"><i class="fa fa-book"></i> Business Map </a></li>
<li><a href="/bridlington-business-directory.php" title="Find a Bridlington Business"><i class="fa fa-book"></i> Business Directory </a></li>
<li><a href="http://www.bridlington.net/bridlington-business-promotion" title="Advertise Your Business on Bridlington.net"><i class="fa fa-info"></i>
 Why Advertise Here</a></li>
<li><a href="/cmsb/admin.php" title="Login to Your Bridlington.net Advertisement"> Advertising Login</a></li>
<li><a href="/bridlington-advertisement-purchase.php" title="Purchase your Advertising here"> Advertising Signup</a></li>
<li><a href="http://www.bridlington.net/free-advertising" title="Free Listing Request"> Request Free Business Listing</a></li>
</ul>
</li>
        
<li><a href="bridlington-photo-gallery.php">Galleries</a></li>               
 </li>
 </ul>

        <!-- do not edit past this point, unlessen you enjoy fixin' stuff -->


        <script type="text/javascript">
//var menu = new Spry.Widget.MenuBar("menu");

        </script>


    </div>
</nav>




<!-- #EndLibraryItem --></div>
    
    
            </div>
        </div>
</div>

<!-- InstanceEndEditable --> 

<!-- ====================================
:: SHOWCASE
===================================== -->
<!-- InstanceBeginEditable name="showcase" -->
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="breadcrumbs" -->

<!-- breadcrumb bar -->
<section class="breadcrumb">
    <div class="wrapper">
        <div class="container">
            <div class="row">

                <div class="col-sm-6">

                <!-- search -->
                <div class="google-search"><!-- #BeginLibraryItem "/Library/shared/google-search.lbi" -->
<div class="google-search-wrapper">

<!-- Put the following javascript before the closing </head> tag. -->

<script>
  (function() {
    var cx = '017397364450664842285:7csqs1nvtog';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

<!-- Put the following javascript before the closing </head> tag. -->

<!-- w3 will not validate the <gcse:search></gcse:search> tag -->

<!-- you can use the following in place, if it's a concern 

<div class="gcse-searchbox" data-resultsUrl="http://www.example.com" data-newWindow="true" data-queryParameterName="search" ></div>

-->
</div>



<!-- #EndLibraryItem --></div>

                    
                </div>

                <div class="col-sm-6">

                <!-- breadcrumb -->
                <div class="breadcrumb-path">
                    <a href="/index.php">Home</a> //
                    <a href="#">Advertiser Map</a>
                </div>

                </div>
</div>
            </div>
        </div>
</section>
<!-- breadcrumb bar -->

<!-- InstanceEndEditable -->

<!-- ====================================
:: MAIN
===================================== -->

<!-- InstanceBeginEditable name="main" -->

                    
    <!-- ====================================
:: SECTION 1
===================================== -->

    <section class="section1">
        <div class="wrapper">
          <div class="container">
            <div class="row">
            
<div class="sec-heading wowed">
<h1 data-wow-delay=".5s" class="wow fadeInDown">Bridlington <strong>.net</strong></h1>
                    <h1 data-wow-delay=".7s" class="wow fadeInUp">Bridlington Business Directory</h1>
<h5 data-wow-delay=".7s" class="wow fadeInUp">            
      <h3>Select your required business type from the menu below.</h3>              
                    <form method="post" action="?">
        
      
      
       <select name="services_provided">
      <h5>  <?php foreach (getListOptions('advertisers', 'services_provided') as $value => $label): ?> 

<option value = "<?php echo $value;?>" <?php selectedIf($value, @$_REQUEST['services_provided']);?>>

<?php echo $label; ?></option> 

<?php endforeach ?> </p></h5>

      
         
         </select>
<br/>
        
        
        <div align="left"><h5>
          <input type="submit" name="search" value="  Search Listings  "/></h5>
        </div>
        
        
        
</form>

<div data-wow-delay="1s" class="wow zoomIn icon-div icon-div-color">
<span><i class="fa fa-leaf fa-2x"></i></span></div>
</div>
              
            <div class="col-sm-12">
                  
                </div>
              
          </div>
            
<div class="row">
            <div class="col-md-9 col-sm-8">


             
            <!-- STEP3: Map with multiple addresses: Put this where you want your map displayed, rename $advertisersRecords if needed -->
  <!-- STEP3: Map with multiple addresses: Put this where you want your map displayed, rename $advertisersRecords if needed -->
  
  <?php $hasAddresses = array_filter(array_pluck($advertisersRecords, 'latitude')); ?>
  <?php if ($hasAddresses): ?>
  
    <div id="map_canvas" style="width: 100%; height: 1024px;; float: left; margin: 0px 15px;"></div>
  <?php endif ?>

  <?php if (!$hasAddresses): ?>
    <div style="width: 200px; height: 200px;; float: left; margin: 0px 15px; border: 1px solid #000;">
      <div style="text-align: center; padding-top: 135px">
        No map available!
      </div>
    </div>
  <?php endif ?>
  <!-- STEP3: /Map with multiple addresses -->


  <p>TIP: Click on markers for more details.</p>


  <!-- STEP4: Map with multiple addresses: Set the popup window content, rename $advertisersRecords if needed -->
  <div id="marker_details" style="display: none;">
    <?php foreach ($advertisersRecords as $record): ?>

      <?php // marker_infowindow_### is the content displayed in the info-window on click ?>
      <div id="marker_infowindow_<?php echo $record['num']; ?>">
        <h3><?php echo htmlencode( @$record['address']); ?></h3>
        <h3><?php echo htmlencode($record['title']) ?></h3>
        Telephone: <?php echo htmlencode($record['main_contact_number']) ?><br/>
        Services: <?php echo join(', ', $record['services_provided:values']); ?>
        <a href="<?php echo $record['_link']; ?>">details</a>
      </div>

    <?php endforeach ?>
  </div></div>
  <!-- STEP4: Map with multiple addresses -->



          
              <div class="col-md-3 col-sm-4">
            
    <div class="google-inner"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-4635476198361137"
     data-ad-slot="4721182526"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<hr></div>
          </div>

    </section>


<!-- InstanceEndEditable -->

<!-- ====================================
:: FOOTER
===================================== -->

<!-- InstanceBeginEditable name="footer1" -->
<section class="footer-bg">
    <div class="footer-inner">
        <div class="container">
            <div class="row relative"><!-- #BeginLibraryItem "/Library/shared/footer.lbi" -->

    <!-- place your graphic here -->

    <i data-wow-delay="1s" class="wow fadeInDown fa fa-globe fa-fw fa-5x"></i>
  <h3 align="center">    <a href="https://www.facebook.com/BridlingtonNet" target="_blank"><img src="/Site/site/fc-webicon-facebook.png" width="48" height="48" alt="Bridlington .net on Facebook"></a> <a href="https://twitter.com/bridlington_net" target="_blank"><img src="/Site/site/fc-webicon-twitter.png" width="48" height="48" alt="Bridlington .net on Twitter"></a> <a href="https://plus.google.com/107860314335935422885/about" target="_blank"><img src="/Site/site/fc-webicon-googleplus.png" width="48" height="48" alt="Bridlington .net on Google Plus"></a></h3>

    <!-- place your graphic here -->

    <!-- TAGLINE TEXT GOES HERE -->
    <h6 data-wow-delay=".5s" class="wow zoomIn lighter">
        Promoting &amp; Supporting Bridlington Since 1998</h6>
    <!-- Tagline goes here! -->


    <!-- WEBSITE NAME TEXT GOES HERE -->
        <a data-wow-delay="1s" class="wow fadeInUp" href="/index.htm">
            <span class="website-name1">Bridlington .net</span><span class="website-name2"></span>
        </a>
    <!-- WEBSITE NAME TEXT GOES HERE -->



<!-- #EndLibraryItem --></div>
        </div>
    </div>
</section>

<!-- ====================================
:: BACK TO TOP
===================================== -->

<a class="cd-top animated2 bounce2" href="#0">Top</a>

<!-- InstanceEndEditable -->

<!-- ====================================
:: COPYRIGHT
===================================== -->

<!-- InstanceBeginEditable name="copyright" -->
<section class="copyright">
    <div class="container">
        <div class="row inner"><!-- #BeginLibraryItem "/Library/shared/copyright.lbi" -->


<div data-wow-delay="2s" class="wow fadeIn pull-left">Copyright <a href="index___header_static.htm">1998-2017</a>. LPL Limited. All Rights Reserved.</div >


<div data-wow-delay="2s" class="wow fadeIn copyright-links text-right">

</div>

<style>
.slidedivide {
display: none;
visibility:hidden;
}

</style>













<!-- #EndLibraryItem --></section>
<!-- InstanceEndEditable -->


 </div>
</div>
<!-- /SKROLL WRAPPER END -->

<!-- ====================================
:: GOOGLE ANALYTICS / MISC SCRIPT
===================================== -->

<!-- InstanceBeginEditable name="google-analytics" -->
<div class="google-analytics">
    <!-- #BeginLibraryItem "/Library/shared/misc-components/__google-analytics.lbi" -->


<!-- #EndLibraryItem -->
</div>
<div class="misc-scripts1"><!-- #BeginLibraryItem "/Library/shared/misc-components/__misc-scripts1.lbi" -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript" src="/weatherwidget/weatherwidget.js"></script>

<script src="https://apis.google.com/js/platform.js" async defer></script>




<!-- #EndLibraryItem --></div>
<div class="misc-scripts2">
    <!-- #BeginLibraryItem "/Library/shared/misc-components/__misc-scripts2.lbi" -->


<!-- #EndLibraryItem -->
</div>
<!-- InstanceEndEditable -->

<!-- ====================================
:: REQUIRED JS LINKS
===================================== -->

<!-- InstanceBeginEditable name="jquery-min-migrateXXXXX" -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- InstanceEndEditable -->
<script>
jQuery("body").removeClass("designview");
</script>

<!-- ====================================
:: SHARED JS LINKS
===================================== -->

<script src="/Site/javascript/vendor/modernizr.js" type="text/javascript"></script>
<script src="/Site/javascript/vendor/owl.carousel.min.js" type="text/javascript"></script>
<script src="/Site/javascript/vendor/fancybox/jquery.fancybox.js" type="text/javascript"></script>
<script src="/Site/javascript/components.js"></script>

<!-- ====================================
:: VENDOR SCRIPTS
===================================== -->

<script src="/Site/javascript/vendor/wow.min.js"></script>
<script src="/Site/javascript/vendor/skrollr.min.js"></script>
<script src="/Site/javascript/vendor/jquery.waypoints.min.js"></script>
<script src="/Site/javascript/vendor/jquery.ui.totop.min.js"></script>
<script src="/Site/javascript/vendor/jquery.easing.min.js"></script>
<script src="/Site/javascript/vendor/parallax.js"></script>

<!-- ====================================
:: PAGE SCRIPTS
===================================== -->

<!-- InstanceBeginEditable name="page-scripts" -->
<!-- STEP1: Map with multiple addresses: Put this in the <head> of your page, rename $advertisersRecords if needed -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier/1.0.3/oms.min.js"></script><!-- Overlapping Marker Spiderfier - https://github.com/jawj/OverlappingMarkerSpiderfier -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<?php echo htmlEncode($GLOBALS['GEOCODER_GOOGLE_API_KEY']); ?>"></script>
<script type="text/javascript">
function initialize() {
  var mapCanvasId = 'map_canvas';
  var mapOptions  = { mapTypeId: google.maps.MapTypeId.ROADMAP };
  var map         = new google.maps.Map(document.getElementById(mapCanvasId), mapOptions);
  var bounds      = new google.maps.LatLngBounds();
  var infowindow  = new google.maps.InfoWindow();

  // Overlapping Marker Spiderfier - https://github.com/jawj/OverlappingMarkerSpiderfier
  var oms = new OverlappingMarkerSpiderfier(map, {
    markersWontMove:   true,
    markersWontHide:   true,
    basicFormatEvents: true
  });

<?php
foreach ($advertisersRecords as $record) {
  if (!$record['latitude'] || !$record['longitude']) { continue; }
  $jsFunctionArgs = "{$record['latitude']}, {$record['longitude']}, {$record['num']}, '" .escapeJs($record['_link']). "'";
  print "  _geocoder_addMarker($jsFunctionArgs);\n";
}
?>

  //
  function _geocoder_addMarker(latitude, longitude, recordNum, detailLink) {
    var latLng       = new google.maps.LatLng(latitude, longitude);
    var infowindowEl = document.getElementById('marker_infowindow_' + recordNum);
    var marker       = new google.maps.Marker({ map: map, position: latLng });
    google.maps.event.addListener(marker, 'spider_click', function() {  // changed click to spider_click: Overlapping Marker Spiderfier - https://github.com/jawj/OverlappingMarkerSpiderfier
      if (infowindowEl) {
        infowindow.setContent(infowindowEl.innerHTML);
        infowindow.open(map, marker);
      }
      else {
        window.location = detailLink;
      }
    });
    
    // Overlapping Marker Spiderfier - https://github.com/jawj/OverlappingMarkerSpiderfier
    oms.addMarker(marker);  // adds the marker to the spiderfier _and_ the map

    //
    bounds.extend(latLng);
  }

  //
  map.fitBounds(bounds);
}

</script>
<!-- STEP1: Map with multiple addresses -->
<!-- InstanceEndEditable -->

</main>
<!-- /MAIN WRAPPER END -->

<!-- ====================================
:: MENU PUSH
===================================== -->
<!-- menuoffcanvas --><!-- #BeginLibraryItem "/Library/shared/menu-offcanvas.lbi" -->


    <a class="menupush-nav-trigger" href="#menupush-nav"><span></span></a><div id="menupush-nav" class="menupush-nav">
       <div class="menupush-navigation-wrapper">
       
       
               <div class="sec-heading5 margin-top-100">
                 <h2>Navigation</h2>
                 <h2>thanks for browsing!</h2>
                 <div class="icon-div icon-div-color">
                   <span><i class="fa fa-bars fa-2x"></i></span></div>
               </div>
       
                <ul class="cd-primary-nav">
                 
<li><a href="/index.php">Home</a></li>
<li><a href="#"> Holidays</a>
        
<ul>
           
                
                
                <li><a href="#"><i class="fa fa-car"></i> Getting Here..</a>
                  <ul>
 <li><a href="/bridlington-information.php?Getting-Here-By-Air-1" title="Directions to Bridlington from British Airports"> By Air</a></li>
                    <li><a href="/bridlington-information.php?Getting-Here-By-Rail-1" title="Directions to Bridlington by Rail"> By Rail</a></li>
    <li><a href="/bridlington-information.php?Coach-and-Bus-Information-in-Bridlington-3" title="Directions to Bridlington by Coach"> By Coach</a></li>
                    <li><a href="http://www.bridlington.net/bridlington-street-map" title="Bridlington Street Map"> Street Map</a></li>
                
             
             </ul>
             
             </li>
             <li><a href="#"><i class="fa fa-building"></i> Accommodation</a>
         <ul>
         <li><a href="http://www.bridlington.net/bridlington-group-accommodation.html" title="Hotel Accommodation in Bridlington"><i class="fa fa-group"></i> Group Bookings</a></li>
    <li><a href="/bridlington-business-directory.php?services_provided=Hotel"><i class="fa fa-building"></i> Hotels</a></li>
                    <li><a href="/bridlington-business-directory.php?services_provided=Guest House" title="Guest Houses in Bridlington"><i class="fa fa-home"></i> Guest Houses</a></li>
                     <li><a href="/bridlington-business-directory.php?services_provided=Bed & Breakfast" title="Guest Houses in Bridlington"><i class="fa fa-home"></i> Bed & Breakfast</a></li>
    <li><a href="/bridlington-business-directory.php?services_provided=Holiday Flats" title="Self Catering Accommodation in Bridlington"><i class="fa fa-building"></i> Flats &amp; Apartments</a></li>
                    <li><a href="/bridlington-business-directory.php?services_provided=Chalet" title="Chalet Accommodation in Bridlington"><i class="fa fa-home"></i> Chalets</a></li>
    <li><a href="/bridlington-business-directory.php?services_provided=Holiday Property"><i class="fa fa-home"></i> Holiday Cottages</a></li>
    <li><a href="/bridlington-business-directory.php?services_provided[]=Holiday Park&services_provided[]=Caravan Park&services_provided[]=Camp Site&services_provided[]=Holiday Park" title="Bridlington Camp and Caravan Parks"><i class="fa fa-car"></i> Camp &amp; Caravan Parks</a></li>
                    
    
  </ul>
         </li> 
         <li><a href="#"><i class="fa fa-cutlery"></i> Food &amp; Drink</a>
                <ul>
 <li><a href="/bridlington-business-directory.php?services_provided=Cafe" title="Bridlington Cafe's"><i class="fa fa-coffee"></i> Cafe's</a></li>
    <li><a href="/bridlington-business-directory.php?services_provided=Restaurant" title="Bridlington Restaurants"><i class="fa fa-cutlery"></i> Restaurants</a></li>
                    <li><a href="/bridlington-business-directory.php?services_provided=Takeaway"><i class="fa fa-cutlery"></i> Take Aways</a></li>
    <li><a href="/bridlington-business-directory.php?services_provided=Public House" title="Bridlington Pubs"><i class="fa fa-cutlery"></i> Public Houses</a></li>
                    
                 
                
                </ul></li> 
             
             <li><a href="#"><i class="fa fa-info"></i> Helpful Information</a>
                <ul> 
                
    <li><a href="http://www.bridlington.net/car-parks-in-bridlington" title="Car Parks in Bridlington"> Car Parking</a></li>
    <li><a href="http://www.bridlington.net/bridlington-park-and-ride" title="Bridlington Park and Ride"> Park &amp; Ride</a></li>
    <li><a href="http://www.bridlington.net/bridlington-telephone-numbers" title="Bridlington Useful Numbers"><i class="fa fa-phone"></i> Useful Numbers</a></li>
    <li><a href="http://www.bridlington.net/toilets-in-bridlington" title="Bridlington Publc Conveniences"> Public Conveniences</a></li>
                    <li><a href="http://www.bridlington.net/beach-safety" title="Being safe on Bridlington Beaches"> Beach Safety</a></li>
                    <li><a href="http://www.bridlington.net/dogs-bridlington-beach.htm" title="Taking Dogs on Bridlington Beaches"> Dogs on the Beach</a></li>
                       
    
  </ul>
              </li>
             
             <li><a href="http://www.bridlington.net/bridlington-holidays.htm"><i class="fa fa-suitcase"></i> Bridlington Holidays</a></li>
             <li><a href="http://www.bridlington.net/where-is-bridlington.htm"><i class="fa fa-car"></i> Where is Bridlington</a></li>
             
            
 

                
                <li><a href="http://www.bridlington.net/places-of-interest-in-bridlington" title="Interesting places Bridlington"><i class="fa fa-camera"></i> Places of Interest</a></li>
                               <li><a href="/bridlington-walks-list.php" title="Bridlington and Local Area Walks"><i class="fa fa-camera"></i> Local Walks</a></li>
                               <li><a href="/bridlington-cycle-list.php" title="Bridlington and Local Area Cycle Routes"><i class="fa fa-bicycle"></i> Bridlington Cycle Routes</a></li>
<li><a href="Library/shared//bridlington-business-directory.php?services_provided=Leisure Attraction" title="Bridlington Attractions"> <i class="fa fa-smile-o"></i> Local Attractions</a></li>
                <li><a href="/bridlington-information.php?Bridlington-Events-2" title="Events in Bridlington"> <i class="fa fa-calendar"></i> What's On Diary</a></li>
                <li><a href="http://www.bridlington.net/bridlington-entertainment/" title="Entertainment News"> <i class="fa fa-calendar"></i> Entertainment News</a></li>
               
                      <li><a href="http://www.bridlington.net/bridlington-photo-galleries" title="Bridlington Photographs"><i class="fa fa-camera"></i> Bridlington Images</a></li>
                                           <li><a href="http://www.bridlington.net/old-bridlington-photographs-and-postcards/" title="Bridlington Photographs"><i class="fa fa-camera"></i> Old Bridlington Images</a></li>
                <li><a href="http://www.bridlington.net/places-of-interest-near-bridlington" title="Places of Interest near Bridlington"><i class="fa fa-car"></i> Close to Bridlington</a></li>
 
        

     </ul>
</li>
                      
        <li><a href="#">Community</a>
        
<ul>
             <li><a href="/bridlington-news.php" title="Bridlington News"><i class="fa fa-bullhorn"></i> News</a></li>
              <li><a href="http://www.bridlington.net/bridlington-entertainment/" title="Entertainment News"> <i class="fa fa-calendar"></i> Entertainment News</a></li>
<li><a href="http://www.bridlington.net/telephone.htm" title="Useful Bridlington Telephone Numbers"><i class="fa fa-phone"></i> Useful Numbers </a></li>
                <li><a href="http://www.bridlington.net/bridlington-library.htm" title="Bridlington Local Studies Library"><i class="fa fa-book"></i> Bridlington Library</a></li>
                <li><a href="http://www.bridlington.net/bridlington-schools" title="Bridlington Schools Contact Details"><i class="fa fa-building"></i> Bridlington Schools </a></li>
<li><a href="http://www.bridlington.net/bridlington-books" title="Bridlington Books and Authors "><i class="fa fa-book"></i> Literary Corner</a></li>
<li><a href="http://www.bridlington.net/bridlington-photography" title="Amateur Photographers Photographs"><i class="fa fa-camera"></i> Photography Corner</a></li>
                
<li><a href="#">History</a>
            <ul>
                <li><a href="http://www.bridlington.net/bridlington-history/" title="Bridlington History Information"><i class="fa fa-history"></i>
 Bridlington History</a></li>
 <li><a href="http://www.bridlington.net/old-bridlington-photographs-and-postcards/" title="Bridlington Photographs"><i class="fa fa-camera"></i> Old Bridlington Images</a></li>
 <li><a href="http://www.bridlington.net/boats-of-bridlington/" title="Boats of Bridlington"><i class="fa fa-anchor"></i>
 Boats of Bridlington</a></li>
    <li><a href="http://www.bridlington.net/bridlington-priory" title="Bridlington Priory Information"><i class="fa fa-history"></i>
 Bridlington Priory</a></li>
    
                
            </ul>
                </li>
                
                


</li>
        <li><a href="#">Business</a>
<ul>
<li><a href="/bridlington-advertiser-map.php" title="Find a Business on out Bridlington Business Map"><i class="fa fa-book"></i> Business Map </a></li>
                <li><a href="/bridlington-business-directory.php" title="Find a Bridlington Business"><i class="fa fa-book"></i> Business Directory </a></li>
<li><a href="http://www.bridlington.net/bridlington-business-promotion" title="Advertise Your Business on Bridlington.net"><i class="fa fa-info"></i>
 Why Advertise Here</a></li>
                
<li><a href="http://www.bridlington.net/cmsAdmin/admin.php" title="Login to Your Bridlington.net Advertisement"> Advertising Login</a></li>

<li><a href="/bridlington-advertisement-purchase.php" title="Purchase your Advertising here"> Advertising Signup</a></li>
                <li><a href="http://www.bridlington.net/advertising-results.php" title="See How Many Views Each Advertiser Gets "> Live Advertising Statistics</a></li>
                 <li><a href="http://www.bridlington.net/free-advertising" title="Free Listing Request"> Request Free Business Listing</a></li>

</ul>
</li>
        
        
                
 <li><a href="bridlington-photo-gallery.php">Galleries</a></li>               
                </li>
        

            
                  <!-- numo horizontal links -->
                  <!-- numo drop-down login-box --> 

        </ul>
                
                
    <!-- ====================================
:: SECTION 3
===================================== -->

<div class="divider1"></div>
    <section class="section3 text-center">
        <div class="wrapper">
          <div class="container">
            <div class="row">
              <h2>Contact us</h2>

             <p>
                You can contact us using the form below</p>
             <address>
                  <strong>LPL Limited.</strong><br>19 Thorndale Croft, Wetwang<br>Driffield, East Yorkshire. YO25 9XZ<br>Phone: 01377 236282
             </address>
             <address>
                  <strong>Full Name</strong><br><a href="mailto:#">first.last@example.com</a>
             </address>
             

                <form method="post" action="https://supersubmit.co/welcome/XXXXXXXXXX">
                   <div class="row">
                       <div class="col-sm-6">
                           <div class="content-left">
                                   <div class="form-group">
                                       <label for="offcanvasFirstName">First name:</label>
                                       <input id="offcanvasFirstName" class="form-control" name="First_Name" placeholder="First Name" type="text"> </div>
                                   <div class="form-group">
                                       <label for="offcanvasLastName">Last name:</label>
                                       <input id="offcanvasLastName" class="form-control" name="Last_Name" placeholder="Last Name" type="text"> </div>
                                   <div class="form-group">
                                       <label for="offcanvasEmail">Email address</label>
                                       <input id="offcanvasEmail" class="form-control" name="Email" placeholder="Enter Email" type="email"> </div>
                                   <div class="form-group">
                                       <label>Subject</label>
                                       <select class="form-control" name="Subject">
                                           <option>Customer Support</option>
                                           <option>Sales Marketing</option>
                                           <option>Job Opportunities</option>
                                           <option>Product Support</option>
                                           <option>Suggestions</option>
                                       </select>
                                   </div>
                                   <button class="btn btn-default margin-bottom-9" type="submit">Submit</button>
                           </div>
                       </div>
                       <div class="col-sm-6">
                           <div class="content-right">
                                   <div class="form-group">
                                       <label>Message:</label>
                                       <textarea class="form-control" name="INFO__message" rows="12"></textarea>
                                   </div>
                           </div>
                       </div>
                   </div>
               </form>


             

            </div>
          </div>
        </div>
    </section>
<div class="divider1"></div>




                
       </div>
       
    </div>


<!-- #EndLibraryItem --><!-- ====================================
:: THEME INIT
===================================== --><!-- InstanceBeginEditable name="theme-init2" --><script src="/Site/javascript/theme-init.js"></script><!-- InstanceEndEditable -->

</body>

<!-- InstanceEnd --></html>

By Dave - August 10, 2017

Hi willydoit, 

We're getting into some custom programming here.  But give this a try: 

  // get pulldown of matched records
  $records              = $advertisersRecords;
  $valueField           = 'num';
  $labelField           = 'title';
  $showEmptyOptionFirst = true;
  $selectedValue        = isset($_REQUEST[$valueField]) ? $_REQUEST[$valueField] : ''; // default value
  $valuesToLabels       = array_column($records, $labelField, $valueField);
  $optionsHTML          = getSelectOptions($selectedValue, array_keys($valuesToLabels), array_values($valuesToLabels), $showEmptyOptionFirst);
  print "<select name='$valueField'>$optionsHTML</select>\n";

Let me know if that works for you.  I can't test it on your server so you may need to fix any typos but it should give you a sense.

Dave Edis - Senior Developer
interactivetools.com

Thanks dave,

excuse my ignorance but as mentioned I am not a php or mysql programmer. I dont know whether the code supplied is for the header or to place inside a form section. Do i place all of this code into the pre header section ie in the code below.

<?php 
  // load viewer library
$libraryPath = 'cmsb/lib/viewer_functions.php';
   $dirsToCheck = array('/home/sites/lpl-testsite.co.uk/public_html/','','../','../../','../../../');
  foreach ($dirsToCheck as $dir) { if (@include_once("$dir$libraryPath")) { break; }}
  if (!function_exists('getRecords')) { die("Couldn't load viewer library, check filepath in sourcecode."); }
  
    // get pulldown of matched records
  $records              = $advertisersRecords;
  $valueField           = 'num';
  $labelField           = 'title';
  $showEmptyOptionFirst = true;
  $selectedValue        = isset($_REQUEST[$valueField]) ? $_REQUEST[$valueField] : ''; // default value
  $valuesToLabels       = array_column($records, $labelField, $valueField);
  $optionsHTML          = getSelectOptions($selectedValue, array_keys($valuesToLabels), array_values($valuesToLabels), $showEmptyOptionFirst);
  print "<select name='$valueField'>$optionsHTML</select>\n";

  // error checking
  if (!@$GLOBALS['GEOCODER_PLUGIN']) { die("You must activate the Geocoder plugin before you can access this page."); }
if (!@$GLOBALS['GEOCODER_GOOGLE_API_KEY']) { die("You must have a Google Maps API key to display a map, see the readme file for instructions on getting one."); }
  // get records
   list($advertisersRecords, $advertisersMetaData) = getRecords(array(
   'tableName'   => 'advertisers',
    'loadUploads' => false,
    'allowSearch' => true,


  ));

?>

If so can I then just replicate the search form I have used for the services provided but replace the services_provided field with the "title" field as below?

 <form method="post" action="?">
        
      
      
       <select name="title">
      <h5>  <?php foreach (getListOptions('advertisers', 'title') as $value => $label): ?> 

<option value = "<?php echo $value;?>" <?php selectedIf($value, @$_REQUEST['title']);?>>

<?php echo $label; ?></option> 

<?php endforeach ?> </p></h5>

      
         
         </select>
<br/>
        
        
        <div align="left"><h5>
          <input type="submit" name="search" value="  Show Business Location  "/></h5>

Thanks in advance