JS多输入字段成一个CF7

Question

大家好，有人可以帮助我编写 CF7 中的代码。我需要更多的输入字段组合成一个。例如，我有街道、城市、州、邮编。请看下面的代码：

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显示结果

街道地址
城市、州、邮编

我想在动态文本中显示输入信息

[dynamictext address-full]

Answer 1

此脚本将立即读取输入到您的字段中的值，并更新完整的地址动态字段。

您还需要在您的动态文本中添加 id [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>