Передать значение в input

259

08 декабря 2021, 08:10

Есть для примера следующая форма для заявки:

 <ul class="border"><h2>ДЕКАБРЬ:</h2> 
    <li data-toggle="modal" data-target="#Online">
        <b>Занятие 1:</b> 
        <p>▸ 9 декабря — 20 декабря </p>
    </li>
    <li data-toggle="modal" data-target="#Online">
        <b>Занятие 2:</b> <br>
        <p>▸ 9 декабря — 20 декабря </p>
    </li>
</ul>
<ul class="border"><h2>❄ЯНВАРЬ:</h2> 
    <li data-toggle="modal" data-target="#Online">
        <b>Занятие 1:</b> 
        <p>▸ 13 января — 24 января </p>
    </li>
    <li data-toggle="modal" data-target="#Online">
        <b>Занятие 2:</b> <br>
        <p>▸ 13 января — 24 января </p>
    </li>
</ul>

При клике на li открывается форма в модальном окне, где заполняются данные пользователя:

<form action="mailer.php" method="post" id="formID" >
    <input type="hidden" name="type" value="" />
    <input type="hidden" name="month" value="" />
    <input type="text" class="form-control" required placeholder="Ваше имя*" name='name'>
    <input type="text" class="form-control" required placeholder="Контактный номер телефона*" name='tel'>
    <input type="email" class="form-control" placeholder="E-mail" name='mail'>
    <button class="btn btn-primary" type="Submit">Отправить</button>
</form>

Как можно передать в input hidden данные о месяце и типе занятий из блока на котором был клик?

Answer 1

const form = document.getElementById('formID'); 
const inputType = document.querySelector('input[name="type"]'); 
const inputMonth = document.querySelector('input[name="month"]'); 
 
[...document.querySelectorAll('li')].map(li => { 
  li.addEventListener('click', (e) => { 
    const element = e.currentTarget; 
     
    const bText = element.querySelector('b').textContent; 
    const pText = element.querySelector('p').textContent; 
 
     
    inputType.value = bText; 
    inputMonth.value = pText; 
  }); 
});

 <ul class="border"><h2>ДЕКАБРЬ:</h2>  
    <li data-toggle="modal" data-target="#Online"> 
        <b>Занятие 1:</b>  
        <p>▸ 9 декабря — 20 декабря </p> 
    </li> 
    <li data-toggle="modal" data-target="#Online"> 
        <b>Занятие 2:</b> <br> 
        <p>▸ 9 декабря — 20 декабря </p> 
    </li> 
</ul> 
 
<ul class="border"><h2>❄ЯНВАРЬ:</h2>  
    <li data-toggle="modal" data-target="#Online"> 
        <b>Занятие 1:</b>  
        <p>▸ 13 января — 24 января </p> 
    </li> 
    <li data-toggle="modal" data-target="#Online"> 
        <b>Занятие 2:</b> <br> 
        <p>▸ 13 января — 24 января </p> 
    </li> 
</ul> 
 
<form action="mailer.php" method="post" id="formID" > 
    <input type="hidden" name="type" value="" /> 
    <input type="hidden" name="month" value="" /> 
    <input type="text" class="form-control" required placeholder="Ваше имя*" name='name'> 
    <input type="text" class="form-control" required placeholder="Контактный номер телефона*" name='tel'> 
    <input type="email" class="form-control" placeholder="E-mail" name='mail'> 
    <button class="btn btn-primary" type="Submit">Отправить</button> 
</form>