首页 > 代码库 > 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> </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" /> <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跳转
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。