HTML Imagemap作为表单提交

Question

I am currently trying to create a simple php front-end for a mysql database hosted online.

The project I'm working on will take a grid layout of desks in an office building and turn them into an image map. From there, depending on which seat is clicked on, it will pull information from the MySQL database, populate the fields of a form, and allow for edits if necessary.

I have a few files, listed below with their functions:

locator.php - The 'homepage,' which holds the imagemap and is where the seat number variable will be coming from

form.php - The form that the data will populate, depending on the seat number passed from locator.php (Right now, this is just a basic HTML form I plan on completing later)

I've seen this done across the net with a regular form, but apparently an imagemap makes things a little trickier. I tried creating an onClick() event that takes the seat number that was clicked on and passes it into a javascript function, but from there I'm froze up as to how to continue on to the next page with that variable.

I feel like I have several ideas only partially implemented in my code, and I've hit a wall. Any ideas would be greatly appreciated.

locator.php:

<img src="map.jpg" usemap="#disp_map">
<form name="formmap" action="form.html" method="post">
    <map name="disp_map">
        <area name="area_159" shape="rect" coords="11,261,58,308" href='#' onClick="submitform(159)" alt="#159">
        <area name="area_160" shape="rect" coords="11,311,58,358" href='#' onClick="submitform(160)" alt="#160">
    </map>
</form>

<br>
<hr>

<?php
$dbhost = "<<removedforprivacy>>";
$dbname = "<<removedforprivacy>>";
$dbuser = "<<removedforprivacy>>";
$dbpass = "<<removedforprivacy>>";

try{
    $conn = mysql_connect($dbhost,$dbuser,$dbpass);
    $db = mysql_select_db($dbname, $conn);
    echo '<img src="check.jpg" alt="Database Connection Made">' . 'Connection to the server was successfully made.<br>';
}catch(Exception $e){
    echo 'Exception!: ' . $e->getMessage() . '<br>';
}
?>

<script language="javascript" type="text/javascript">
function submitform(jack) {
    window.alert("Data will be displayed for jack #"+ jack +".");
    document.formmap.submit();
}
</script>

Answer 1

Consider the following snippets:

<form name="formmap" action="form.html" method="POST">
    <input type='hidden' id='seatNumber'/>
</form>

function submitform(jack) {
    window.alert("Data will be displayed for jack #"+ jack +".");
    document.getElementById('seatNumber').value = jack;
    document.formmap.submit();
}