我们都知道可以使用 [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>
但使用点击<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>
3221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
