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

浏览数：34 / 时间：2015年06月09日

这两天在架设一个较早的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=‘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=‘main.php?action=user_add‘;"  >添加会员</button>
 

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

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

顺利执行。

总结问题：

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

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

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 代码 java html 问题 log http 方法 class style 代码 java html 问题 log http 方法

相关文章

随机文章

您可能还喜欢

您可能还喜欢