html中a连接触发表单提交

<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>test</title>
</head>
<body>

<a href = "javascript:;" onclick ="add('a','aa');">aaaaaa1</a><br />
<a href = "javascript:;" onclick ="add('b','b');">aaaaaa2</a><br />
<a href = "javascript:;" onclick ="add('c','c');">aaaaaa3</a><br />

<form action="test.php" method="post" name="argform" id="argform">
    <input type="hidden" name="a" id="a" value="a"/>
    <input type="hidden" name="b" id="b" value="b"/>
    <input type="hidden" name="c" id="c" value="c"/>
    <input type="submit" name="argsubmit" style="display:none"/>
</form>

<script type="text/javascript">
function add(key,value)
{
    document.getElementById(key).value = value;
    document.getElementById("argform").submit();
    //document.argform.submit();
    //document.getElementById("argsubmit").click();
}
</script>

</body>
</html>

注意:
①a连接中的href属性不能为空,不能为URL地址(为空相当于URL是本脚本的URL地址),这样会先提交到form表单中的action,再跳转到a标签中指定的地址,即使a标签中的超链接地址和form表单中的URL地址相同,也不能得到form表单的值

(我猜是)因为这相当于两次进入该页面:第一个是通过form跳转进入,第二个是通过a标签跳转。第二次的跳转将post清空了所以得不到值

②虽然form表单的提交是通过js触发的,但是form标签中也必须有<input type = "submit" .... />

③js触发提交有两种方法:触发form的submit();事件 || 触发提交按钮(submit)的click();事件。两个都可以我试过了


你可能感兴趣的:(js,form,超链接提交表单)