JS больше полей ввода в один CF7

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

javascript wordpress contact-form-7

25.12.2020 07:35

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

мне нужно было добавить javascript в нижний колонтитул темы?

— 25.12.2020 08:27

да, вы можете легко сделать это с помощью плагина Code Snippets (среди примеров фрагментов есть пример для JS). Я отредактировал свой ответ, чтобы проверить, существуют ли элементы на странице. Пожалуйста, используйте отредактированную версию.

— 25.12.2020 08:34

спасибо, я использую плагин «Вставить верхние и нижние колонтитулы» для WordPress

— 25.12.2020 08:53

25.12.2020 08:14