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>

JS多输入字段合一CF7

JS more input fields into one CF7

javascript

wordpress

contact-form-7