代码之家 › 专栏 › 技术社区 › hungrybeast

SweetAlert2从自定义HTML中的输入获取值

sweetalert2 html jquery javascript

hungrybeast · 技术社区 · 7 年前

问题

SweetAlert2 ,打开一个包含自定义HTML的警报,其中显示了几个输入框。我想使用SweetAlert2中的正常确认/取消按钮将这些输入的值发送到套接字。

问题

如何使用普通的SweetAlert2按钮获取这些输入的值?请不要建议使用普通输入或HTML按钮,因为这是一种解决方法,我不希望这样。

环境

我使用jQuery、SweetAlert2和一些不相关的库,如Vue。js和套接字。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
    })
}

1 回复 | 直到 7 年前

Ghassen Louhaichi 7 年前

由于您使用的是自定义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);
    });
}