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

针对"不可见",以下有两种处理方式:

①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. BeanFactory与ApplicationContext

    本文总结自:https://www.cnblogs.com/xiaoxi/p/5846416.html 我们常说的Spring容器(即Spring Ioc 容器),是如何创建bean的? BeanFa ...

  2. Android中C可执行程序编译问题

    make:进入目录'/opt/FriendlyARM/tiny4412/android/android-4.1.2'make: *** 没有规则可以创建“out/target/product/gene ...

  3. JavaScript中字符操作之大小写转换

    1.toUpperCase()   方法用于把字符串转换为大写 var str = prompt("请输入需转换大写的字符串:"); str = str.toUpperCase() ...

  4. Java 面试题基础概念收集(高级)

    JVM垃圾回收: GC又分为 minor GC 和 Full GC (也称为 Major GC ).Java 堆内存分为新生代和老年代,新生代中又分为1个 Eden 区域 和两个 Survivor 区 ...

  5. 什么是浮动IP

    源地址:https://www.1and1.com/digitalguide/server/know-how/what-is-a-floating-ip/ What is a floating IP? ...

  6. RabbitMQ延迟队列

    rabbitmq延迟队列 rabbitmq实现延迟队列用了rabbitmq-delayed-message-exchange插件,需要提前安装,并启用. 原理 其原理是通过Exchange来实现延迟功 ...

  7. 【bzoj2333 & luoguP3273】棘手的操作(线段树合并)

    题目传送门:bzoj2333 luoguP3273 这操作还真“棘手”..听说这题是可并堆题?然而我不会可并堆.于是我就写了线段数合并,然后调了一晚上,数据结构毁一生!!!QAQ…… 其实这题也可以把 ...

  8. LeetCode——Decode String

    Question Given an encoded string, return it's decoded string. The encoding rule is: k[encoded_string ...

  9. UVA 12657 Boxes in a Line(双向链表+小技巧)

    题意:对于一行按照顺序排列盒子数字与位置都为 1,2,3,4....n 执行四种操作 c = 1    x 放到 y 的左边 c =2     x 放到 y 的右边 c =3 交换 x, y c =4 ...

  10. ConcurrentHashMap实现线程安全的原理

    并发环境下为什么使用ConcurrentHashMap 1. HashMap在高并发的环境下,执行put操作会导致HashMap的Entry链表形成环形数据结构,从而导致Entry的next节点始终不 ...