SweetAlert2 получает значение из ввода в пользовательском HTML

Проблема

Я использую SweetAlert2, открывая предупреждение с пользовательским HTML внутри, которое показывает несколько полей ввода. Я хочу использовать обычные кнопки подтверждения/отмены из SweetAlert2, чтобы отправить значение этих входов в сокет.

Вопрос

Как я могу получить значения этих входов, используя обычные кнопки SweetAlert2? Пожалуйста, не предлагайте использовать обычный ввод или кнопки HTML, так как это обходной путь, и я этого не хочу.

Окружающая среда

Я использую jQuery, SweetAlert2 и несколько нерелевантных библиотек, таких как Vue.js и Socket.io и т. д.

Код

function addUser() {
    swal({
        html: `
            <div class="field">
                Email:
                <p class="control has-icons-left">
                <input class="input" type="email" placeholder="Email">
                    <span class="icon is-small is-left">
                        <i class="mdi mdi-email"></i>
                    </span>
                </p>
            </div>
            <div class="field">
                Name:
                <p class="control has-icons-left">
                    <input class="input" type="text" placeholder="Name">
                    <span class="icon is-small is-left">
                        <i class="mdi mdi-account"></i>
                    </span>
                </p>
            </div>
            <div class="field">
                Password:
                <p class="control has-icons-left">
                    <input class="input" type="text" placeholder="Password">
                    <span class="icon is-small is-left">
                        <i class="mdi mdi-key"></i>
                    </span>
                </p>
            </div>
            <div class="field">
                Level:
                <p class="control has-icons-left">
                    <input class="input" type="text" placeholder="Level">
                    <span class="icon is-small is-left">
                        <i class="mdi mdi-arrow-up"></i>
                    </span>
                </p>
            </div>
        `,
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Cancel',
        confirmButtonClass: 'button is-success has-right-spacing',
        cancelButtonClass: 'button is-danger',
        buttonsStyling: false,
        showCancelButton: true
    })
}

javascript html jquery sweetalert2
person hungrybeast    schedule 05.10.2017    source источник
comment
Добавлять. Ваш. Код.   -  person Ashley Brown    schedule 05.10.2017
comment
@ProEvilz Готово.   -  person hungrybeast    schedule 05.10.2017

Ответы (1)


arrow_upward
7
arrow_downward

Поскольку вы используете настраиваемые входные данные HTML, обычных настроек в API библиотеки недостаточно для достижения вашей цели. Я предлагаю вам использовать preConfirm из их функций API, чтобы получить значения из ваших входных данных следующим образом:

function addUser() {
    swal({
        html: `...`,
        confirmButtonText: 'Confirm',
        // ...
        showCancelButton: true,
        preConfirm: function() {
            return new Promise((resolve, reject) => {
                // get your inputs using their placeholder or maybe add IDs to them
                resolve({
                    Email: $('input[placeholder="Email"]').val(),
                    Name: $('input[placeholder="Name"]').val(),
                    Password: $('input[placeholder="Password"]').val(),
                    Level: $('input[placeholder="Level"]').val()
                });

                // maybe also reject() on some condition
            });
        }
    }).then((data) => {
        // your input data object will be usable from here
        console.log(data);
    });
}
person Ghassen Louhaichi    schedule 05.10.2017
comment
Спасибо, это сработало! Рекомендуется ли использовать идентификаторы вместо других свойств? Я думаю, что это не более чем старая школьная практика использования идентификаторов. - person hungrybeast; 05.10.2017