當前位置：
首頁 >
表单隐藏域与display:none
發布時間：2023/12/18
41
豆豆
生活随笔
收集整理的這篇文章主要介紹了
表单隐藏域与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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： BZOJ.3052.[WC2013]糖果
- 下一篇： hdu 5444 Elven Postm