有时候前端进行表单填写是分步骤的，每一步的时候其他步骤相关的表单视图不可见；

针对"不可见"，以下有两种处理方式：

①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的更多相关文章

  1. Servlet会话管理一（URL重写和表单隐藏域）

    会话可以简单的理解为客户端用户打开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器的整个过程称为一个会话.即一个客户端用户和服务器端进行通讯的过程,也是客户端和服务器端之间的数据传 ...

  2. jquery.validate 使用--验证表单隐藏域

    jQuery validate很不错的一个jQuery表单验证插件.升级到了1.9版的后,发现隐藏表单域验证全部失效,特别是在jquery.ui.tabs.min.js构造的Tabs里的验证. 是因为 ...

  3. jQuery validate验证隐藏表单(hidden)域

    validate很不错的一个jQuery表单验证插件.升级到了1.9版的后,发现隐藏表单域验证全部失效,特别是在jquery.ui.tabs.min.js构造的Tabs里的验证!网上一搜,也没查到是怎 ...

  4. 正则表达过滤表单隐藏元素，组装post数据

    <form name="form1" action="'.$serverUrl.'" method="post" > <i ...

  5. form 表单跨域提交

    <!DOCTYPE html><html> <head> <title>form 表单上传文件</title> <script src ...

  6. 常用js表单文本域验证

    1.验证是否为正确的邮箱地址 注意:本方法只能验证以@a.b结尾的邮箱地址,对于三级及三级以上的邮箱,比如@iie.ac.cn结尾的会出现错误 function isEmail(o){ var reg ...

  7. 获取表单select域的选择部分的文本

    body> <form action="index.php"> <select name="" id="select" ...

  8. 避免url传值字符串sjstr过长，使用from表单【隐藏域】post提交

    1.普通的url传值<html--------------- <!-- 隐藏域post提交url --> <form id="urlPost" action ...

  9. 12、Struts2表单重复提交

    什么是表单重复提交 表单的重复提交: 若刷新表单页面, 再提交表单不算重复提交. 在不刷新表单页面的前提下: 多次点击提交按钮 已经提交成功, 按 "回退" 之后, 再点击 &qu ...

随机推荐

  1. java语言学习笔记1

    最近也在春节的节假日里,总是会有各种各样的事情出现,没有很完整的时间来学习java以及其他方面的知识. 从昨天开始有了完整的学习体系,我去娄老师推荐的极客学院网站开始学习java语言的语法.在假期之初 ...

  2. 在eclipse搭建python开发环境

    在一次看别人帖子的时候发现,别人是用eclipse来写python代码的,所以好奇也想尝试一番,之前一直在用Pycharm,这个也确实是最好的开发python的IDE了,但是有时候也会有卡顿的情况,主 ...

  3. How to Enable RPMForge Repository in RHEL/CentOS 7.x/6.x/5.x

    RPMforge repository is a utility that is used to install third party software packages under Red Hat ...

  4. poj-2259 team queue（数据结构）

    第一遍看的时候立即想到了哈希表. 再想时觉得两个队列,一个用来排队伍之间的顺序,一个用来排队伍内部成员的顺序即足够了. DEQUE的时候先判断哪只队伍排在队首,之后再让该队伍中的首队员出列. 整体没有 ...

  5. UIAutomation学习入门

    一.界面的自动化操作 .Ui自动化测试 .软件外挂 二.Win32基础知识 a.Win32中一切元素皆窗口,窗口之间有父子关系.整个桌面是一个“根窗口”. b.进程: 根据进程id拿到进程对象Proc ...

  6. spring mvc: 属性方法名称解析器(多动作控制器)MultiActionController/ControllerClassNameHandlerMapping/PropertiesMethodNameResolver

    spring mvc: 属性方法名称解析器(多动作控制器) 加入控制器是StudentContrller.java,里面有3个方法 index,add,remove 那么访问地址是: http://l ...

  7. jqPaginator分页（ajax用法和form表单提交用法）

    一般使用方法 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...

  8. Repodata is over 2 weeks old. Install yum-cron? Or run: yum makecache

    1.事件描述:CentOS7下使用tree命令,发现该命令没有被安装,在安装的过程中发现yum报错 1 2 3 4 5 [root@openstack-01 ~]# tree -d bash: tre ...

  9. (2) iOS开发之UI处理-UILabel篇

    我们经常要根据内容去动态计算控件的高度,比如一个UILabel控件,常常要显示多行内容,并且计算出总高度,如果每个UILabel要多行显示,都要写这么一段代码是非常痛苦的,看代码如下:     我想大 ...

  10. 整合Struts2与Spring

    一.需要的JAR文件为:Spring和Struts2框架本身需要的JAR文件以及他们所依赖的JAR文件