form表单的提交方式
开发中表单提交是很常见的，表单的提交方式也多种方式。
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表单的提交方式的更多相关文章
- 利用 ajax自定义Form表单的提交方式
需求场景:有时候单纯的form表单无法向后端传递额外的参数 比如需要action传递js异步生成的参数 ,form表单默认的action就无法满足需求,这时就需要我们自定义form表单的提交方式. h ...
- form表单以get方式提交时action中?后面的参数部分不生效
form表单的提交方式是get方式,action="?sss=test",问号后面参数是接受不到的,谨记!
- JavaScript 创建一个 form 表单并提交
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- 使用ajax方法实现form表单的提交(附源码)
写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...
- 使用ajax方法实现form表单的提交
作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 写在前面的话 在使用form表单的时候,一旦点击提交触发submit ...
- JavaWeb学习总结（十一）：Session解决form表单重复提交
在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提 ...
- form表单js提交
form表单js提交 $('#form1').submit(); 延迟form表单提交 function submitcheck() { $('#light').css('display', ...
- 微信自带浏览器不支持form表单post提交方案解决
微信自带浏览器form表单post提交,Java控制后台获取不到值得解决方案: 第一种:把post改成get请求,但是改后另一个问题来了就是,数据不安全了,连接上都能看到,导致数据会流失,Java ...
- 基于form表单submit提交不跳转
方法一:target <html> <body> <form action="" method="post" target=&qu ...
随机推荐
- springboot 2.0部署到Tomat8.5上
1.改jar为war 2.改下打包的名字 3.删掉tomcat的webapps下面的所有文件夹.将打好的jar包放入到webapps下 4.运行tomcat,双击shutdown.bat 注意: sp ...
- Source Insight中文注释乱码、字体大小、等宽解决方法
中文注释乱码解决方法: 用记事本打开源文件,然后,选择文件->另存为,编码选为”ANSI“ 字体的调整: Source Insight 菜单栏选择Options->Document O ...
- 删除64位ODBC数据源DNS
1.按照打开管理工具-打开数据源(ODBC),进入如下界面,选择用户DSN删除,发现报错一直删除不了. 2.成功删除:进入如下图路径,打开ODBC数据源管理工具,选择要删除的DSN就可以成功删除啦.
- Cutterman - 最好用的切图工具
Cutterman - 最好用的切图工具 http://www.cutterman.cn/zh/cutterman
- protocol buffer简介
一.protocol buffer简介 protocol buffer(简称PB)是google开源的一个数据序列化与反序列化工具,由于其支持多种语言.各种平台,多被用于对象的存储,远程调用等方向.用 ...
- [macOS] keychain的跳坑之旅！git拉取的权限问题
故事背景,svn与git各有长处,不过git大势所趋吧,那就搞搞.git的服务端,是基于phabricator搭建的,关于它的资料自行google就好了.其实之前运维已经搭好了phabricator了 ...
- Docker 基础 (二)
网络管理 容器网络模式 Docker支持5种网络模式 bridge 默认网络,Docker启动后默认创建一个docker0网桥,默认创建的容器也是添加到这个网桥中 host 容器不会获得一个独立的n ...
- thymeleaf 添加语法提示
thymeleaf 添加语法提示: xmlns:th="http://www.thymeleaf.org"
- git常用操作记录
之前的多人项目大多使用了SVN作为版本控制,自己只会用eclipse连接GitHub的操作.这次项目采用了git作为版本控制系统,所以学会了很多新操作,这里权当记录,以备后用. git的一些基本操作可 ...
- jenkins git can't work ERROR: Timeout after 10 minutes ERROR: Error fetching remote repo 'origin'
Started by user Allen Running as Allen Building remotely on MISTestSrv2 (MIS) in workspace C:\jenkin ...