SweetAlert, Focusing an input after Confirm

Michael Shepherd picture Michael Shepherd · Jan 29, 2016 · Viewed 13.7k times · Source

Basically I have a form where you can add an User.

<div class="container">
    <div><h1>Formulario para agregar Usuarios</h1></div>
  <form id='addForm' role="form" method="POST">
    <div class="form-group col-lg-6">

        <div class="form-group ">
            <label for="nombre">Nombre:</label>
            <input class="form-control" type="text" id="nombre" name="nombre" maxlength="15" placeholder="Ingrese su Nombre"/>
            <div id="nom" name="nom"></div>
        </div>
        <div class="form-group">
            <label for="apellido">Apellido:</label>            
            <input class="form-control" type="text" id="apellido" name="apellido" maxlength="15" placeholder="Ingrese su Apellido" />
            <div id="ape" name="ape"></div>
        </div>
        <div class="form-group">
            <label for="correo">Correo:</label>
            <input class="form-control" type="email" id="correo" name="correo" maxlength="30" placeholder="[email protected]"/>
            <div id="cor" name="cor"></div>
        </div>
        <div class="form-group">
            <label for="password">Contraseña:</label>            
            <input class="form-control" type="password" id="password" name="password" maxlength="15" placeholder="Ingrese una Contraseña (mínimo 6 caracteres)" />
            <div id="pas" name="pas"></div>
        </div>      
        <div class="form-group">
        <button class="btn btn-default col-sm-2" id="addUser" name="addUser" type="submit" >
           <span class="glyphicon glyphicon-plus-sign"></span> Agregar</button>
        </div>

           <div class="form-group col-sm-8" id="userData" name="userData"></div>         

    </div>

After success a sweet alert appears on screen telling you the add worked.

Before the swal I had a normal alert, and after showing success It would focus on the first input of the form.

But now when the swal shows up, It gives the focus while swal's on screen and when you click the confirm button the focus is gone.

I tried to set onConfirmButton to false and then add a function

$.post('agregar.php', {nombre: nombre, apellido: apellido, correo: correo, password: password}, function(data) {
            //Se recibe un resultado (data) y se muestra en el div
            //(que en este caso sería una cadena string con algún mensaje)
            if (data=='1') {
                //swal("¡Hecho!", "¡Has Agregado un Usuario Nuevo!", "success");
                swal({
                    title: "¡Hecho!",
                    text: "¡Has Agregado un Usuario Nuevo!",
                    closeOnConfirm: false
                },
                    function(){
                        swal.close();
                        $('#nombre').val('')
                        $('#apellido').val('');
                        $('#correo').val('');
                        $('#password').val('');
                        $('#nombre').focus();

                    })
                );

But it just doesn't work.

Answer

Alexandre Ribeiro picture Alexandre Ribeiro · Oct 4, 2017

Use promise with "then" function like: .then(function(){ just before closing the swal function with ";".

Using your code, it will be like that:

swal({
    title: "¡Hecho!",
    text: "¡Has Agregado un Usuario Nuevo!",
    closeModal: false
}).then(function() {
        swal.close();
        $('#nombre').val('')
        $('#apellido').val('');
        $('#correo').val('');
        $('#password').val('');
        $('#nombre').focus();
});