JavaScript中form表单提交有哪几种方式

JavaScript中form表单提交有以下三种方式：通过submit按钮直接实现表单提交，通过button按钮触发onclick事件实现表单提交，submit按钮触发onsubmit事件实现表单提交

在页面中表单提交是一种很常见的方式，接下来在文章中为大家介绍几种办法来实现表单提交，具有必然的参照 价值，但愿对大家有所帮忙

【引荐课程：javascript教程】

办法一

通过使用submit按钮来实现表单提交结果

例：

<form action="demo.asp" method="post">
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="提交">
</form>
<script>
/*这里是提交表单前的非空校验*/
    $("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;
        }
    })
</script>

如上述代码所示当我们点击提交按钮时，表单数据会被发送到名为demo.asp的页面。submit按钮实现的表单提交是直接提交。但是我们可以通过某些办法实现表单提交前需要停止验证或者是按照本人的自定义需求来做表单提交

办法二

可以通过button按钮来实现表单提交，当点击button按钮时，触发onclick事件，由JavaScript里函数推断输入内容可否为空，假如为空，返回false, 此时就不会发生表单提交。假如不为空，则将表单提交到由action指定的地址。

<script type="text/javascript">
         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();
            }
    </script>
<form action="demo.asp" name="myform" method="post">
    会员帐号<input type=text name="userId" size="18" value="" ><br>
    登录密码<input type="password" name="password" size="19" value=""/>      
    <input type=button name="submit1" value="登陆" onclick="check(this.form)">  
</form>

留意：这个办法中由于button按钮不具备主动提交的功效，所以由JavaScript语句来实现提交

办法三

通过使用submit按钮实现表单提交。当我们点击submit按钮时，第一触发onsubmit事件，然后由JavaScript里的函数来推断输入内容可否为空，假如输入内容为空，则返回false, 表单不提交。假如输入内容不为空，则提交到由action指定的地址

<script type="text/javascript">
         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;
         }
</script>
<form action="demo.asp act=login" method="post" onsubmit="return check(this)">
    会员帐号<input type=text name="userId" size="18" value="" ><br>
    登录密码<input type="password" name="password" size="19" value=""/>      
    <input type=submit name="submit1" value="登陆"> 
</form>

总结：以上就是本篇文章的全部内容，但愿通过这篇文章可以帮忙大家学会form表单提交的几种方式。

以上就是JavaScript中form表单提交有哪几种方式的具体内容，更多请关注百分百源码网其它相关文章！