表单隐藏域与display:none
有时候前端进行表单填写是分步骤的，每一步的时候其他步骤相关的表单视图不可见；
针对"不可见"，以下有两种处理方式：
①display：none
这种方式呢，比较简单，就是将三个步骤分3个div，事件触发相关视图的显示与隐藏；
②定位
这和轮播图的实现原理相同，三个步骤div作为行内块状元素，在一行排列，总宽度为width，并用一个大div包住，
称为wrapB；然后再在外面用wrapA包住；
wrapA（position:relative;overflow:hidden;）
wrapB（position:absolute;left:0px;）
然后点击事件，改变wrapB的left值（每次改变width/3）来实现步骤的切换。
对于两种方法的处理，我之前一直以为display:none之后，提交表单之后，对应的表单域获取不了值，因为
display:none了啊，今天项目上的一个问题，使得我回家做了一次实验来验证：到底display:none的表单域
能不能获取？
HTML：
<body>
<form id="form" action="http://localhost/index.php?c=api&m=demo" method="post">
<div class="none">
姓名：<input name="data[name]" type="text"></br>
年龄：<input name="data[age]" type="text"></br>
</div>
性别：<input name="data[gender]" type="text"></br>
学历：<input name = "data[education]" type="text"></br>
<button type="button" onclick="check()" style="width:6rem;height:2rem;">测试隐藏</button>
<button type="submit" style="width:6rem;height:2rem;">提交表单</button>
</form> <script>
function check(){
$(".none").hide();
var data = $("#form").serializeArray();
console.log(data);
}
</script>
</body>
前台页面：
点击隐藏：
接口代码：
public function demo(){
exit(json_encode($_POST['data']));
}
点击提交表单：
SO，事实证明，display:none后的表单域依旧可以传值，就和type="hidden"一样。
表单隐藏域与display:none的更多相关文章
- Servlet会话管理一（URL重写和表单隐藏域）
会话可以简单的理解为客户端用户打开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器的整个过程称为一个会话.即一个客户端用户和服务器端进行通讯的过程,也是客户端和服务器端之间的数据传 ...
- jquery.validate 使用--验证表单隐藏域
jQuery validate很不错的一个jQuery表单验证插件.升级到了1.9版的后,发现隐藏表单域验证全部失效,特别是在jquery.ui.tabs.min.js构造的Tabs里的验证. 是因为 ...
- jQuery validate验证隐藏表单(hidden)域
validate很不错的一个jQuery表单验证插件.升级到了1.9版的后,发现隐藏表单域验证全部失效,特别是在jquery.ui.tabs.min.js构造的Tabs里的验证!网上一搜,也没查到是怎 ...
- 正则表达过滤表单隐藏元素，组装post数据
<form name="form1" action="'.$serverUrl.'" method="post" > <i ...
- form 表单跨域提交
<!DOCTYPE html><html> <head> <title>form 表单上传文件</title> <script src ...
- 常用js表单文本域验证
1.验证是否为正确的邮箱地址 注意:本方法只能验证以@a.b结尾的邮箱地址,对于三级及三级以上的邮箱,比如@iie.ac.cn结尾的会出现错误 function isEmail(o){ var reg ...
- 获取表单select域的选择部分的文本
body> <form action="index.php"> <select name="" id="select" ...
- 避免url传值字符串sjstr过长，使用from表单【隐藏域】post提交
1.普通的url传值<html--------------- <!-- 隐藏域post提交url --> <form id="urlPost" action ...
- 12、Struts2表单重复提交
什么是表单重复提交 表单的重复提交: 若刷新表单页面, 再提交表单不算重复提交. 在不刷新表单页面的前提下: 多次点击提交按钮 已经提交成功, 按 "回退" 之后, 再点击 &qu ...
随机推荐
- 20145312 《Java程序设计》第五周学习总结
20145312 <Java程序设计>第五周学习总结 学习笔记 Chapter8 异常处理 8.1语法与继承架构 1.Java中的错误以对象方式呈现,只要捕捉包装错误的对象,就可以针对该错 ...
- Mac中MacPorts安装和使用 MacPorts简介
MacPorts,曾经叫做DarwinPorts,是一个软件包管理系统,用来简化Mac OS X和Darwin操作系统上软件的安装.它是一个用来简化自由软件/开放源代码软件的安装的自由/开放源代码项目 ...
- 在linux上使用tomcat服务器图片验证码不显示问题
背景描述:在liunx系统上,使用tomcat中间件,访问web项目,登录页面的图片验证码显示不出来,但是在window系统上可以正常显示 解决方案:设置一下这个文件tomcat/bin/catali ...
- java和groovy的混用
java在语言的动态性方便不是很灵活,如果你想快速增加或改变一些方法,那么只能通过反射机制,并且参数传递的格式很严格. 相比之下,基于groovy可以快速写出一些自定义方法,并能和java很好结合,类 ...
- Dancing Links DLX
Dancing Links DLX Dancing Links 用来解精准覆盖问题. 精准覆盖问题有两种版本. 精准覆盖 : 给一个01矩阵,如何选出若干行,使得每列都有且仅有一个1. 可以求最少行数 ...
- Maven打包命令
mvn clean 会把原来target目录给删掉重新生成.mvn install 安装当前工程的输出文件到本地仓库,然后打包mvn clean install 先删除target文件夹 ,然后打包到 ...
- R中去除为NA的行--转载
下面用实例来说明这两个函数的作用: 这是一个数据框final: gene hsap mmul mmus rnor cfam 1 ENSG00000208234 0 NA NA NA NA 2 ENSG ...
- 数据库原理及应用-SQL数据操纵语言（Data Manipulation Language）和嵌入式SQL&存储过程
2018-02-19 18:03:54 一.数据操纵语言(Data Manipulation Language) 数据操纵语言是指插入,删除和更新语言. 二.视图(View) 数据库三级模式,两级映射 ...
- 分布式缓存集群方案特性使用场景（Memcache/Redis(Twemproxy/Codis/Redis-cluster)）优缺点对比及选型
分布式缓存集群方案特性使用场景(Memcache/Redis(Twemproxy/Codis/Redis-cluster))优缺点对比及选型 分布式缓存特性: 1) 高性能:当传统数据库面临大规模 ...
- Codeforces Round #400
最近好像总是有点不想打,专题也刷不动,还是坚持这做了一场,虽然打到一半就没打了...(反正通常都只能做出两题) 感觉自己切水题越来越熟练了,然而难题还是不会做.. A题,水,用vector存下来就行了 ...