表单隐藏域与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" οnclick="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"一样。

 

转载于:https://www.cnblogs.com/eco-just/p/9643887.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/451325.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

视频领域的Instagram:Viddy用户突破2600万

北京时间5月9日消息&#xff0c;据TheNextWeb报道&#xff0c;视频分享应用Viddy的注册用户数量已经达到2600万&#xff0c;而上个月的用户数量还是650万。日均增长用户超过50万&#xff0c;成绩斐然&#xff0c;投资者对Viddy目前的增长表示很满意。 Viddy是如何达到这样的成…

log 的 debug()、 error()、 info()方法的区别

软件中总免不了要使用诸如 Log4net, Log4j, Tracer 等东东来写日志&#xff0c;不管用什么&#xff0c;这些东东大多是大同小异的&#xff0c;一般都提供了这样5个日志级别&#xff1a; Debug Info Warn Error Fatal 一个等级比一个高&#xff0c;但…

存储容量(空间)换算公式(B、KB、MB、GB、TB、PB、EB)

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 <strong>存储容量&#xff1a;是该存储设备上可以存储数据的最大数量&#xff0c;通常使用千字节&#xff08;kb kilobyte&#x…

如何防止表单的重复提交

表单重复提交是在多用户Web应用中最常见、带来很多麻烦的一个问题。有很多的应用场景都会遇到重复提交问题&#xff0c;比如&#xff1a; (1)点击提交按钮两次。 (2)点击刷新按钮。 (3)使用浏览器后退按钮重复之前的操作&#xff0c;导致重复提交表单。 (4)使用浏览器历史记录重…

GDB调试精粹及使用实例

一&#xff1a;列文件清单 1&#xff0e; List (gdb) list line1,line2 二&#xff1a;执行程序 要想运行准备调试的程序&#xff0c;可使用run命令&#xff0c;在它后面可以跟随发给该程序的任何参数&#xff0c;包括标准输入和标准输出说明符(<和>)和外壳通配符&a…

如何使用log.debug()

log4j是一个开源的日志&#xff0c;共分为六个等级&#xff1a;LOG、DEBUG、INFO、WARN、ERROR、和FATAL。 DEBUG是其中的一种日志级别。一般我们用这个方法的时候都是这样的&#xff1a; if(log.isDebugEnabled()){log.debug("debug&#xff01;"); } 意思是&am…

写给大数据开发初学者的话

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 导读&#xff1a; 第一章&#xff1a;初识Hadoop 第二章&#xff1a;更高效的WordCount第三章&#xff1a;把别处的数据搞到Hadoop上第…

2018年7月份,python上传自己的包库到pypi官网的方法

最近pypi官网进行了更新&#xff0c;老的上传网址作废了。记录下上传到pypi的方法 0、去pypi官网注册账号&#xff0c;没账号是不可能上传的&#xff0c;想想也是那不乱套了吗&#xff0c;注册后会收到一个邮件需要点击然后重新登录 1、目录就是这样 &#xff0c;我要上传muli…

linux系统C语言学习总结

引言   尽管 C 语言问世已近 30 年&#xff0c;但它的魅力仍未减退。C 语言继续吸引着众多的开发者&#xff0c;他们为了编写、移植或维护应用程序而必须学习新技能。   本文是为了满足对C语言初学者或想提高自身C语言修为的开发人员的需要而写的。希望对您的学习和工作有…

redis 删除操作

Redis 键(key) Redis 键命令用于管理 redis 的键。 语法 Redis 键命令的基本语法如下&#xff1a; redis 127.0.0.1:6379> COMMAND KEY_NAME 实例 redis 127.0.0.1:6379> SET runoobkey redis OK redis 127.0.0.1:6379> DEL runoobkey (integer) 1 在以上实例中 DEL 是…

写给大数据开发初学者的话2

见 : http://lxw1234.com/archives/2016/11/782.htm 如果你已经按照《写给大数据开发初学者的话》中第一章和第二章的流程认真完整的走了一遍&#xff0c;那么你应该已经具备以下技能和知识点&#xff1a; 0和Hadoop2.0的区别&#xff1b;MapReduce的原理&#xff08;还是那个…

Pandas的结构和应用

Pandas处理以下三个数据结构 - 系列(Series)----一维ndarray   特点&#xff1a;带有标签&#xff0c;可以使用标签作为索引&#xff0c;大小不能改变&#xff0c;内部数据可以改变。 属性&#xff1a;与NumPy类似&#xff0c;多了一个轴标签axis lables 数据…

JZOJ5857 【NOIP提高组模拟A组2018.9.8】没有上司的舞会

题目 Description “那么真的有果尔德施坦因这样一个人?”他问道。 “是啊&#xff0c;有这样一个人&#xff0c;他还活着。至于在哪里&#xff0c;我就不知道了。” “那么那个密谋——那个组织?这是真的吗?不是秘密警察的捏造吧?” “不是&#xff0c;这是真的。我们管…

python 中如何判断list中是否包含某个元素

在python中可以通过in和not in关键字来判读一个list中是否包含一个元素 theList [‘a’,’b’,’c’] if ‘a’ in theList: print ‘a in the list’ if ‘d’ not in theList: print ‘d is not in the list’

时间即财富:创业者浪费精力的八个错误

导读&#xff1a;本文作者Jeff Miller是美食网页应用Punchfork的创始人&#xff0c;同时也是DuckDuckGo、Ginzametrics、Art.sy、DataMinr以及Forkly的投资人。作者通过对自己创业初期一些错误选择进行盘点&#xff0c;告诉读者在创业初期应该学会选择&#xff0c;因为在创业初…

写给大数据开发初学者的话3

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 如果你已经按照《写给大数据开发初学者的话2》中第三章和第四章的流程认真完整的走了一遍&#xff0c;那么你应该已经具备以下技能和知识…

十五周二次课

18.6 负载均衡集群介绍 主流开源软件LVS、keepalived、haproxy、nginx等其中LVS属于4层&#xff08;网络OSI 7层模型&#xff09;&#xff0c;nginx属于7层&#xff0c;haproxy既可以认为是4层&#xff0c;也可以当做7层使用keepalived的负载均衡功能其实就是lvslvs这种4层的负…

LeetCode--171--Excel表列序号

问题描述&#xff1a; 给定一个Excel表格中的列名称&#xff0c;返回其相应的列序号。 例如&#xff0c; A -> 1B -> 2C -> 3...Z -> 26AA -> 27AB -> 28 ...示例 1: 输入: "A" 输出: 1示例 2: 输入: "AB" 输出: 28示例 3: 输入: "…

中国历代王朝大排名

中国自秦以降&#xff0c;一共出过九个大王朝&#xff0c;它们是&#xff1a;秦、汉、晋、隋、唐、宋、元、明、清。另外&#xff0c;还出过五十几个小王朝&#xff0c;它们是&#xff1a; 三国时的魏、蜀、吴&#xff0c;共三个&#xff1b; [ 转自铁血社区 http://bbs.tiexue…

写给大数据开发初学者的话4

见&#xff1a;http://lxw1234.com/archives/2016/11/795.htm 如果你已经按照《写给大数据开发初学者的话3》中第五章和第六章的流程认真完整的走了一遍&#xff0c;那么你应该已经具备以下技能和知识点&#xff1a; 为什么Spark比MapReduce快。使用SparkSQL代替Hive&#xff…