Блог

Привет, ребята, может кто-нибудь помочь мне с моим кодом в 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

[dynamictext address-full]

Этот скрипт мгновенно прочитает значения, введенные в ваши поля, и обновит динамическое поле полного адреса.

Вам также необходимо добавить идентификатор в ваш 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>