JSFiddle - React, Tailwind, and code Playground

by max3w

HTML

<!--Пример поля в которое надо записать значение-->
<input type="text" id="wpforms-36-field_4" class="wpforms-field-large wpforms-valid" name="wpforms[fields][4]" value="Обрана послуга: " placeholder="Обрана послуга: " aria-invalid="false"><br>
<!--Пример кнопки-->
<p><button data-toggle="modal" name="Повірка лічильника опалення" data-target="#myModal">Замовити</button>
<button data-toggle="modal" name="Повірка лічильника тепла" data-target="#myModal">Замовити</button>
<button data-toggle="modal" name="Повірка лічильника води" data-target="#myModal">Замовити</button></p>

CSS

input {width:100%;}

JavaScript

//получаем все кнопки на странице но только с нужным селектором
var buttons = document.querySelectorAll("button[data-toggle]"); 
//Перебираем массив кнопок
for (var i = 0; i < buttons.length; i++) {
   buttons[i].addEventListener("click", function(event) {
     buttonsControl(event.target);
   }, false);
}
//Функция возвращает поле Name нажатой кнопки
function buttonsControl(button) {
let elem = (button.getAttribute('name'));
//Записываем это значение в поле инпута
let posl = document.querySelector('#wpforms-36-field_4');  
//Получаем placeholder кнопки по умолчанию и добавляем к нему нажатое значение поля name
let val = posl.getAttribute('placeholder');
posl.setAttribute('value', val + elem)
}