SweetAlert2 get value from input in custom HTML

Question

Problem

I'm using SweetAlert2, opening an alert with custom HTML inside it, that shows a few input boxes. I want to use the normal confirm/cancel buttons from SweetAlert2 to send the value of those inputs to a socket.

Question

How can I get the values of those inputs, using the normal SweetAlert2 buttons? Please do not suggest using normal inputs or HTML buttons as that is a workaround and I don't want that.

Environment

I use jQuery, SweetAlert2, and a few unrelevant libraries such as Vue.js and Socket.io, etc.

Code

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
    })
}

Answer 1

Since you are using custom HTML inputs, the regular settings in the library's API are not enough to achieve your goal. I suggest you use preConfirm from their API functions to get the values from your inputs as follows :

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);
    });
}