Как получить введённые пользователем данные, а затем записать их в value инпута?

Question

Дано: чат-бот botui на js (демо чата - https://botui.org/, документация - https://docs.botui.org/). Буду очень благодарна, если поможете разобраться со следующими вопросами.

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/botui/build/botui.min.css">
    <link rel="stylesheet" href="https://unpkg.com/botui/build/botui-theme-default.css">
</head>

<body>
    <div id="my-botui-app">
        <bot-ui></bot-ui>
    </div>

    <input type="hidden" name="comments" value="Это value input">

    <script>
        var botui = new BotUI('my-botui-app');
        botui.message.bot({
            content: 'Вы мужчина или женщина?',
            loading: true,
            delay: 1000,
        }).then(function() {
            return botui.action.button({
                delay: 1000,
                loading: true,
                addMessage: true,
                action: [{
                    text: 'Мужчина',
                    value: 'Мужчина'
                }, {
                    text: 'Женщина',
                    value: 'Женщина'
                }]
            })
        }).then(function(sex) {
            // console.log(sex.value);
        }).then(function() {
            return botui.message.bot({
                loading: true,
                delay: 1000,
                content: "Ваша дата рождения:",
            });
        }).then(function() {
            return botui.message.bot({
                loading: true,
                delay: 1000,
                type: 'html',
                content: "<form><div class=choose-date><span><label for=day>Day:</label> <select id=day name=day></select> </span><span><label for=month>Month:</label> <select id=month name=month><option selected>Enero<option>Febrero<option>Marzo<option>Abril<option>Mayo<option>Junio<option>Julio<option>Agosto<option>Septiembre<option>Octubre<option>Noviembre<option>Diciembre</select> </span><span><label for=year>Year:</label> <select id=year name=year></select></span></div><p>Debes tener al menos 18 años</p></form>",
            });
        }).then(function() {
            for (let year = 1920; year <= 2004; year++) {
                let options = document.createElement("option");
                document.getElementById("year").appendChild(options).innerHTML = year;
            }
            for (let day = 1; day <= 31; day++) {
                let options = document.createElement("option");
                document.getElementById("day").appendChild(options).innerHTML = day;
            }
        }).then(function() {
            return botui.action.button({
                delay: 1000,
                loading: true,
                addMessage: true,
                action: [{
                    text: 'Вы подтверждаете, что Вам есть 18 лет',
                    value: 'Вы подтверждаете, что Вам есть 18 лет'
                }]
            }).then(function() {
                let hiddenInput = document.querySelector('input[name=comments]');
                console.log(hiddenInput);
            })
        })
    </script>

    <script src="https://cdn.jsdelivr.net/vue/latest/vue.min.js"></script>
    <script src="https://unpkg.com/botui/build/botui.min.js"></script>
</body>

</html>

Или здесь: https://codepen.io/Anancode/pen/OJzNZOR

1. Как вывести дату рождения, введённую пользователем, под селектами?

2. Как записать полученные от пользователя значения в value инпута?

Answer 1

Отслеживаете изменение всех трёх полей и а потом добавляете их значения в нужные места.

Допустим так:

const day = document.querySelector('#day'),
      month = document.querySelector('#month'),
      year = document.querySelector('#year'),
      out = document.querySelector('.choose-date--out');
      
// Это для демо
for(let i = 1; i <= 31; i++) {
  const _temp = document.createElement('option');
  _temp.innerText = i;
  day.append(_temp);
}

for(let i = 1; i <= 12; i++) {
  const _temp = document.createElement('option');
  _temp.innerText = i;
  month.append(_temp);
}

let y = 2020 - 18;
for(let i = 0; i <= 100; i++) {
  const _temp = document.createElement('option');
  _temp.innerText = y - i;
  year.append(_temp);
}
// Это для демо

[day, month, year].map(e => e.addEventListener('change', e => {
  let format = `${day.value.padStart(2, '0')}.${month.value.padStart(2, '0')}.${year.value}`;
  out.innerText = format;
  //
  console.clear();
  console.log('И даже сюда '+format);
}));

<form>
  <div class="choose-date">
    <span>
      <label for="day">Day:</label>
      <select id="day" name="day"></select>
    </span>
    <span>
      <label for="month">Month:</label>
      <select id="month" name="month"></select>
    </span>
    <span>
      <label for="year">Year:</label>
      <select id="year" name="year"></select>
    </span>
  </div>
  <p class="choose-date--out">**.**.****</p>
  <p>Debes tener al menos 18 años</p>
</form>

БЛОГ НА HUSL

Как получить введённые пользователем данные, а затем записать их в value инпута?

Ответы (1 шт):