Hi, i have a weird problem here. I have a javascript written inside the jsp but it doesn't seem to work. So, i convert the simple jsp file to html and miraclely it works. Can someone explains why?

Below is my script for jsp. HTML is actually the same file as jsp but in different file extension format.

HTML Code:
<html>
<head>
<title>Camera</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="javascript">
function validateControls(form)
{
	
	var brand = document.getElementById('brand').value;
	var price = document.getElementById('price').value;
	var pixelsize = document.getElementById('pixelsize').value;
	var haha = document.getElementById('haha').value;
	
		alert(haha.length);
		
		alert("brand selected is:"+brand);
		
		if (brand.length == 0)
		{
			alert("Please choose your desired Brand!");
			return false;
		}
		else if (price.length == 0)
		{
			alert("Please choose your desired Budget!");
			return false;
		}
		else if (pixelsize.length == 0)
		{
			alert("Please choose your desired pixel size!");
			return false;
		}
	
	return true;
}

function abc()
{
var brand = document.getElementById('brand').value;
alert("brand selected is:"+brand);
}
</script>
</head>

<body background="images/bg.gif" leftmargin="0" topmargin="0" bottommargin="0" style="background-repeat: repeat-y">
<table width="900" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000" background="images/bg_camera.jpg" style="background-repeat: no-repeat">
  <!--DWLayoutTable-->
  <form name="form1" action="" onsubmit="return validateControls(this);">
    <tr> 
      <td width="17" height="9"></td>
      <td width="180"></td>
      <td width="55"></td>
      <td width="600"></td>
      <td width="32"></td>
      <td width="16"></td>
    </tr>
    <tr>
      <td height="9"></td>
      <td></td>
      <td></td>
      <td rowspan="3" valign="top"><img src="images/banner.jpg" width="600" height="80"></td>
      <td></td>
      <td></td>
    </tr>
    <tr> 
      <td height="58"></td>
      <td valign="top"><img src="images/logo.gif" width="180" height="58"></td>
      <td></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr> 
      <td height="13"></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td height="24"></td>
      <td></td>
      <td></td>
      <td>&nbsp;</td>
      <td></td>
      <td></td>
    </tr>
    <tr> 
      <td height="286"></td>
      <td></td>
      <td></td>
      <td colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
          <!--DWLayoutTable-->
          <tr> 
            <td height="68" colspan="3" valign="top"><span class="header">Welcome 
              to Digital Camera Review Search:</span><br> <span class="bodytext">This 
              page allows you to search for the suitable camera from your preferences.<br>
              We have the latest Digital Cameras ranging from Sony, Canon, Olympus, 
              Nikon, Ricoh.<br>
              </span></td>
            <td width="16">&nbsp;</td>
          </tr>
          <tr> 
            <td width="98" height="17"></td>
            <td width="170"></td>
            <td width="348"></td>
            <td></td>
          </tr>
          <tr> 
            <td height="25" valign="middle"> <p class="bodytext">Brand: </p></td>
            <td valign="middle"> <select name="brand" class="formtext">
                <option></option>
                <option value="Canon">Canon</option>
                <option value="Nikon">Nikon</option>
                <option value="Olympus">Olympus</option>
                <option value="Ricoh">Ricoh</option>
                <option value="Sony">Sony</option>
              </select></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr> 
            <td height="11"></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr> 
            <td height="25" valign="middle"><span class="bodytext">Price:</span></td>
            <td valign="middle"> <select name="price" class="formtext">
                <option></option>
                <option value="$101-$300">$101-$300</option>
                <option value="$301-$500">$301-$500</option>
                <option value="$501-$700">$501-$700</option>
                <option value="$701-$1000">$701-$1000</option>
                <option value="more than $1000">more than $1000</option>
              </select></td>
            <td></td>
            <td></td>
          </tr>
          <tr> 
            <td height="10"></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr> 
            <td height="25" valign="middle"><span class="bodytext">Mega Pixels:</span></td>
            <td valign="middle"><select name="pixelsize" class="formtext">
                <option></option>
                <option value="4.0-6.0">4.0-6.0</option>
                <option value="7.2-10.0">7.2-10.0</option>
              </select></td>
            <td></td>
            <td></td>
          </tr>
          <tr> 
            <td height="35">&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td height="33" colspan="2" valign="top"><input type="submit" name="Submit" value="Submit" class="formbntext" onClick="abc"> 
              <input type="reset" name="reset" value="Reset" class="formbntext"> 
            </td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td height="37">&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </table></td>
      <td>&nbsp;</td>
    </tr>
  </form>
  
</table>

</body>
</html>