Цепочка дополнительных сладких оповещений на основе оператора if - PullRequest
Новая
       14

Цепочка дополнительных сладких оповещений на основе оператора if

0 голосов
/ 06 июня 2018

Я пытаюсь создать пошаговую форму, используя SweetAlert2 , и мне нужно иметь возможность добавить дополнительный шаг в моей цепочке на основе оператора if.

ДляНапример, на моем третьем модале у меня может быть вопрос на радио, который говорит: «Принесете ли вы плюс 1?», и если пользователь выбирает «true», мне нужно, чтобы он всплыл с дополнительным этапом, спрашивающим «имя плюс один», если пользователь выбирает false, просто продолжайте. 

swal.mixin({
        confirmButtonText: 'Next →',
        showCancelButton: true,
        progressSteps: ['1', '2', '3', '4']
      }).queue([
        {
            title: 'Which event?',
            text: 'Please start by selecting the event you would like to book in!',
            input: 'select',
            inputClass: 'swal-select-event',
            inputPlaceholder: 'Please Select',
            inputOptions: {
                '1' : 'Dance Event',
                '2' : 'Football Event'
            },
            inputValidator: (value) => {
                return new Promise((resolve) => {
                  if (value === '') {
                    resolve('You need to select an event!')
                  } else {
                    resolve()
                  }
                })
            }
        },
        {
            title: 'What Day?',
            text: 'Which day are they due to come in?',
            html:'<input id="swal-booking-date-select" type="date"/>',
            preConfirm: () => {
                return document.getElementById('swal-booking-date-select').value
            },
            inputValidator: (value) => {
                return new Promise((resolve) => {
                  if (value === '') {
                    resolve('You need to select a date!')
                  } else {
                    resolve()
                  }
                })
            }
        },
        {
            title: 'Plus one?',
            text: 'Will you be bringing a plus one with you?',
            input: 'radio',
            inputOptions: {
                    'yes' : 'Yes',
                    'no' : 'No'
                },
            inputValidator: (value) => {
                return new Promise((resolve) => {
                    if (value === null) {
                        resolve('I need to know if you will be bringing a plus 1!')
                    } else if(value === 'yes') {


                        //EXTRA STAGE GOES HERE TO GET PLUS ONE NAME


                    } else {
                        resolve()
                    }
                })
            }
        },
        {
            title: 'What else?',
            input: 'text',
            text: 'Any other information that needs noting for this booking?'
        }
      ]).then((result) => {
        if (result.value) {
            //Do something with all of the data here
        }
      })

Кто-нибудь знает, возможно ли это?

1 Ответ

0 голосов
/ 06 июня 2018

Можно было бы использовать простой экземпляр Swal для этого дополнительного необязательного шага ... И сохранить значение в сторонней переменной, объявленной глобально. 

var plus1name="";

Ради ясности я выигралповторяю весь ваш код, так как без изменений.Вот новая часть для добавления: 

//EXTRA STAGE GOES HERE TO GET PLUS ONE NAME
swal({
  title:"Plus one!",
  text:"What is his/her name?",
  input:"text"
}).then(function(value){
  plus1name = value;
  resolve();
});

Затем в части .then(result): 

//Do something with all of the data here

swalResults = result.value;
swalResults.push(plus1name.value)
console.log(swalResults);

Итак, у вас есть массив со всеми ответами.В конце этого вопроса был задан дополнительный вопрос, поэтому порядок в массиве не соответствует порядку запроса ...

Я работал над ним CodePen .

...