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

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. mongo笔记2

    速度和持久性 用户可以选择写入语义,决定是否开启journaling日志记录,通过这种方式来控制速度和持久性的平衡,默认情况下写入都是fire-and-forget,写操作通过tcp套接字发送,不要求 ...

  2. [dpdk][sysfs][pci] 在dpdk程序中操纵PCI设备

    〇  需求 在DPDK程序运行时,希望能够实时的操纵PCI 网卡设备的驱动绑定与解绑. 本文的目的是为了调查满足以上需求的,kernel提供的,标准的API都有几种,分别是什么.以确定实施方案. 一  ...

  3. linux下查看网卡速率

    转自:http://blog.csdn.net/liugongfeng/article/details/50263733 我们都知道ifconfig -a 可以列出所有网卡,但是怎么判读是千兆网卡还是 ...

  4. python框架之Flask(2)-路由和视图&Session

    路由和视图 这一波主要是通过看源码加深对 Flask 中路由和视图的了解,可以先回顾一下装饰器的知识:[装饰器函数与进阶] 路由设置的两种方式 # 示例代码 from flask import Fla ...

  5. js 整数型数组和字符型数组相互转换

    需求背景: 需要将 a = [1,2,3,4,5] 转换成  a = ['1','2','3','4','5'](整数型数组转换成字符型没找到直接的方法,思路就是先将数组转换成字符串,然后再将字符串转 ...

  6. sql 小技巧

    declare @pids varchar(max)='' ),pid)+','+@pids from product where pname like '%red%' select @pids

  7. 第十篇——Struts2的拦截器栈

    拦截器栈: 从结构上看:拦截器栈相当于多个拦截器的组合: 从功能上看:拦截器栈也是拦截器. 默认拦截器栈: 在struts-core.jar包中的struts-default.xml中自定义了一个de ...

  8. 20165215 2017-2018-2《Java程序设计》课程总结

    20165215 2017-2018-2<Java程序设计>课程总结 一.每周作业链接汇总 预备作业1:我期望的师生关系:令我记忆深刻的老师,期望的师生关系,本学期的学习规划. 预备作业二 ...

  9. 创建servlet程序知识点详解---servlet-day12

    自定义标签 (1)编程步骤 step1 jsp标签分为复杂标签技术(old),简单标签(new) 注(了解) jsp标签技术分为复杂标签技术(old),简单标签技术(new) step2 ###MVC ...

  10. week_one-python基础 基本语法、流程控制

    金角大王的紫金葫芦,python开发环境介绍链接:http://list.youku.com/albumlist/show/id_28961509.html # Author:larlly pytho ...