Sweet Alert — популярная библиотека JavaScript для создания красивых и настраиваемых предупреждений и диалоговых окон. В этой статье мы рассмотрим несколько методов получения двух входных значений из диалогового окна Sweet Alert с помощью JavaScript. Мы рассмотрим различные подходы, объясним примеры кода и предоставим разговорные объяснения, которые помогут вам легко понять концепции.

Метод 1: использование промисов
Промисы — это мощная функция JavaScript для обработки асинхронных операций. Мы можем использовать обещания для получения входных значений из диалогового окна Sweet Alert. Вот пример фрагмента кода:

Swal.fire({
  title: 'Enter your details',
  html:
    '<input id="input1" class="swal2-input" placeholder="Value 1">' +
    '<input id="input2" class="swal2-input" placeholder="Value 2">',
  focusConfirm: false,
  preConfirm: () => {
    const value1 = document.getElementById('input1').value;
    const value2 = document.getElementById('input2').value;
    return [value1, value2];
  }
}).then(result => {
  const [value1, value2] = result.value;
  console.log('Value 1:', value1);
  console.log('Value 2:', value2);
});

Метод 2: использование Async/Await
Если вы предпочитаете более синхронный стиль кода, вы можете использовать синтаксис async/awaitдля получения входных значений. Вот пример:

async function getInputValues() {
  const { value: formValues } = await Swal.fire({
    title: 'Enter your details',
    html:
      '<input id="input1" class="swal2-input" placeholder="Value 1">' +
      '<input id="input2" class="swal2-input" placeholder="Value 2">',
    focusConfirm: false,
    preConfirm: () => {
      const value1 = document.getElementById('input1').value;
      const value2 = document.getElementById('input2').value;
      return [value1, value2];
    }
  });
  const [value1, value2] = formValues;
  console.log('Value 1:', value1);
  console.log('Value 2:', value2);
}
getInputValues();

Метод 3: использование прослушивателей событий
При этом подходе мы прикрепим прослушиватели событий к полям ввода внутри диалогового окна Sweet Alert. Когда пользователь заканчивает ввод значений, мы можем их зафиксировать и выполнить дальнейшие действия. Вот пример:

Swal.fire({
  title: 'Enter your details',
  html:
    '<input id="input1" class="swal2-input" placeholder="Value 1">' +
    '<input id="input2" class="swal2-input" placeholder="Value 2">',
  focusConfirm: false,
  showCancelButton: true,
  didOpen: () => {
    const input1 = document.getElementById('input1');
    const input2 = document.getElementById('input2');
    input1.addEventListener('input', () => {
      console.log('Value 1:', input1.value);
    });
    input2.addEventListener('input', () => {
      console.log('Value 2:', input2.value);
    });
  }
});

Метод 4: использование отправки пользовательской формы
В этом методе мы создадим пользовательскую форму внутри диалогового окна Sweet Alert и обработаем событие отправки формы для получения входных значений. Вот пример:

Swal.fire({
  title: 'Enter your details',
  html:
    '<form id="myForm">' +
    '<input id="input1" class="swal2-input" placeholder="Value 1">' +
    '<input id="input2" class="swal2-input" placeholder="Value 2">' +
    '</form>',
  focusConfirm: false,
  showCancelButton: true,
  didOpen: () => {
    const form = document.getElementById('myForm');
    form.addEventListener('submit', (e) => {
      e.preventDefault();
      const value1 = document.getElementById('input1').value;
      const value2 = document.getElementById('input2').value;
      console.log('Value 1:', value1);
      console.log('Value 2:', value2);
      Swal.close();
    });
  }
});

Метод 5: использование функции обратного вызова
Sweet Alert предоставляет метод then, который принимает функцию обратного вызова. Мы можем получить входные значения внутри функции обратного вызова после того, как пользователь закроет диалоговое окно. Вот пример:

Swal.fire({
  title: 'Enter your details',
  html:
    '<input id="input1" class="swal2-input" placeholder="Value 1">' +
    '<input id="input2" class="swal2-input" placeholder="Value 2">',
  focusConfirm: false,
}).then((result) => {
  const value1 = document.getElementById('input1').value;
  const value2 = document.getElementById('input2').value;
  console.log('Value 1:', value1);
  console.log('Value 2:', value2);
});

В этой статье мы рассмотрели пять различных методов получения двух входных значений из диалогового окна Sweet Alert в JavaScript. Мы рассмотрели использование промисов, синтаксиса async/await, прослушивателей событий, отправки пользовательских форм и функций обратного вызова. Эти методы обеспечивают гибкость при сборе вводимых пользователем данных и позволяют обрабатывать значения в соответствии с вашими конкретными требованиями. Благодаря примерам кода и разговорным объяснениям вы теперь должны хорошо понимать, как получить два входных значения Sweet Alert в JavaScript.