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

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. WebDriver API--元素定位

    WebDriver属于Selenium体系中设计出来操作浏览器的一套API, 站在WebDriver的角度, 因为它针对多种编程语言都实现了一遍这套API,所以它可以支持多种编程语言: 站在编程语言的 ...

  2. jupyter notebook安装/代码补全/支持golang 踩坑记

    安装(不要用root) 安装anaconda3,然后ln -s bin目录下的jupyter命令到/usr/bin目录下 生成密码备用 敲ipython进入交互终端 In [1]: from note ...

  3. 报错解决——xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

    一般在遇到这个问题的时候都是想用git或者svn,结果发现用不了并报错xcrun: error: invalid active developer path (/Library/Developer/C ...

  4. AppUtil

    import java.io.File;import java.util.ArrayList;import java.util.LinkedHashMap;import java.util.List; ...

  5. linux-grep-tail-find

    如果在只是想匹配模式的上下几行,grep可以实现. $grep -5 'parttern' inputfile //打印匹配行的前后5行 $grep -C 5 'parttern' inputfile ...

  6. 【UML】NO.50.EBook.5.UML.1.010-【UML 大战需求分析】- 考勤系统

    1.0.0 Summary Tittle:[UML]NO.50.EBook.1.UML.1.010-[UML 大战需求分析]- 考勤系统 Style:DesignPattern Series:Desi ...

  7. python selenium webdriver入门基本操作

    python selenium webdriver入门基本操作 未经作者允许,禁止转载! from selenium import webdriver import time driver=webdr ...

  8. 从零开始一起学习SLAM | 理解图优化，一步步带你看懂g2o代码

    首发于公众号:计算机视觉life 旗下知识星球「从零开始学习SLAM」 这可能是最清晰讲解g2o代码框架的文章 理解图优化,一步步带你看懂g2o框架 小白:师兄师兄,最近我在看SLAM的优化算法,有种 ...

  9. C#-----类FileStream的使用

    1.枚举类FileMode 指定操作系统打开文件的方式 CreateNew  指定操作系统应创建一个新的文件 Create  指定操作系统应创建一个新的文件. 如果该文件已存在,则会覆盖它 Open  ...

  10. 【报错原因】Uncaught SyntaxError: Unexpected token <

    实际上是当前页面引入的js文件路径找不到!!! 页面查找不到js文件自动跳转到404.html页面 域名+/404.html