在我们工作中我们会经常使用到form表单，相信大家再熟悉不过了，那么提交表单有很多种方法，JavaScript提交表单的方法又是如何呢，今天就带大家介绍下JavaScript提交表单的几种方法！
第一种方式：表单提交，在form标签中增加onsubmit事件来判断表单提交是否成功
<script type="text/javascript">
function validate(obj) {
if (confirm("提交表单?")) {
alert(obj.value);
return true;
} else {
alert(obj.value);
return false;
}
}
</script>
<body>
<form action="http://www.jb51.net" onsubmit="return validate(document.getElementByIdx_x('myText'));"> <!—参数的这种写法注意下-->
<input type="text" id="myText"/>
<input type="submit" value="submit"/>
</form>
</body>登录后复制
第二种方式：通过button按钮来触发表单提交事件onclick="submitForm();"，会忽略掉其他标签中的属性，比如form标签中的onsubmit属性就失效了。这时为了进行表单验证，可以将验证代码放在submitForm();方法中进行验证。
<script type="text/javascript">
function validate() {
if (confirm("提交表单?")) {
return true;
} else {
return false;
}
}
function submitForm() {
if (validate()) {
document.getElementByIdx_x("myForm").submit();
}
}
</script>
<body>
<form action="http://www.jb51.net" id="myForm">
<input type="text"/>
<input type="button" value="submitBtn" onclick="submitForm();"/> <!—也可以使用document.getElementByIdx_x(“该按钮的id”).click();来执行onclick事件-->
</form>
</body>登录后复制
第三种方式：将onsubmit事件放在submit标签中，而不是form标签中，此时表单验证失效，点击提交按钮表单直接提交
<script type="text/javascript">
function validate() {
if (confirm("提交表单?")) {
return true;
} else {
return false;
}
}
</script>
<body>
<form action="http://www.jb51.net">
<input type="text"/>
<input type="submit" value="submit" onsubmit="return validate()"/>
</form>
</body>登录后复制
第四种方式：为submit按钮添加上onclick事件，其中该事件用于表单提交的验证，功能类似于在form标签中增加了onsubmit事件一样
<script type="text/javascript">
function validate() {
if (confirm("提交表单?")) {
return true;
} else {
return false;
}
}
</script>
<body>
<form action="http://www.jb51.net">
<input type="text"/>
<input type="submit" value="submit" onclick="return validate()"/>
</form>
</body>登录后复制
第五种方式：
<body>
<form action="http://www.jb51.net" id="myForm">
<input type="text"/>
<input type="button" value="submitBtn" id="myBtn"/>
</form>
</body>
<script type="text/javascript">
function validate() {
if (confirm("提交表单?")) {
return true;
} else {
return false;
}
}登录后复制
通过button按钮来触发表单提交事件onclick="submitForm();"，会忽略掉其他标签中的属性，比如form标签中的onsubmit属性就失效了。这时为了进行表单验证，可以将验证代码放在submitForm();方法中进行验证
function submitForm() {
if (validate()) {
document.getElementByIdx_x("myForm").submit();
}
}
document.getElementByIdx_x("myBtn").onclick = submitForm;
</script>登录后复制
总结：
通过对本文的介绍我们知道了JavaScript提交表单的多种方式，每个方法都有不同，小伙伴可以根据自己的需要选择一个，希望对你的工作有所帮助！
相关推荐：
简述JavaScript提交表单的方式 （Using JavaScript Submit Form）
以上就是JavaScript提交表单的几种方法的详细内容，更多请关注Work网其它相关文章！