表单隐藏域与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 ...
随机推荐
- [pixhawk笔记]5-uORB消息传递
本文主要内容翻译自官方文档:https://dev.px4.io/en/middleware/uorb.html 在前一篇笔记中使用uORB完成消息传递,实现了一个简单示例程序,本文将对uORB进行系 ...
- Linux内存管理的基本框架⭐⭐
Linux内核的映射机制设计成三层,在页面目录和页面表中间增设了一层“中间目录”.在代码中,页面目录称为PGD,中间目录称为PMD,而页面表称为PT.PT中的表项称为PTE,PTE是“Page Tab ...
- springmvc.xml配置图解
- CentOS(64位)安装apr
安装apr来提高tomcat 的可伸缩性和性能 cd /usr/local/ 1. 下载apr 和 apr-util最新版 wget http://apache.fayea.com/apache-m ...
- C#中【正则表达式regular expression】相关的知识
Regex System.Text.RegularExpressions.Regex regex应该是regular expression的缩写 https://msdn.microsoft ...
- LaTeX模板 - FORMCM
LaTex 模板 - FORMCM \documentclass{mcmthesis} \mcmsetup{CTeX = true, % 使用 CTeX 套装时,设置为 true tcn = 8989 ...
- 在Jupyter notebook中使用特定虚拟环境中的python的kernel
在虚拟环境tf中安装完tensorflow后,在虚拟环境tf打开的jupyter里发现只有一个kernel-python3,新建一个文件, import tensorflow as tf ,发 ...
- 用cookies判断用户首次登录
要求:判断24小时内用户是否是首次登录,如果是则显示弹窗,如果不是则不再显示弹窗 (function() { //是否是新访客 function isNewVisitor() { //从cookie读 ...
- Android 进行解析并显示服务端返回的数据
例子说明:用户通过访问web资源的最新电影资讯,服务器端生成XML或JSON格式数据,返回Android客户端进行显示. 此案例开发需要两个方面 WEB开发和Android开发. 一.web开发相对比 ...
- offset的坑 使用前要将对象先show
使用jquery $('#obj').offset( {top:300, left: 600}); 如果设置offset之前是隐藏的,那么你设置新的offset之后就不会是指定的位置,而且会越飞越远, ...