2. 程式人生 > >表單隱藏域與display:none

表單隱藏域與display:none

阿新 • • 發佈：2018-09-14
隱藏域 display code idt 兩種 log 提交 點擊事件 rip

有時候前端進行表單填寫是分步驟的，每一步的時候其他步驟相關的表單視圖不可見；

針對"不可見"，以下有兩種處理方式：

①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

相關推薦

表單隱藏域與display:none

隱藏域 display code idt 兩種 log 提交 點擊事件 rip 有時候前端進行表單填寫是分步驟的，每一步的時候其他步驟相關的表單視圖不可見； 針對"不可見"，以下有兩種處理方式： ①display：none 這種方式呢，比較簡單，就是將三個步驟分3個d

表單隱藏域

屬性 cti 看不見 val 收集 ... form 隱藏域 bsp 隱藏域是用來收集或發送信息的不可見元素，對於網頁的訪問者來說，隱藏域是看不見的。當表單被提交時，隱藏域就會將信息用你設置時定義的名稱和值發送到服務器上。代碼格式：＜input type="hidden"

html表單隱藏域

一、表單隱藏域 隱藏域是用來收集或傳送資訊的不可見元素，對於網頁的訪問者來說，隱藏域是看不見的。當表單被提交時，隱藏域就會將資訊用你設定時定義的名稱和值傳送到伺服器上。 程式碼格式：＜input type="hidden" name="..." value="..."＞ 屬性解

表單隱藏域hidden

1.什麼是隱藏域  隱藏域是用來收集或傳送資訊的不可見元素，對於網頁的訪問者來說，隱藏域是看不見的。當表單被提交時，隱藏域就會將資訊用你設定時定義的名稱和值傳送到伺服器上。 2.怎麼建立隱藏域 HTML中建立隱藏域：<input  type="hidden" na

JSP表單隱藏域通過JS設定

HTML <form action="login.jsp" method="post" id="data"> <input type="button" value=

JavaScript基礎 submit按鈕配合form的onsubmit實現表單的提交與驗證

java asc body bmi 是我 技術 pos true value 鎮場詩：　　　　清心感悟智慧語，不著世間名與利。學水處下納百川，舍盡貢高我慢意。　　　　學有小成返哺根，願鑄一良心博客。誠心於此寫經驗，願見文者得啟發。—————————————————————

JavaScript基礎 submit按鈕結合onclick事件 實現表單的提交與驗證

ret vs2015 基礎 result oct 學習資源 charset 簡單 添加 鎮場詩：　　　　清心感悟智慧語，不著世間名與利。學水處下納百川，舍盡貢高我慢意。　　　　學有小成返哺根，願鑄一良心博客。誠心於此寫經驗，願見文者得啟發。————————————————

AngulairJS表單輸入驗證與mvc

oot 表單 名稱 操作 數據庫 root min 位置 input AngulairJS表單輸入驗證 1.表單中，常用的驗證操作有：$dirty 表單有填寫記錄、$valid 字段內容合法的、$invalid 字段內容是非法的、$pristine 表單沒有填寫記錄、$er

正則表達過濾表單隱藏元素，組裝post數據

eth 正則表達 bin cnblogs value all match curl mat <form name="form1" action="‘.$serverUrl.‘" method="post" > <input type="hidden" n

tp表單的提交與驗證

地址 更多 php end user func 機制 etc spa 一、控制器如下 引用use app\index\model\User; //註意模型類名不能和控制器類名相同 public function index(){ return $this->fe

表單驗證，與多語言支持，CI

加載 load for 控制器 cati 驗證 pan conf span 表單驗證將漢化包，復制到application文件夾下的language，然後在config.php中，將語音改為simplified-chinese,和漢化包文件夾的名字一致。 對於隨漢化包帶來

html表單標簽與表單設計

多行文本 表單 off inpu 域名 type cti blog 允許 1<form>標記及其屬性 表單使用<form>和</form>來定義的，<form>標記有屬性：name、method、action、target等屬

獲取表單select域的選擇部分的文本

orm func load value this document window doc 文本 1 body> 2 <form action="index.php"> 3 <select name="" id="select">

web開發中的form表單的原理與介紹

據我的理解：表單應該是得包括輸入文字框，提交按鈕，由他們組合而成就叫做form表單控制元件（前端開發中會提供多種多樣的控制元件） <form action="Handler1.ashx" method="post" > <p>客戶名稱: <input type="t

表單標籤，與使用者進行互動

HTML表單(form) 表單是可以把瀏覽者輸入的資料傳送到伺服器端，然後伺服器端程式 語法： <form method="傳送方式" action="伺服器檔案"> 文字輸入框、密碼輸入框 當用戶要在表單中鍵入字母、數字等內容時，就會用到文

js表單提交方式與表單事件

1、表單提交方式 (1)使用submit提交 <form> ... <input type="submit"> </form

Jq form表單提交驗證與響應簡單示例

<!DOCTYPE html> <html> <head> <title>表單提交驗證與響應</title> </head> <body> <form method=

巧用html的hidden全域性屬性傳遞表單隱藏引數

最近在自學PHP的時候涉及到一處表單傳遞引數的問題。 需要傳遞的引數為?m=&n=&t=，其中m為確定的一個int值，但是表單設計需要輸入的只有n和t，這樣點選表格的提交按鈕只有n和t

[jQuery]無法準確獲取隱藏元素（display:none）寬度(width)和高度(height)的新解決方案

在開發一個彈框外掛時，遇到一個需要計算隱藏彈框的高度問題。用jquery裡面的方法$('box').outerHeight(true)得到隱藏層高度的值隨著滾動條滾動總是不一致。沒轍，放棄這一方法去獲取，原來生js中的offsetHeight來試試看，$(''box")[

SpringMVC 資料繫結時，表單輸入值與實體資料型別一一對應的問題

SpringMVC 資料繫結的一個小小的錯誤，竟浪費了不少時間，趕緊記下來，免得重蹈覆轍。 Model public class Student{ private String name;