Solved, How to Show and Hide Password Input in SweetAlert2 using Javascript, Jquery

 

 

In this tutorial, I use Sweetalert2 and vanilla or plain Javascript and fontawesome for icons.

Example -: 

<script>

    function showPass() {
        var x = document.getElementById("mypassinput");
        if (x.type === "password") {
            x.type = "text";
        } else {
            x.type = "password";
        }
    }
    function checkPass(i) {
        var y = document.getElementById("mypassinput").value;
        if (y == 123456) {
            delete(i); //do something but now I call my delete function with arguments
        }
        else {
            Swal.fire({
                title: 'Wrong Password.',
            })
        }
    }
    function delete_order(i) {
        Swal.fire({
            text:'Enter your Password',
            title: '<input type="password" id="mypassinput" > <i class="fa fa-send" onclick="showPass()" style="cursor:pointer"></i>',
            inputAttributes: {
                autocapitalize: 'off'
            },
            showCancelButton: true,
            confirmButtonText: '<button onclick="checkPass('+i+')">Submit</button>',
            showLoaderOnConfirm: true,
            preConfirm: (login) => {

            },
            allowOutsideClick: () => !Swal.isLoading()
        })
    }

</script>