js的使用技巧1

Hou ShaoWei

于 2018-12-05 12:04:19 发布

阅读量122

点赞数

分类专栏： js的使用技巧文章标签： js

本文链接：https://blog.csdn.net/hsw201508130017/article/details/84827799

版权

js的使用技巧专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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();事件。两个都可以我试过了