進階篇:同步2個欄位的值
欄位的值會因應相單表格內其他的欄位而變化
設定步驟
關聯 Field A 和 Field B,於 Field B 建立「數值設定」:
使用案例
A. 同步欄位
1) Field B 的值會自動填寫來至 Field A 的輸入值 (Field B 的值可以設定為唯讀)。
A2 合併欄位
2) 亦可以把2個欄位的值相加(如果是數字),或把字串結合一齊。
例如:
欄位A 輸入 「ABC」:
欄位B 輸入 「DEF」:
欄位C 的值便會自動填寫為「ABCDEF」
進階使用提示: 可以建立一個「隠藏」的合併欄位,用於複雜的重覆檢查,
如 Field A 是「多重紀錄 (Multiple Group)」
例如 "Field A" 為「家庭成員姓名」,位於的多重紀錄群組(用戶可以自行添加家庭成員)。
所以如果用戶添加了2位家庭成員, 在同一張報名表上,便會有 2 個 Field A,我們可以使用「目標欄位多重紀錄排序」區分第一位和第二位的家庭成員成名。
第一個紀錄由「1」開始。如不適用,請輸入「0」:
B. 多重選擇
以下為例,「業主資料」啟用了「多重紀錄輸入設置 (Multiple Setting)」
C. 計算2個欄位的差異
例如以「酒店 Check-in 日期」和 「酒店Check-out 日期」這2個欄位得出「酒店逗留日數」
建立2個日期 Field 及一個 Text field:
於後台 Dynaform,建立「欄位數值設定」:
建立2條準則,設定為如下( Date 2 - Date 1):
D. 第二個欄位的選項取決於第一個欄位的值
例如有2個欄位,Qty 1 和 Qty 2, Qty 2 的選項會因 Qty 1 的選擇而即時作出變化,例如可以設定 Qty 2 的選項不能大於 Qty 1的值:
支援 <, <=, > 和 >= 四種比較方式:
E1. 為Checkbox 和 Radio button 的選項添加顯示條件
例如有2個欄位,Qty 1 和 Fruits, Fruits 是一個 checkbox, 其選項會因應 Qty 1 的值選擇而即時作出變化;可以設置以下規則:
當Qty 1 的數值 <= 2 的時候,便移除 "banana" Radio / Checkbox 選項:
"Banana" 值被移除:
設定步驟
於 Fruits 欄位,建立「數值設定」:
設定如下:
使用「相同的目標欄位」增加多項條件
自 2023年1月 以後,你亦可以使用「相同的目標欄位」增加多項條件,概據以上例子,我們可以增加一個條件: 當 "Qty" = "3" 的時候,便會移除 "orange"欄位。最後結果如下:
當 "Qty" = 2,"Fruit" 有以下選項 (第一個條件生效):
apple
orange
當 "Qty" = 3,"Fruit" 有以下選項 (第二個條件生效):
apple
banana
當 "Qty" = 4,"Fruit" 有以下選項 (沒有條件符合,顯示全部 Fruit 選項):
apple
banana
orange
E2. 為下拉式選單 Dropdown 的選項添加顯示條件
例如有2個欄位,「性別」 和 「家庭成員」, 「家庭成員」是一個 Dropdown, 其選項會因應 「性別」的值選擇而即時作出變化;可以設置以下規則:
當「性別」是「女」,「家庭成員」可以選擇 0, 1, 2, 3
當「性別」是「男」,「家庭成員」可以選擇 0, 1(2和3不能讓用戶選取)
設定步驟
於 「家庭成員」欄位,建立「數值設定」:
設定概念是當「性別」是「男」時,移除「2」和「3」的選項:
F. Dynaform 分類整合
當選項資料結構較複雜時,便需要使用 Dynaform Category (分類):
例如表單有2個欄位:
屋苑名稱
分區(該物業為)
「屋苑名稱」會再被劃分為香港各個「分區」(中環、屯門等),當用戶選擇了「屋苑名稱」後,其所屬的分區會於第二個欄位自動填寫:
分類結構
以上例子,當用戶選擇了「澤豐花園」後,分區欄位會自動填寫了所屬的分區,即「屯門」:
設定步驟
於分區(該物業為)欄位,建立「數值設定」:
選擇「等如選項的第一分類」(或者是第二分類,是乎你的要求而定):
G. 自動計算年齡
當用戶輸入出生日期時,可以自動填寫年齡:
設定步驟
為「出生日期」及「年齡」欄位設定代碼,例如:
「出生日期」 = applicant_bday
「年齡」 = applicant_age
然後於「進階」Tab 輸入 "Custom Javascript"
autoUpdateAgeField('.dy_code_applicant_bday', '.dy_applicant_age', true);
其中 "applicant_bday" 是出生日期的代碼,"applicant_age" 是年齡的代碼, 而 3rd argument = true 即自動填寫年齡後用戶不能自行更改。