1

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

 <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 данные о месяце и типе занятий из блока на котором был клик?

1 ответ 1

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>

1
  • Спасибо большое, просто Есус <3
    – Alex Bub
    2 дек 2019 в 16:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.