Jump to content


This topic is now archived and is closed to further replies.


Help with svg php AJAX website. 1st site.

Recommended Posts

Great site!, Im trying to understand a bit more pdo.. I have the following:


I have a svg and when I click on the map the country name is loaded into a var on the click event by the code below:

function fill_contact(evt) //display click event
var country_id = evt.target.id
document.getElementById('country_name').firstChild.data = country_id

My php code is as follows:

//Define constants
define('DB_DRIVER', "mysql");
define('DB_SERVER', "");
define('DB_DATABASE', "aeea");
define('DB_USER', "root");
define('DB_PASSWORD', "root");

//Database connection
try {
      $dbh = new PDO(DB_DRIVER . ":dbname=" . DB_DATABASE . ";host=" . DB_SERVER, DB_USER, DB_PASSWORD);
      $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e){
     die("Sorry, we could not connect you to this database, please contact the Administrator to sort this out.". $e->getMessage());
//Get data         
$query = "SELECT firstname, lastname, email, photo FROM reps WHERE country like ?";
$country = 'country_name';

//Create the statement
$stmt = $dbh->prepare($query);

//Use data
                $row = $stmt->fetch(PDO::FETCH_ASSOC);                        
                                echo '<pre>', print_r($row), '</pre>';

My Html code is as follows:

<div id="IndexPage">
    <div id="IndexPage_Left">                    
                <div id="IndexPage_Left_top">
                                <h3>Country: <span class="label" id="country_name"> </span></h3><!—This works fine-->
                                <h4>Regional Representative: <span class="label" id="firstname"> </span></h3></h4><!--get Rep ” firstname, lastname” from database based on country from svg to display-->
                                <h4>Photo</h4><!--get Rep “photo” from database based on country from svg to display-->
                                <input style='margin-top: 20px;' type="submit" value="Contact me." id='jqxSubmitButton' /><!-- if clicked, it opens a contact form below, the email address is hidden-->
                <div id="IndexPage_Left_bottom">
                                <h4>email form here<h4><!-- if email is clicked, it opens a contact form here with “email” address from database -->
  <div id="IndexPage_Right">
                                <svg id="map" version="1.1" and rest of svg code.

My database has a table called reps. It had dta of representatives in each country in Africa. It has a number of fields ie. rep_id(unique indexed), firstname, lastname, email, postal, city, state, country, contact_no, photo etc.


I want to be able to get the fields in the database and display them in the html form on the click events. Ie. The database must also refresh the query every time a click event happens. Guests might click a few countries to look at reps. If they click off the map, it blanks out the details.
How do I go about doing this? I’ve heard about XMLHttpRequest but don’t know how to go about doing it.
Another question: Once I get the information, how do I display it correctly in the Html? I used <span>, but is it correct?
Last question: Once I get the information email address, how do I show a contact form on "conact me" button? and then when guests click on another country, remove the contact form?

 This is my first website.


Please help

Share this post

Link to post
Share on other sites

  • 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.