Hi guys.
I'm having problem with checkboxes.

Let me post my code.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pilihan Makanan</title>
<style type="text/css">
<!--
.style1 {
font-family: Verdana;
font-size: 12px;
}
-->
</style>
<script>
function ShowMenu(num, menu, max)
{
  //num is selected value, menu is the name of the div, max is the number of divs
  for(i = 1; i <= max; i++){
    //add number onto end of menu
    var menu_div = menu + i;

    //if current show
    if(i == num) {
      document.getElementById(menu_div).style.display = 'block';
    } else {
      //if not, hide
      document.getElementById(menu_div).style.display = 'none';
    }
  }



}
</script>
</head>

<body>
<span class="style1"></span>
<form name="generator" type=get action="pilihan_makanan_2.html">

<p align="left">
Jenis Makanan:

<select id='makanan'
onChange="javascript: ShowMenu(document.getElementById('makanan').value,'mknan', 2);">
<option value='0'>Pilihan Makanan
<option value='1'>Western
<option value='2'>Eastern

</select>

<div id='mknan1' style="display: none;">
 <h4>Western</h4>
  <input type="checkbox" name="western1" value="Beef Steak">Beef Steak<br>
  <input type="checkbox" name="western2" value="Lamb Chop">Lamb Chop<br>
  <input type="checkbox" name="western3" value="Chicken Chop">Chicken Chop<br>
  <input type="checkbox" name="western4" value="French Fries">French Fries<br>
</div>
<div id='mknan2' style="display: none;">
 <h4>Eastern</h4>
  <input type="checkbox" name="eastern1" value="Kailan Ikan Masin">Kailan Ikan Masin<br>
  <input type="checkbox" name="eastern2" value="Tom Yam Campur">Tom Yam Campur<br>
  <input type="checkbox" name="eastern3" value="Sup Daging">Sup Daging<br>
  <input type="checkbox" name="eastern4" value="Bandung Soda">Bandung Soda<br>
  <input type="checkbox" name="eastern5" value="Char Kuey Tiow">Char Kuey Tiow<br>
</div>
<br />
</p>
<tr>
<td colspan=2><div align="left"><span class="style1">
<input type=submit value="Submit!">
</span></div></td>
</form>
</body>
</html>
Ok.
I have separated both checkbox.
Let say if I were to choose "Eastern" food.
The results should only post selection for "Eastern" checkbox.

However, at the result page.
It displays result for "Western" selection as well.

Example :

Western
undefined
undefined
undefined
undefined

Eastern
Kailan Ikan Masin
undefined
Sup Daging
undefined
Char Kuey Tiow

I want to remove the "undefined" values.
I wanted to display only the selected values.

Thank you in advance.