首页 > 代码库 > Form表单内按钮实现location.href跳转

Form表单内按钮实现location.href跳转

这两天在架设一个较早的PHP应用程序,发现有几个按钮在IE下点击有效果,在Chrome、Firefox下点击则没反应。问题来了,那么马上F12拉出神器开始调试,下面把HTML代码贴出来:

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Form表单Location.href跳转失败原因</title></head><body><form  action="main.php?action=serach" method="post">  <td width="45" align="right" nowrap="nowrap" class="F_bold">筛选:</td>  <td nowrap="nowrap"><select id="id" style=‘cursor: hand‘>      <option selected="selected" value="0">全部</option>      <option value="2">启用</option>      <option value="1">停用</option>    </select>    &nbsp;&nbsp;</td>  <td width="45" align="right" nowrap="nowrap" class="F_bold">搜索:</td>  <td nowrap="nowrap"><select name="VIP_name"  onChange="return C_Key();" >      <option value="0">账号:</option>    </select>  <td width="67%" class="F_bold"><input type="text" name="key" class="input1"  />    &nbsp;&nbsp;    <input type="submit" value="确定" name="B1"  class="button_b" style="width:60;height:22" ;></td>  <td width="67%" class="F_bold"><span id=fm22>    <button class="button_b" onClick="javascript:location.href=http://www.mamicode.com/‘main.php?action=user_add‘;"  >添加会员</button>    </span></form></body></html>

此表单内有两个按钮,一个是搜索按钮,一个为添加会员按钮,在IE中,两个按钮能够实现正常的功能,Chrome、Firefox中“添加会员”这个按钮的跳转代码一直不成功,一开始以为事件代码产生的浏览器不兼容,换了俩三种方式问题还是没能解决:

<!-- 方法一 -->
<
script> function openURL(str) { location.href=str; } </script> <button class="button_b" onClick="openURL(‘main.php?action=user_add‘);" >添加会员</button>
<!-- 方法二 -->
<button class="button_b" onClick="window.location.href=http://www.mamicode.com/‘main.php?action=user_add‘;" >添加会员</button>
 

后来发现点击该按钮后页面有刷新(跳转),跳转到的页面是:main.php?action=serach,由于在实际的调试的时候该页面是嵌套在Iframe中的,跳转的链接一直未注意到,是通过Fiddler抓包后才注意到,这下子就明白了,点击添加会员按钮后实际上执行的是表单提交,也就是问题所在了。要让表单不执行提交只要返回false 就OK了。 修改后的代码

 <button class="button_b" onClick="javascript:location.href=http://www.mamicode.com/‘main.php?action=user_add‘;return false;"  >添加会员</button>

顺利执行。

总结问题:

  跟表单不相关的按钮实际上不应该包含在form中(代码非本人所写)

      IE浏览器先执行locaiton.href后,就不会提交表单了,而Chrome、Firefox可能是等事件代码执行完后在处理跳转代码(未作测试,不知道说法是否正确)

 

Form表单内按钮实现location.href跳转