表单隐藏域与display:none
有時(shí)候前端進(jìn)行表單填寫(xiě)是分步驟的，每一步的時(shí)候其他步驟相關(guān)的表單視圖不可見(jiàn)；
針對(duì)"不可見(jiàn)"，以下有兩種處理方式：
①display：none
這種方式呢，比較簡(jiǎn)單，就是將三個(gè)步驟分3個(gè)div，事件觸發(fā)相關(guān)視圖的顯示與隱藏；
②定位
這和輪播圖的實(shí)現(xiàn)原理相同，三個(gè)步驟div作為行內(nèi)塊狀元素，在一行排列，總寬度為width，并用一個(gè)大div包住，
稱為wrapB；然后再在外面用wrapA包住；
wrapA（position:relative;overflow:hidden;）
wrapB（position:absolute;left:0px;）
然后點(diǎn)擊事件，改變wrapB的left值（每次改變width/3）來(lái)實(shí)現(xiàn)步驟的切換。
?
對(duì)于兩種方法的處理，我之前一直以為display:none之后，提交表單之后，對(duì)應(yīng)的表單域獲取不了值，因?yàn)?/p>
display:none了啊，今天項(xiàng)目上的一個(gè)問(wèn)題，使得我回家做了一次實(shí)驗(yàn)來(lái)驗(yàn)證：到底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>學(xué)歷：<input name = "data[education]" type="text"></br><button type="button" οnclick="check()" style="width:6rem;height:2rem;">測(cè)試隱藏</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>前臺(tái)頁(yè)面：
點(diǎn)擊隱藏：
接口代碼：
public function demo(){exit(json_encode($_POST['data'])); }點(diǎn)擊提交表單：
SO，事實(shí)證明，display:none后的表單域依舊可以傳值，就和type="hidden"一樣。
?
轉(zhuǎn)載于:https://www.cnblogs.com/eco-just/p/9643887.html
總結(jié)
以上是生活随笔為你收集整理的表单隐藏域与display:none的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： BZOJ.3052.[WC2013]糖果
- 下一篇： hdu 5444 Elven Postm