JS多輸入字段合二為一CF7

Question

大家好，有人可以幫助我編寫 CF7 中的代碼。 我需要更多的輸入字段組合成一個。 例如，我有街道，城市，State，zip。 請看下面的代碼：

CF7代碼

            <div class="row">
                <div class="col-md-12">
                    <h5>Address</h5>
                    <label>Address (Street)</label>                     
                    [text* current-address class:form-control id:cstreet]
                </div>
            </div>
            <div class="row">
                <div class="col-md-5">
                    <label>City</label>
                    [text* current-city class:form-control id:ccity]
                </div>
                <div class="col-md-2">
                    <label>State</label>
                    [select* current-country class:form-control  id:cstate include_blank "AL" "AK" "AZ" "AR" "CA" "CO" "CT" "DE" "FL" "GA" "HI" "ID" "IL" "IN" "IA" "KS" "KY" "LA" "ME" "MD" "MA" "MI" "MN" "MS" "MO" "MT" "NE" "NV" "NH" "NJ" "NM" "NY" "NC" "ND" "OH" "OK" "OR" "PA" "RI" "SC" "SD" "TN" "TX" "UT" "VT" "VA" "WA" "WV" "WI" "WY" "DC" "AE" "AA" "AP"]
                </div>
                <div class="col-md-2">
                    <label>Zip</label>
                    [text* current-zip class:form-control id:czip]
                </div>

CF7顯示結果

街道地址
城市，State，ZIP

我想在動態文本中顯示輸入信息

[dynamictext address-full]

Answer 1

該腳本將立即讀取輸入到您的字段中的值，並將更新完整的地址動態字段。

您還需要將 id 添加到您的 dynamictext [dynamictext address-full id:addressfull]

<script>
var cstreet = document.getElementById("cstreet");
var ccity = document.getElementById("ccity");
var cstate = document.getElementById("cstate");
var czip = document.getElementById("czip");
var addressfull = document.getElementById("addressfull");

if (cstreet) cstreet.addEventListener("input", updateFullAddress);
if (ccity) ccity.addEventListener("input", updateFullAddress);
if (cstate) cstate.addEventListener("input", updateFullAddress);
if (czip) czip.addEventListener("input", updateFullAddress);

function updateFullAddress (e) {
  if (addressfull) addressfull.value = `${cstreet.value} ${ccity.value} ${cstate.value} ${czip.value}`;  
}
</script>