PHP checkbox onclick with function call

[Robert_Wynter]

I have checkbox function that creates a checkbox list  from my database. I also have a map that I want onclick to check the checkbox align with that section of the map. So if you click Bominvile on the map the checkbox for Bominville gets checked/unChecked.

[FUNCTION CALL] (From db.php)

/ This  will create a CHECK BOX based on the property/value pairs in table AND the toggle all checkbox.
function buildCheckBox($table, $prechecked)
{
        $conn = db_connect(); // establish connection
        $sql = "SELECT property, value FROM ".$table."";
        $results = pg_query($conn, $sql);
        
        //THIS LOOP ONLY RUNS ONCE ON PAGE LOAD. JUST TO DISPLAY
        // THE REORDS IN THE CITY DB TABLE.
        while ($record = pg_fetch_array($results))
        {
                
            $checked = ($prechecked == $record['value'])?"checked=\"checked\"":"";
            echo '<input type="checkbox" name="'. $table.'[]" ' .$checked.' value="'. $record['value'] .'">'. $record['property'] .'<br/>';
            
        }
        //echo "show me whats record ". $record['property']. "<br/>";
        
        
}

[/FUNCTION]


<script language="javascript">
function myclick(whichone)
{
  if (document.getElementById(whichone).checked == true)  {
    document.getElementById(whichone).checked = false;
  } else {
    document.getElementById(whichone).checked = true;
  }
}
</script>

          <tr>
                    <td class="left">
                        <input type="checkbox"  id="city_toggle" onclick="cityToggleAll();" name="city[]">City Toggle All<br/>
                            <!-- FUNCTION CALL TO LOOP THROUGH TOGGLING CHECK BOXES ON/OFF-->
                        <?php echo buildCheckBox('city', $selected_city);?>
                        
                        <input type="checkbox" id="city[]"><br>
                        
                        
                </td>
          
                    <td><img src="pictures/durham_mapgoodbeforewhitby.png" alt="durham_map" width="417" height="340" usemap="#map1">
                    <a href="#" onClick="myclick('city[]')">
                    <map name="map1">
                        
                    <area shape="poly"
                        coords="193,207,284,207,391,214,190,287,260,299,300,307,344,310,389,322"  href="#" id="city[]" title="Bowmanville" alt="Bowmanville" />
                    
                    </map>
                    </a><br>
                </td>
            </tr>

 

[Robert_Wynter]

got it to work but now the checkbox goes away after onClick

 

 

 
                              
                </td>
          
                    <td><img src="pictures/durham_mapgoodbeforewhitby.png" alt="durham_map" width="417" height="340" usemap="#durhammap">
                    
                            <map name="durhammap">
                                                    
                                    <area shape="poly"
                                        coords="193,207,284,207,391,214,190,287,260,299,300,307,344,310,389,322"  href="?city=Bowmanville" onClick="myclick('Bowmanville')" id="Bowmanville" title="Bowmanville" alt="Bowmanville" />
                                    
                            </map>    <br>
    
                </td>
 

[Robert_Wynter]

ok fixed that too by removing tye href. The only think now how will the user know that that part of the map is clickable

 

 

 

                    <td>
                    
                    <img src="pictures/durham_mapgoodbeforewhitby.png" alt="durham_map" width="417" height="340" usemap="#durhammap">
                    
                            <map name="durhammap">
                                                    
                                    <area shape="poly"
                                        coords="193,207,284,207,391,214,190,287,260,299,300,307,344,310,389,322"  onClick="myclick('Bowmanville')" title="Bowmanville" />
                                    
                            </map>    <br>
    
                </td>