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

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. 记录常用的adb命令

    1.启动adb服务 adb start-server 2.关闭服务 adb kill-server 3.进入shell环境 adb shell 4.安装应用 adb install -r xxx.ap ...

  2. Ubuntu上Qt+Tcp网络编程之简单聊天对话框

    首先看一下实现结果: >>功能: (1)服务器和客户端之间进行聊天通信: (2)一个服务器可同时给多个客户端发送消息:(全部连接时)   也可以只给特定的客户端发送消息:(连接特定IP) ...

  3. vue 自适应 Responsive 设计

    使用阿里的 lib-flexible 及 vue-meta 库: https://github.com/amfe/lib-flexible/ https://github.com/nuxt/vue-m ...

  4. 【JVM】-NO.110.JVM.1 -【hsdis jitwatch 生成查看汇编代码】

    Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of ...

  5. 使用maven搭建springMVC开发环境

    1.引入框架所需的包,pom.xml文件中添加如下配置: <dependency> <groupId>org.springframework</groupId> & ...

  6. SpringMVC控制器方法参数传入的ModelMap 和Model类型有啥区别

    参考 http://blog.csdn.net/u013067598/article/details/69372309 http://blog.csdn.net/u013686993/article/ ...

  7. windows程序设计 获取显示器分辨率

    我的显示器分辨率 /*--------------------------------------------------------------------------- scrsize.c -- ...

  8. acm 2015北京网络赛 F Couple Trees 主席树+树链剖分

    提交 题意:给了两棵树,他们的跟都是1,然后询问,u,v 表 示在第一棵树上在u点往根节点走 , 第二棵树在v点往根节点走,然后求他们能到达的最早的那个共同的点 解: 我们将第一棵树进行书链剖,然后第 ...

  9. 后端解决 微信H5支付 商户参数格式错误 方法

    问题如图: 后端解决方法: 在返回mweb_url 后不要直接访问这个链接,在当前页面用js window.location.href = mweb_url 这样跳转就可以了

  10. 安装Joomla!3

    在日常测试中搭建一个web 站点进行进行linux 相关功能测试,只是不喜欢httpd 或者nginx 的默认界面: 安装Joomla!3: 系统:centos 7 软件:  连接: https:// ...