表单隐藏域与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

表单隐藏域与display:none相关推荐

php修改隐藏域非法提交,PHP get、post变量放在表单隐藏域示例
搜索热词 form里可以防止隐藏控件hidden,用来防止那些不希望让用户看到的信息,这个类可以把get和post里的变量放到hidden控件里,不用在单独遍历get和post了,PHP把get.po ...
input值不可变、隐藏input(表单隐藏域)
input标签值不可变.隐藏标签一.值不可变方法1:readonly 方法2:disabled readonly 和 disabled的区别: 二.隐藏\标签(表单隐藏域) 一.值不可变在写前端 ...
【HTML】表单隐藏域hidden
1.什么是隐藏域隐藏域是用来收集或发送信息的不可见元素,对于网页的访问者来说,隐藏域是看不见的.当表单被提交时,隐藏域就会将信息用你设置时定义的名称和值发送到服务器上. 2.怎么创建隐藏域 HTML ...
java获取表单隐藏域的值,Servlet中使用表单隐藏域
Servlet中使用表单隐藏域表单隐藏域也是一种会话跟踪技术. 如果使用了"表单隐藏域",将使用一个隐藏(不可见)文本域来维护用户的状态. 在这种情况下,我们将信息存储在表单的隐 ...
表单中隐藏域的html代码是,JS中input表单隐藏域及其使用方法_心病_前端开发者...
一.表单隐藏域隐藏域是用来收集或发送信息的不可见元素,对于网页的访问者来说,隐藏域是看不见的.当表单被提交时,隐藏域就会将信息用你设置时定义的名称和值发送到服务器上. 代码格式: <input ...
form表单隐藏域有什么作用
隐藏域是用来收集或发送信息的不可见元素,对于网页的访问者来说,隐藏域是看不见的.当表单被提交时,隐藏域就会将信息用你设置时定义的名称和值发送到服务器上. 代码格式:在form表单中写如下代码 < ...
Servlet会话管理一（URL重写和表单隐藏域）
会话可以简单的理解为客户端用户打开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器的整个过程称为一个会话.即一个客户端用户和服务器端进行通讯的过程,也是客户端和服务器端之间的数据传 ...
JQuery validate验证表单隐藏域
当我们提交表单时,往往需要做一些必填和数据格式校验,点击提交,doSubmit的 beforeSend方法即可做校验. <script type="text/javascript&qu ...
通过表单隐藏域向后台传值
今天怂怂就为大家分享一篇在写毕设的时候遇到一个问题以及如何解决问题的,具有很好的参考价值,希望对大家有所帮助.一起跟随怂怂过来看看吧! 数据库使用数值存储权限(role)这个字段 . 由于项目需求,页 ...

表单隐藏域与display:none

表单隐藏域与display:none相关推荐

最新文章

热门文章