登录  /  注册
首页 > web前端 > js教程 > 正文

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

清浅
发布: 2019-02-28 16:10:58
原创
8473人浏览过

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

在页面中表单提交是一种很常见的方式,接下来在文章中为大家介绍几种方法来实现表单提交,具有一定的参考价值,希望对大家有所帮助

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

【推荐课程: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=&#39;firstname&#39;]").val();
        var last = $("input[name=&#39;lastname&#39;]").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==&#39;&#39;) {
                    alert("请输入用户帐号!");
                    form.userId.focus();
                    return false;
               }
               if(form.password.value==&#39;&#39;){
                    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==&#39;&#39;) {
                    alert("请输入用户帐号!");
                    form.userId.focus();
                    return false;
               }
               if(form.password.value==&#39;&#39;){
                    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表单提交有哪几种方式的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号