JavaScript中提交表单有三种方式:通过submit按钮直接提交表单、通过button按钮触发onclick风暴提交表单、通过submit按钮触发onsubmit风暴提交表单
表单提交是页面中非常常见的表单。 我将在文章中介绍几种实现表单提交的方法。 有一定的参考价值,希望对您有所帮助。
【推荐课程:javascript教程】
方法一
使用提交按钮实现表单提交的效果
例子:
First name:
Last name:
/*这里是提交表单前的非空校验*/ $("form").submit(function () { var first = $("input[name='firstname']").val(); var last = $("input[name='lastname']").val(); if (first == "" || first == null || first == undefined) { alert("first"); return false;/*阻止表单提交*/ } else if (last == "" || last == null || last == undefined) { alert("last"); return false;/*阻止表单提交*/ } else { alert("提交"); return true; } })
登录后复制
如上面的代码所示,当我们点击提交按钮时,表单数据将被发送到名为demo.asp的页面。 通过提交按钮实现的表单提交是直接提交。我们可以使用单独的技术来实现提交表单之前验证的需要,或者根据自己的自定义需求来提交表单
方式二
表单的提交可以通过button按钮来实现。 当点击button按钮时,会触发onclick风暴,JavaScript中的函数判断输入内容是否为空。 如果为空则返回false,此时不会发生表单提交。 如果不为空,则将表单提交到操作指定的地址。
function check(form) { if(form.userId.value=='') { alert("请输入用户帐号!"); form.userId.focus(); return false; } if(form.password.value==''){ alert("请输入登录密码!"); form.password.focus(); return false; } document.myform.submit(); } 用户帐号
登录密码
登录后复制
注意:该方法中,由于button键不具备手动提交的功能表单提交javascript,所以提交是通过JavaScript语句实现的
方式三
使用提交按钮提交表单。 当我们点击提交按钮时,首先会触发onsubmit事件表单提交javascript,然后JavaScript中的函数会判断输入内容是否为空。 如果输入内容为空,则返回false,表单不会提交。如果输入内容不为空,则提交到action指定的地址
function check(form) { if(form.userId.value=='') { alert("请输入用户帐号!"); form.userId.focus(); return false; } if(form.password.value==''){ alert("请输入登录密码!"); form.password.focus(); return false; } return true; } 用户帐号
登录密码
登录后复制
摘要:以上就是本文的全部内容。 希望这篇文章能够帮助您了解几种表单提交的方法。