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

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. sql 范式:1NF、2NF、3NF、BCNF（函数依赖）

    第一范式(1NF) 每个属性都是不可分的基本数据项.(必须有主键,列不可分) eg:非第一范式的表:(列可再分) 学院名称 高级职称人数 教授 副教授 信电学院 3 34 管理学院 5 23 外语学院 ...

  2. Spring Jdbc 框架整合的第一天

    Spring  Jdbc的概述 它是Spring框架的持久层子框架.用于对数据库的操作 什么是数据库的操作? 答:对数据库的增删改查 在使用Spring  Jdbc框架,要用到一个类---->J ...

  3. java框架之SpringBoot(7)-异常处理

    前言 在 SpringBoot 项目中,默认情况下,使用浏览器访问一个不存在的地址会返回如下错误页面: 而当客户端未非浏览器时,错误信息则会以 json 数据返回,如下: 会出现如上效果的原因是 Sp ...

  4. python数据结构-如何实现用户的历史记录功能

    如何实现用户的历史记录功能 使用collections中的deque from collections import deque dq = deque([], 5) dq.append(1) dq.a ...

  5. 手把手教你安装mac版hadoop2.7.3教程

    一.准备教程 1.jdk:版本在1.7.x以上就可以(因为hadoop2.x以上只支持1.7.x以上的jdk,我的是1.8的) 2.Hadoop:2.7.3 二.ssh的配置以及验证 配置ssh: 1 ...

  6. phpstorm----------phpstorm2017基本使用

    1.关闭2017版本的,函数参数提示.关闭方式如下: 2.如何设置代码里面的变量等号对齐,和key => value 对齐     ctrl+alt+l 3.修改PHP文件类创建的默认注释 4. ...

  7. [macOS] error when brew updating

    I want to update the brew, then run brew update but unluckly, i got these error /usr/local/Library/b ...

  8. （转载）关于管理计算机\\xp1 找不到网络路径的解决方案

    关于管理计算机\\xp1 找不到网络路径的解决方案 使用域管理员登录域控DC,然后打开AD用户和计算机 选择一台域成员计算机,然后选择管理,结果出现如下提示:点击确定后出现如下提示随后,立刻用域管理员 ...

  9. 小程序canvas生成海报保存至手机相册

    小程序canvas画图保存至手机相册 (1)可直接展示生成的海报 .因手机分辨率不同可能导致生成的海报会有细微差别,这里隐藏canvas海报,页面正常设置海报样式保存时保存隐藏的canvas海报 (2 ...

  10. ASP.NET页面之间传值的方式之Session（个人整理）

    Session Session在ASP.NET中,表示客户端(Goggle,Firefox,IE等)与服务器端的会话,用来存储特定会话信息,准确来说,是用来存储特定用户信息.当客户端向服务器发送一个请 ...