JS提交表单form的方式

07-05 08:29 805浏览

举报 T字号

大字

中字

小字

第一种方式：表单提交，在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="//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="//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="//www.jb51.net">
<input type="text"/>
<input type="submit" value="submit" onsubmit="return validate()"/>
</form>
</body>

第四种方式：为submit按钮添加上onclick事件，其中该事件用于表单提交的验证，功能类似于在form标签中增加了onsubmit事件一样nclick="submitForm();"，会忽略掉其他标签中的属性，比如form标签中的onsubmit属性就失效了。这时为了进行表单验证，可以将验证代码放在submitForm();方法中进行验证

<script type="text/javascript">
function validate() {
if (confirm("提交表单?")) {
return true;
} else {
return false;
}
}
</script>
<body>
<form action="//www.jb51.net">
<input type="text"/>
<input type="submit" value="submit" onclick="return validate()"/>
</form>
</body>

动力节点在线课程涵盖零基础入门，高级进阶，在职提升三大主力内容，覆盖Java从入门到就业提升的全体系学习内容。全部Java视频教程免费观看，相关学习资料免费下载!对于火爆技术，每周一定时更新!如果想了解更多相关技术，可以到动力节点在线免费观看JavaScript视频教程学习哦!

0人推荐

共同学习，写下你的评论

0条评论

代码小兵498

153篇文章贡献528999字

JS提交表单form的方式

相关课程更多>

作者相关文章更多>

推荐相关文章更多>

发评论

举报

JS提交表单form的方式

相关课程 更多>

作者相关文章更多>

推荐相关文章更多>

发评论

举报

相关课程更多>