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

最新推荐文章于 2023-01-02 19:28:38 发布

weixin_30596023

最新推荐文章于 2023-01-02 19:28:38 发布

阅读量484

点赞数

文章标签： javascript php xhtml ViewUI

原文链接：http://www.cnblogs.com/calmboy/p/4109575.html

版权

这两天在架设一个较早的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可能是等事件代码执行完后在处理跳转代码（未作测试，不知道说法是否正确）

转载于:https://www.cnblogs.com/calmboy/p/4109575.html

weixin_30596023

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Form表单内按钮实现location.href跳转

这两天在架设一个较早的PHP应用程序，发现有几个按钮在IE下点击有效果，在Chrome、Firefox下点击则没反应。问题来了，那么马上F12拉出神器开始调试，下面把HTML代码贴出来：<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" con...
复制链接

扫一扫