开发中表单提交是很常见的，表单的提交方式也多种方式。

1.使用submit按钮提交表单  <input type="submit"/>

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>form表单提交方式</title>

</head>

<body>

<form action="demo_form.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>

</body>

</html>

当您点击提交按钮，表单数据会被发送到名为demo_form.asp的页面。submit按钮提交表单，表单直接被提交了！当然提交表单前可能需要进行验证，可以根据自己的需求做表单提交【校验请看Jquery部分代码】

如果不喜欢用$(selector).submit(function) 提交方法，也可以使用 onsubmit="return function()"方法进行提交验证。代码如下：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>form表单提交方式</title>

</head>

<body>

<form id="Form" action="" method="post" onsubmit="return checkForm();">

    <!--直接提交-->

    <input id="first" type="text" name="dingdanhao"><input id="chaxun" type="submit" value="查询"><br>

    First name:<br>

    <input id="last" type="text" name="firstname"><br>

    Last name:<br>

    <input type="text" name="lastname"><br><br>

    <input id="tj" type="submit" value="提交">

</form>

<script src="jquery.js"></script>

<script>

    /*这里是提交表单前的非空校验*/

    function checkForm () {

        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>

</body>

</html>

注释：

onsubmit直接写false表单还是会被提交。

表单的onsubmit事件句柄（比如：onsubmit="return false"）不会执行。 不能保证由其一定会被HTML用户代理调用。

如果一个表单空间（比如一个submit类型的按钮）的name 或者id值为"submit"，则它将覆盖表单的submit方法。

2.使用button按钮提交表单 <input type="button"/>

（1）可以直接将 上述方法1中的<input type="submit" value="提交">直接换成<input type="button" value="提交">

（2） 方法差不多  没啥区别 直接贴代码

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>form表单提交方式</title>

</head>

<body>

<form id="Form" action="" method="post" >

    <!--直接提交-->

    <input type="text" name="dingdanhao"><input id="chaxun" type="submit" value="查询"><br>

    First name:<br>

    <input type="text" name="firstname"><br>

    Last name:<br>

    <input type="text" name="lastname"><br><br>

    <input id="tj" type="button" value="提交" onclick="checkForm();">

</form>

<script src="jquery.js"></script>

<script>

    /*这里是提交表单前的非空校验*/

    function checkForm () {

        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("提交")

            $("#Form").submit();

        }

    }

</script>

</body>

</html>

3.利用js进行表单提交，将form表单进行标记，将form表单中的某个元素设置点击事件，点击时调用js函数，再用js：如 $("#id").submit();等方法提交表单。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>form表单提交方式</title>

</head>

<body>

<form id="Form" action="" method="post" onsubmit="return checkForm();">

    <!--直接提交-->

    <input id="first" type="text" name="dingdanhao"><input id="chaxun" type="submit" value="查询"><br>

    First name:<br>

    <input id="last" type="text" name="firstname"><br>

    Last name:<br>

    <input type="text" name="lastname"><br><br>

    <button type="button" onclick="subForm();">js提交</button>

</form>

<script src="jquery.js"></script>

<script>

    /*这里是提交表单前的非空校验*/

    function checkForm () {

        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;

        }

    }

    function subForm(){

        $("#Form").submit();

    }

</script>

</body>

</html>

4.<input type="image" src=""> 图片提交表单，将input的属性设置为image时，点击图片也可触发form表单的提交。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>form表单提交方式</title>

</head>

<body>

<form id="Form" action="" method="post" onsubmit="return checkForm();">

    <!--直接提交-->

    <input id="first" type="text" name="dingdanhao"><input id="chaxun" type="submit" value="查询"><br>

    First name:<br>

    <input id="last" type="text" name="firstname"><br>

    Last name:<br>

    <input type="text" name="lastname"><br><br>

    <input type="image" src="btn.png" style="width: 50px;height: 50px">

</form>

<script src="jquery.js"></script>

<script>

    /*这里是提交表单前的非空校验*/

    function checkForm() {

        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>

</body>

</html>

参考资料地址：http://blog.csdn.net/s_liuxin_s/article/details/51011821

form表单的提交方式的更多相关文章

  1. 利用 ajax自定义Form表单的提交方式

    需求场景:有时候单纯的form表单无法向后端传递额外的参数 比如需要action传递js异步生成的参数 ,form表单默认的action就无法满足需求,这时就需要我们自定义form表单的提交方式. h ...

  2. form表单以get方式提交时action中?后面的参数部分不生效

    form表单的提交方式是get方式,action="?sss=test",问号后面参数是接受不到的,谨记!

  3. JavaScript 创建一个 form 表单并提交

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  4. 使用ajax方法实现form表单的提交(附源码)

    写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...

  5. 使用ajax方法实现form表单的提交

    作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 写在前面的话 在使用form表单的时候,一旦点击提交触发submit ...

  6. JavaWeb学习总结（十一）：Session解决form表单重复提交

    在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提 ...

  7. form表单js提交

    form表单js提交      $('#form1').submit(); 延迟form表单提交 function submitcheck() { $('#light').css('display', ...

  8. 微信自带浏览器不支持form表单post提交方案解决

      微信自带浏览器form表单post提交,Java控制后台获取不到值得解决方案: 第一种:把post改成get请求,但是改后另一个问题来了就是,数据不安全了,连接上都能看到,导致数据会流失,Java ...

  9. 基于form表单submit提交不跳转

    方法一:target <html> <body> <form action="" method="post" target=&qu ...

随机推荐

  1. Elasticsearch学习笔记（二）Search API 与 Query DSL

    一. Search API eg: GET /mall/product/_search?q=name:productName&sort=price desc 特点:search的请求参数都是以 ...

  2. python练习题-day15

    1.请利用filter()过滤出1~100中平方根是整数的数,即结果应该是: [1, 4, 9, 16, 25, 36, 49, 64, 81, 100] 2.列表按照其中每一个值的绝对值排序 li ...

  3. 使用APScheduler启动Django服务时自动运行脚本（可设置定时运行）

    Django搭建的服务器一般都用作WEB网站进行访问,通常的形式是用户访问网站或点击按钮发送请求,Django检测到请求后进行相应的试图函数处理后返回页面给用户. 但是,我们有时会需要有一些后台自动运 ...

  4. CSS中list-style详解

    取消默认的圆点和序号可以这样写list-style:none;, list的属性如下: list-style-type:square;//正方形 list-style-position:inside; ...

  5. Linux的is not in the sudoers file 解决

    https://blog.csdn.net/hxpjava1/article/details/79566822

  6. pprint

    pprint = pretty printer 经常用来打印 字典.json 打印出的格式会是较为标准的格式 目的:方便调试,查看中间结果,因为觉得设断点调试相对麻烦. [运行环境:macOS 10. ...

  7. Codeforces 799D Field expansion(随机算法)

    Field expansion [题目链接]Field expansion [题目类型]随机化算法 &题解: 参考自:http://www.cnblogs.com/Dragon-Light/p ...

  8. 027-Session状态提供程序

    Session分三种:1.InProc(进程内)-默认就是这种-速度快/但内存小/易丢失进程外:可以在IIS或ASPNET服务意外关闭时继续保持状态,注意此时存储到session中的对象必须支持序列化 ...

  9. python工具的选择

    自己喜欢用pycharm,下载地址:https://www.jetbrains.com/products.html#lang=python 补丁地址:http://idea.lanyus.com/

  10. vue安装，router-link的一些属性，用法，tag active-class，to,replace,exex等等

    第一步:$ npm install -g vue-cli 第二部:$ vue init webpack my-projectName 下面内容转载自:https://www.cnblogs.com/c ...