第一种方式 ：

表单提交，在 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="XXX" 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="XXXX" 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="XXXX">
        <input type="text"/>
        <input type="submit" value="submit" onsubmit="return validate()"/>
    </form>
</body>

第四种方式 ：

为 submit 按钮添加上 onclick 事件，其中该事件用于提交表单的验证，功能类似在 form 标 签中增加了 onsubmit 事件一样

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

JS表单提交的几种方式的更多相关文章

  1. asp.net mvc表单提交的几种方式

    asp.net MVC中form提交和控制器接受form提交过来的数据 MVC中form提交和在控制器中怎样接受 1.cshtml页面form提交2.控制器处理表单提交数据4种方式方法1:使用传统的R ...

  2. Form 表单提交的几种方式

    简单的总结一下form表单提交的几种方式:1.最简单的方式 就用form的submit提交方式,这种提交方式是不需要回调函数的   这种方式最近到一个form提供action路径后台接受就可以< ...

  3. flask表单提交的两种方式

    一.通用方式 通用方式就是使用ajax或者$.post来提交. 前端html <form method="post" action="/mockservice&qu ...

  4. 表单提交的3种方式，http post的contentType

    application/x-www-form-urlencoded:窗体数据被编码为名称/值对.这是标准的编码格式.这是默认的方式 multipart/form-data:窗体数据被编码为一条消息,页 ...

  5. form表单提交的几种方法

    form表单提交的几种方法 <form id="myform" name="myform" method="post" onsubmi ...

  6. 原生JS 表单提交验证器

    转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部 ...

  7. js表单提交,面向对象

    一.js表单验证之后再提交 1.普通按钮onclick函数调用表单的submit()函数 <input type=button name="submit1" value=&q ...

  8. vue---阻止默认表单提交的三种方法

    vue在做表单提交的时候,需要用到一些自定义的验证规则,这个时候就需要阻止表单默认的提交方式. 方法一:直接阻止 <form id="form" @submit=" ...

  9. js表单提交，判断文本框，用户名密码是否为空，JS表单检测!

    当表单提交时先触发验证的js代码,当验证表单的方法返回true时才会提交表单返回false则不提交数据<script type="text/javascript">fu ...

随机推荐

  1. 打开safari开发者选项

    1.点击Safari启动浏览器 2.点击左上Safari标志,选择偏好设置 3.选择高级,勾选下方的在菜单栏显示开发菜单. 如此,Safari就出现了开发菜单,右键网页元素也会出现查看元素功能了.

  2. UIButton和UIimageView

    1.按钮控件使用的类是UIButton 点击按钮会触发某个事件 2.按钮控件的初始化 UIButton *button = [UIButton buttonWithType:UIButtonTypeC ...

  3. 别只用hive写sql -- hive的更多技能

    hive是Apache的一个顶级项目,由facebook团队开发,基于java开发出面向分析师或BI等人员的数据工具(常用作出具仓库),它将文件系统映射为表,使用SQL实现mapreduce任务完成分 ...

  4. spring的配置文件和加载

    ①:创建applicationContext.xml配置文件放在src下 //applicationContext.xml代码 <?xml version="1.0" enc ...

  5. 201521123089 《Java程序设计》第7周学习总结

    一.本周学习总结 1.以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 二.书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 如果对象为空,ele ...

  6. 201521123058 java第六次作业

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2. 书面作业 1.clone方法 1.1 Object对 ...

  7. 201521123027 <java程序设计>第九周学习总结

    1.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2.书面作业 Q1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什 ...

  8. sublime text3 好用的插件！！！

    1.首先,你要保证sublime有Package Control,所以,如果没有,那么将Ctrl+`打开sublime控制台,将下列代码复制进去! import urllib.request,os; ...

  9. json：JSONObject包的具体使用（JSONObject-lib包是一个beans,collections,maps,java arrays和xml和JSON互相转换的包）

    1.JSONObject介绍 JSONObject-lib包是一个beans,collections,maps,java arrays和xml和JSON互相转换的包. 2.下载jar包 http:// ...

  10. Struts2配置文件复用代码【web.xml、struts.xml、常量配置】

    web.xml的分发器代码: <!-- 引入struts核心过滤器 --> <filter> <filter-name>struts2</filter-nam ...