表单提交javascript-JavaScript中form表单提交有哪些方法

2023-08-26 0 9,088 百度已收录

JavaScript中提交表单有三种方式:通过submit按钮直接提交表单、通过button按钮触发onclick风暴提交表单、通过submit按钮触发onsubmit风暴提交表单

表单提交是页面中非常常见的表单。 我将在文章中介绍几种实现表单提交的方法。 有一定的参考价值,希望对您有所帮助。

【推荐课程:javascript教程】

表单提交javascript-JavaScript中form表单提交有哪些方法

方法一

使用提交按钮实现表单提交的效果

例子:

表单提交javascript-JavaScript中form表单提交有哪些方法

    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();
            }
    

    用户帐号
登录密码

表单提交javascript-JavaScript中form表单提交有哪些方法

登录后复制

注意:该方法中,由于button键不具备手动提交的功能表单提交javascript,所以提交是通过JavaScript语句实现的

方式三

表单提交javascript-JavaScript中form表单提交有哪些方法

使用提交按钮提交表单。 当我们点击提交按钮时,首先会触发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;
         }


    用户帐号
登录密码

登录后复制

摘要:以上就是本文的全部内容。 希望这篇文章能够帮助您了解几种表单提交的方法。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 javascript 表单提交javascript-JavaScript中form表单提交有哪些方法 https://www.wkzy.net/game/152363.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务