[转载]慎用<a/>标签提交表单 [IE6无法提交表单][事件冲突]

最新推荐文章于 2023-08-13 01:21:44 发布

原创最新推荐文章于 2023-08-13 01:21:44 发布 · 123 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#IE #IDEA #浏览器 #XHTML #HTML

jsp/servlet 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了在不同浏览器中使用<a>标签触发表单提交的行为差异，特别是在IE6中的表现。通过示例代码展示了如何实现这一功能，并讨论了<a>标签的href属性与form元素的action属性之间的冲突。

我们都知道可以使用 [form].submit(); 来动态提交表单,

但使用点击<a/>标签来提交表单, 会出现什么情况呢?

我们都知道, <a/>有个链接属性 href , 而form也有一个页面请求属性 action, 当两属性同时存在时, 点击<a/>当然会优先<a/>的href链接,

但如果是 <a href="javascript:;" ></a>, 又会是什么情况呢? 实践证明IE7.0+ , FF3.0+, Opera9.6+ 均能正确处理, 忽略<a/>的href, 执行表单的submit动作, 唯有 IE6 仍坚持着自己的原则, 只要有 href , 就只尝试执行链接 href , 除非你的<a/>标签中去掉 href属性, 但去掉 href 你将发现IE 下将不会出现下划线...

为更好体会该问题, 可以复制以下代码存为文件IE6和其它浏览器下对比运行即可...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>anchor and form</title>
</head>
<form method='get' action="www.baidu.com">
<input value='' name='kw'/>
</form>
<a id="submit" href="javascript:;" style="color:#333" >提交</a>
<script type="text/javascript">
document.getElementById('submit').onclick = function(){
document.forms[0].submit();
}
</script>
</head>
<body>
</body>
</html>