怎么使同一个页面中的多个form生效？

如何使同一个页面中的多个form生效？？
文件index.html
里面有三个form
<li> 请选择你要进入的城市 </li>
<li   />
<li>
<form   name= "cityform "   method= "post "   action= "findcity.php ">
<select   name= "province "   onchange= "document.cityform.cityName(this.value) ">
    <option   value= " "> 请选择省份 </option>
</select>
<select   name= "city ">
    <option   value= " "> 请选择城市 </option>
</select>
</li>
<li   />
<li>
<input   type= "submit "   name= "submit "   value= "提交选择 ">
<input   type= "reset "   name= "cancle "   value= "重置 ">
</li>
</form>
</li>
<script   language=javascript>
var   cityouterHTML   =   document.cityform.city.outerHTML.substr(0,   document.cityform.city.outerHTML.length-9);
function   province()
{
      var   provinceName   =   [ "北京 ", "上海 ", "天津 ", "重庆 ", "广州 ", "深圳 ", "黑龙江 ", "吉林 ", "辽宁 ", "河北 ", "山东 ", "江苏 ", "浙江 ", "福建 ", "广东 ", "江西 ", "安徽 ", "河南 ", "山西 ", "内蒙古 ", "陕西 ", "湖北 ", "湖南 ", "海南 ", "广西 ", "贵州 ", "四川 ", "甘肃 ", "青海 ", "宁夏 ", "云南 ", "* ", "* "];
      var   e   =   document.cityform.province;
      var   s   =   e.outerHTML.substr(0,   e.outerHTML.length-9)   +   "\r\n ";
              for   (var   i=0;   i <provinceName.length;   i++){
              s   +=   " <option   value= ' "+   provinceName[i]   + " '> "+   provinceName[i]   + " </option> \r\n ";}
              s   +=   " </select> ";
              e.outerHTML   =   s;
}province();
function   cityName(val)
{
      var   北京   =   [ "西城区 ",   "东城区 ",   "朝阳区 ",   "海淀区 ",   "宣武区 ",   "崇文区 ", "丰台区 ", "大兴区 ", "昌平区 ", "房山区 "];
      var   上海   =   [ "南京 ",   "苏州 ",   "无锡 ",   "常州 ",   "镇江 ",   "徐州 "];
      var   天津   =   [ " "];
      var   重庆   =   [ " "];
      var   广州   =   [ " "];  
      var   黑龙江   =   [ "哈尔滨 ",   "齐齐哈尔 ",   "鸡西 "];  
     
      var   e   =   document.cityform.city;
      var   s   =   cityouterHTML;
      if   (val   ==   " ")   {s   +=   " </select> ";   e.outerHTML   =   s;   return;}