CODEWITHSUNDEEP
phphtmlmysqlforeach
Kevin S
Kevin S

Reputation: 95

Retrieving dealers information from database using image map and html select element

I have a php page dealers.php which has all the dealers lists in a html table, but I want to make few changes to the page and display dealers information based on USA State name ( map at https://i.sstatic.net/k6ErP.png ) input using html image map and select option. Currently I can get all active (approved) dealers information from database with a user class:

public function getActiveUsers()
{

    $sql = "SELECT * FROM " . self::uTable
    . "\n WHERE active = 'y'" 
    . "\n ORDER BY username";
    $row = self::$db->fetch_all($sql);

    return ($row) ? $row : 0;
}

and display all of them in front-end with a foreach loop:

<?php $data = $user->getActiveUsers(); ?>

<?php foreach ($data as $row):?>
    <?php echo $row->name;?>
    <?php echo $row->address;?>
    <?php echo $row->city;?>
    <?php echo $row->state;?>
    <?php echo $row->zip;?>
    <?php echo $row->website;?>
<?php endforeach;?>

<?php unset($row);?>

but I want to output the result only after clicking one of the State Name from image map or by selecting one of the State from select option. How can I accomplish it and display the result in HTML table format?

Input Option:

<img src="assets\images\USA-States-Map.png" alt="USA Map" usemap="#USA-States-Map" style="border-style:none" />

<map id="USA-States-Map" name="USA-States-Map">
    <area shape="poly" alt="WYOMING" coords="210,119,208,137,205,150,203,164,202,177,200,185,207,187,231,190,258,193,276,195,289,195,292,163,293,142,294,130,294,127,280,127,261,125,242,123,220,120" title="WYOMING" onMouseOver="WYOMING" />

    <area shape="poly" alt="RHODE_ISLAND" coords="705,150,705,147,703,143,703,141,705,140,706,140,707,141,708,143,709,146,709,148,708,150,705,152" title="RHODE_ISLAND" onMouseOver="RHODE_ISLAND" />
</map>

<select name="state">
    <option value="WYOMING">WYOMING</option>
    <option value="RHODE_ISLAND">RHODE ISLAND</option>
</select>

Output Format:

<table class="table">
    <thead>
      <tr>
        <th class="header">Name</th>
        <th class="header">Address</th>
        <th class="header">City</th>
        <th class="header">State</th>
        <th class="header">Zip</th>
        <th class="header">Website</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
</table>

Upvotes: 0

Views: 451

Answers (1)

vcs
vcs

Reputation: 51

You would probably want to use the onchange event of the select box and call getActiveUsers and pass to it your form variables....something like this:

<select class="field" name="state" onchange="getActiveUsers(this.form)">

Upvotes: 1

Related Questions