Получить значение html и передать в поле input. Как это сделать?
Всем привет.
Весь день ломаю голову, как получить данные из виджета Почты России и передать их в поле. Суть следующая: при выборе почтового отделения, во всплывающем окне отображается № отделения (почтовый индекс). Необходимо этот индекс подставить в поле input.
Виджет почты вставлен через скрипт:
<div id="ecom-widget" style="height: 500px"> <script src="https://widget.pochta.ru/map/widget/widget.js"></script> <script> ecomStartWidget({ id: *****, callbackFunction: null, containerId: 'ecom-widget' }); </script> </div> |
<div id="ecom-widget" style="height: 500px"> <script src="https://widget.pochta.ru/map/widget/widget.js"></script> <script> ecomStartWidget({ id: *****, callbackFunction: null, containerId: 'ecom-widget' }); </script> </div>
А вывод всплывающего окна имеет такой код:
<div class="balloon"> <div class="balloon__header"> <div class="balloon__header-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"> <path fill-rule="evenodd" d="M4 2a1 1 0 000 2h16a1 1 0 100-2H4zm-.32 11H4v7a1 1 0 102 0v-7h4v6.16c0 1.02.82 1.84 1.84 1.84h6.32c1.02 0 1.84-.82 1.84-1.84V13h.32c.93 0 1.68-.75 1.68-1.68V7.68C22 6.75 21.25 6 20.32 6H3.68C2.75 6 2 6.75 2 7.68v3.64c0 .93.75 1.68 1.68 1.68zM18 13h-6v6h6v-6z" clip-rule="evenodd"></path> </svg> </div> <div class="balloon__header-wrapper"> <span class="balloon__header-title"> Почтовое отделение </span> <div class="balloon__header-subtitle"> <span> № 357106 </span> • <div class="balloon__tariff"> － </div> </div> </div> </div> <div class="balloon__main-content"> <div class="balloon__address"> г Невинномысск, ул Новая 15 </div> <div class="balloon__schedule"> <span class="balloon__schedule-days">Пн:</span> выходной <span class="balloon__schedule-days">Вт - Сб:</span> <div class="balloon__schedule-intervals"> <span class="balloon__schedule-interval-item">09:00 - 16:00, </span> <span class="balloon__schedule-interval-item">перерыв: 13:00 - 14:00</span> </div> <span class="balloon__schedule-days">Вс:</span> выходной </div> </div> </div> |
<div class="balloon"> <div class="balloon__header"> <div class="balloon__header-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"> <path fill-rule="evenodd" d="M4 2a1 1 0 000 2h16a1 1 0 100-2H4zm-.32 11H4v7a1 1 0 102 0v-7h4v6.16c0 1.02.82 1.84 1.84 1.84h6.32c1.02 0 1.84-.82 1.84-1.84V13h.32c.93 0 1.68-.75 1.68-1.68V7.68C22 6.75 21.25 6 20.32 6H3.68C2.75 6 2 6.75 2 7.68v3.64c0 .93.75 1.68 1.68 1.68zM18 13h-6v6h6v-6z" clip-rule="evenodd"></path> </svg> </div> <div class="balloon__header-wrapper"> <span class="balloon__header-title"> Почтовое отделение </span> <div class="balloon__header-subtitle"> <span> № 357106 </span> • <div class="balloon__tariff"> － </div> </div> </div> </div> <div class="balloon__main-content"> <div class="balloon__address"> г Невинномысск, ул Новая 15 </div> <div class="balloon__schedule"> <span class="balloon__schedule-days">Пн:</span> выходной <span class="balloon__schedule-days">Вт - Сб:</span> <div class="balloon__schedule-intervals"> <span class="balloon__schedule-interval-item">09:00 - 16:00, </span> <span class="balloon__schedule-interval-item">перерыв: 13:00 - 14:00</span> </div> <span class="balloon__schedule-days">Вс:</span> выходной </div> </div> </div>
Очень надеюсь на Вашу помощь. Заранее благодарю!!!
Дополнительно:
let numberPost = document.querySelector('.balloon__header-subtitle span').innerHTML.trim().match(/d/g).join(''); input.setAttribute('value', numberPost); |
let numberPost = document.querySelector('.balloon__header-subtitle span').innerHTML.trim().match(/d/g).join(''); input.setAttribute('value', numberPost);
Вешаете MutationObserver на div.balloon__header-subtitle или на родителя div.balloon, в зависимости от того, как организовано формирование всплывающего окна. Отслеживаете изменение содержимого и извлекаете нужную информацию.
- Я не знаю код JS. Брал куски кода с форумов, которые получают данные из div'ов и передают в input, но ни один не сработал((
- Ananas666, Тогда вам сюда: https://freelance.habr.com
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для получения значения html и передачи его в поле input можно использовать JavaScript. Ниже приведен пример кода на JavaScript, который позволит вам достичь этой задачи:
// Получаем значение html var htmlValue = document.getElementById('elementId').innerHTML; // Передаем значение в поле input document.getElementById('inputId').value = htmlValue;
В этом коде мы сначала получаем значение HTML элемента с определенным идентификатором ('elementId') с помощью метода `innerHTML`. Затем мы присваиваем это значение полю input с определенным идентификатором ('inputId') с помощью свойства `value`.
Убедитесь, что у вас есть элемент с идентификатором 'elementId', содержащий нужное вам HTML значение, и элемент input с идентификатором 'inputId', в который вы хотите передать это значение.
Надеюсь, это поможет вам решить вашу проблему! Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.