表單隱藏域與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

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/451325.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/451325.shtml
英文地址,請注明出處:http://en.pswp.cn/news/451325.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

視頻領域的Instagram:Viddy用戶突破2600萬

北京時間5月9日消息&#xff0c;據TheNextWeb報道&#xff0c;視頻分享應用Viddy的注冊用戶數量已經達到2600萬&#xff0c;而上個月的用戶數量還是650萬。日均增長用戶超過50萬&#xff0c;成績斐然&#xff0c;投資者對Viddy目前的增長表示很滿意。 Viddy是如何達到這樣的成…

log 的 debug()、 error()、 info()方法的區別

軟件中總免不了要使用諸如 Log4net, Log4j, Tracer 等東東來寫日志&#xff0c;不管用什么&#xff0c;這些東東大多是大同小異的&#xff0c;一般都提供了這樣5個日志級別&#xff1a; Debug Info Warn Error Fatal 一個等級比一個高&#xff0c;但…

存儲容量(空間)換算公式(B、KB、MB、GB、TB、PB、EB)

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 <strong>存儲容量&#xff1a;是該存儲設備上可以存儲數據的最大數量&#xff0c;通常使用千字節&#xff08;kb kilobyte&#x…

如何防止表單的重復提交

表單重復提交是在多用戶Web應用中最常見、帶來很多麻煩的一個問題。有很多的應用場景都會遇到重復提交問題&#xff0c;比如&#xff1a; (1)點擊提交按鈕兩次。 (2)點擊刷新按鈕。 (3)使用瀏覽器后退按鈕重復之前的操作&#xff0c;導致重復提交表單。 (4)使用瀏覽器歷史記錄重…

GDB調試精粹及使用實例

一&#xff1a;列文件清單 1&#xff0e; List (gdb) list line1,line2 二&#xff1a;執行程序 要想運行準備調試的程序&#xff0c;可使用run命令&#xff0c;在它后面可以跟隨發給該程序的任何參數&#xff0c;包括標準輸入和標準輸出說明符(<和>)和外殼通配符&a…

如何使用log.debug()

log4j是一個開源的日志&#xff0c;共分為六個等級&#xff1a;LOG、DEBUG、INFO、WARN、ERROR、和FATAL。 DEBUG是其中的一種日志級別。一般我們用這個方法的時候都是這樣的&#xff1a; if(log.isDebugEnabled()){log.debug("debug&#xff01;"); } 意思是&am…

寫給大數據開發初學者的話

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 導讀&#xff1a; 第一章&#xff1a;初識Hadoop 第二章&#xff1a;更高效的WordCount第三章&#xff1a;把別處的數據搞到Hadoop上第…

2018年7月份,python上傳自己的包庫到pypi官網的方法

最近pypi官網進行了更新&#xff0c;老的上傳網址作廢了。記錄下上傳到pypi的方法 0、去pypi官網注冊賬號&#xff0c;沒賬號是不可能上傳的&#xff0c;想想也是那不亂套了嗎&#xff0c;注冊后會收到一個郵件需要點擊然后重新登錄 1、目錄就是這樣 &#xff0c;我要上傳muli…

linux系統C語言學習總結

引言   盡管 C 語言問世已近 30 年&#xff0c;但它的魅力仍未減退。C 語言繼續吸引著眾多的開發者&#xff0c;他們為了編寫、移植或維護應用程序而必須學習新技能。   本文是為了滿足對C語言初學者或想提高自身C語言修為的開發人員的需要而寫的。希望對您的學習和工作有…

redis 刪除操作

Redis 鍵(key) Redis 鍵命令用于管理 redis 的鍵。 語法 Redis 鍵命令的基本語法如下&#xff1a; redis 127.0.0.1:6379> COMMAND KEY_NAME 實例 redis 127.0.0.1:6379> SET runoobkey redis OK redis 127.0.0.1:6379> DEL runoobkey (integer) 1 在以上實例中 DEL 是…

寫給大數據開發初學者的話2

見 : http://lxw1234.com/archives/2016/11/782.htm 如果你已經按照《寫給大數據開發初學者的話》中第一章和第二章的流程認真完整的走了一遍&#xff0c;那么你應該已經具備以下技能和知識點&#xff1a; 0和Hadoop2.0的區別&#xff1b;MapReduce的原理&#xff08;還是那個…

Pandas的結構和應用

Pandas處理以下三個數據結構 - 系列(Series)----一維ndarray   特點&#xff1a;帶有標簽&#xff0c;可以使用標簽作為索引&#xff0c;大小不能改變&#xff0c;內部數據可以改變。 屬性&#xff1a;與NumPy類似&#xff0c;多了一個軸標簽axis lables 數據…

JZOJ5857 【NOIP提高組模擬A組2018.9.8】沒有上司的舞會

題目 Description “那么真的有果爾德施坦因這樣一個人?”他問道。 “是啊&#xff0c;有這樣一個人&#xff0c;他還活著。至于在哪里&#xff0c;我就不知道了。” “那么那個密謀——那個組織?這是真的嗎?不是秘密警察的捏造吧?” “不是&#xff0c;這是真的。我們管…

python 中如何判斷list中是否包含某個元素

在python中可以通過in和not in關鍵字來判讀一個list中是否包含一個元素 theList [‘a’,’b’,’c’] if ‘a’ in theList: print ‘a in the list’ if ‘d’ not in theList: print ‘d is not in the list’

時間即財富:創業者浪費精力的八個錯誤

導讀&#xff1a;本文作者Jeff Miller是美食網頁應用Punchfork的創始人&#xff0c;同時也是DuckDuckGo、Ginzametrics、Art.sy、DataMinr以及Forkly的投資人。作者通過對自己創業初期一些錯誤選擇進行盤點&#xff0c;告訴讀者在創業初期應該學會選擇&#xff0c;因為在創業初…

寫給大數據開發初學者的話3

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 如果你已經按照《寫給大數據開發初學者的話2》中第三章和第四章的流程認真完整的走了一遍&#xff0c;那么你應該已經具備以下技能和知識…

十五周二次課

18.6 負載均衡集群介紹 主流開源軟件LVS、keepalived、haproxy、nginx等其中LVS屬于4層&#xff08;網絡OSI 7層模型&#xff09;&#xff0c;nginx屬于7層&#xff0c;haproxy既可以認為是4層&#xff0c;也可以當做7層使用keepalived的負載均衡功能其實就是lvslvs這種4層的負…

LeetCode--171--Excel表列序號

問題描述&#xff1a; 給定一個Excel表格中的列名稱&#xff0c;返回其相應的列序號。 例如&#xff0c; A -> 1B -> 2C -> 3...Z -> 26AA -> 27AB -> 28 ...示例 1: 輸入: "A" 輸出: 1示例 2: 輸入: "AB" 輸出: 28示例 3: 輸入: "…

中國歷代王朝大排名

中國自秦以降&#xff0c;一共出過九個大王朝&#xff0c;它們是&#xff1a;秦、漢、晉、隋、唐、宋、元、明、清。另外&#xff0c;還出過五十幾個小王朝&#xff0c;它們是&#xff1a; 三國時的魏、蜀、吳&#xff0c;共三個&#xff1b; [ 轉自鐵血社區 http://bbs.tiexue…

寫給大數據開發初學者的話4

見&#xff1a;http://lxw1234.com/archives/2016/11/795.htm 如果你已經按照《寫給大數據開發初學者的話3》中第五章和第六章的流程認真完整的走了一遍&#xff0c;那么你應該已經具備以下技能和知識點&#xff1a; 為什么Spark比MapReduce快。使用SparkSQL代替Hive&#xff…