Help with a svg php AJAX site

[ArtPur]

Im trying to understand a bit more pdo… I have the following:

I have a svg and when I click on a map the country name is loaded into a var on the click event.

  <code>                
  <script>
  function fill_contact(evt) //display click event
            {
            var country_id = evt.target.id
            document.getElementById('country_name').firstChild.data = country_id
            }
            </script>
  </code> 

My php code is as follows:

  <code> 

  <?php
  //Define constants
  define('DB_DRIVER', "mysql");
  define('DB_SERVER', "127.0.0.1");
  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);
  $stmt->execute(array($country));           

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

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-->
                            <p></p>
                            <h4>Regional Representative: <span class="label" id="firstname"> </span></h3></h4><!--get Rep ” firstname, lastname” from database based on country from svg to display-->
                            <p></p>
                            <h4>Photo</h4><!--get Rep “photo” from database based on country from svg to display-->
                             <p></p>
                            <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>
            <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>
       </div>
    <div id="IndexPage_Right">
                            <svg id="map" version="1.1" and rest of svg code.
    <g    id="map-matrix" transform="matrix(1.1 0 0 1.1 0 0)" >
          <g id="Plan" onclick="fill_contact(evt)">
  
          <path id="Mauritius" onmouseover="displayName('Mauritius')" onmouseout="displayName('')" class="land  coast mu"                              d="M624.163,441.624c0.99-0.794,1.762-6.861,5.863,0.492C631.477,444.716,622.546,446.814,624.163,441.624L624.16      3,441.624z M641.939,436.708c-0.139-0.024-0.219-0.046-0.357-0.046c-  0.448,0-0.839,0.327-0.839,0.767c0,0.575,0.15,1.309,0.736,1.309   c0.587,0,0.736-0.733,0.736-1.309C642.216,437.17,642.021,436.956,641.939,436.708L641.939,436.708z   M685.416,429.682       c1.343-0.949,1.29,1.423,4.752-1.691c3.162-2.845,1.704,10.603-2.011,4.153C687.334,430.714,685.898,429.341,685.416      ,429.682 L685.416,429.682z M651.387,436.616c-  0.928-2.856-4.843-3.092,1.541-8.839c0.049-0.044,3.771,4.779-0.447,7.727    C652.362,435.587,651.325,436.427,651.387,436.616z"/>
    The rest of the svg code comes here... It all works!
  </code> 

My database has a table called reps. It had data 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 mut also refresh the query every time a click event happens. Guests might click a few countries to look at reps. If thy 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 , but is it correct?
Last question: Once I get the infoindent preformatted text by 4 spacesrmation 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?

I’ve only been coding for about 3 months now. My first website

[droopsnoot]

Basically, you need to trap the onclick event, use that to call your database (using xmlhttprequest) and return the appropriate details for your contact. I have no specific clue about how you would decide which country the user clicked on, but assuming that’s covered then it shouldn’t be difficult.

Have a look at this as a basic ajax tutorial: http://www.w3schools.com/php/php_ajax_php.asp

It’s not the one I used but it covers the basics. How to trap the event you want (in your case, a click event), how to call the php routine on your server to recover the information, and how to insert it into your HTML once you’ve got it. OK, they call a php routine that doesn’t go near a database, but that’s not the difficult bit here.

As you can tell, I’m no expert at this either. But I’ve got a bit of code working that waits until I’ve lost focus on a text entry box then goes off to query a database to fill in the rest of the form, and that’s a basic starting point. Start small, then improve it until you have what you need.

[ArtPur]

Thanks, been trying to study it. A bit over my level at the moment. Will continue. Thanks