4

Tengo el siguiente formulario:

<form id="form-alta-usuario" method="post" action="index.php?fichero=registro.php">

    <h2 class="titulo-registro display-4 text-center mt-5 mb-4">Parece que tenemos un lindo <span>usuario</span> nuevo...</h2>

    <div class="form-group row">
        <label class="col-2 col-form-label" for="nombre">Tu nombre</label>
        <input class="col-10" id="nombre" type="text" minlength="3" maxlength="25" name="nombre" placeholder="Ejemplo: Indi3_Geek" required/>
        <h6 class="col-2">hola</h6>
        <small class="col-10 form-text text-muted">El apodo que prefieras con tal de que tenga al menos tres caracteres y no más de veinticinco</small>
    </div>

    <div class="form-group row">
        <label class="col-2 col-form-label" for="correo">Un correo</label>
        <input class="col-10" id="correo" type="email" minlength="3" maxlength="100" name="correo" placeholder="Ejemplo: [email protected]" required/>
        <h6 class="col-2">hola</h6>
        <small class="col-10 form-text text-muted">Utiliza una dirección de correo electrónico que utilices habitualmente en caso de que necesitemos contactar contigo</small>
    </div>

    <div class="form-group row">
        <label class="col-2 col-form-label" for="contrasena">Una contraseña</label>
        <input class="col-4" id="contrasena" type="password" name="contrasena" minlength="3" maxlength="25" placeholder="Mejor no dar ejemplos..." required/>
        <label class="col-2 col-form-label" for="contrasena2">Confírmanosla, anda</label>
        <input class="col-4" id="contrasena2" type="password" name="contrasena2" minlength="3" maxlength="25" required/>
        <h6 class="col-2">hola</h6>
        <small class="col-10 form-text text-muted">De nuevo, sólo la restricción de los caracteres (entre 3 y 25)</small>
    </div>

</form>

<div class="form-group form-inline">
    <button class="btn btn-info mr-1" form="form-alta-usuario" id="enviar" type="submit">¡Adelante!</button>
    <button class="btn btn-info mr-2 confirmacion" form="form-alta-usuario" type="reset">Algo no me convence...</button>
    <?php include("volver.php"); ?>
</div>

En el que volver.php es otro botón que utilizo para saber desde dónde se accedió, en este caso, a la página en la que está el formulario, y a dónde se ha de regresar.

He creado el siguiente modal con jQuery y SweetAlert (https://sweetalert.js.org/guides/) para controlar el botón de reseteo del formulario:

$(function() 
{
    $('.confirmacion').click(function(e)
    {   
        e.preventDefault();

        var formulario = $('#form-alta-usuario');

        swal(
        {
            title: '¿Quieres borrar tus datos?',
            text: 'Si estás seguro, adelante',
            icon: 'warning',
            dangerMode: true,
            closeOnClickOutside: false,
            buttons: 
            {
                cancel: 
                {
                    text: "Realmente no",
                    value: null,
                    visible: true,
                    className: "btn btn-outline-secondary",
                    closeModal: true,
                },
                confirm: 
                {
                    text: "Lo estoy",
                    value: true,
                    visible: true,
                    className: "btn btn-danger",
                    closeModal: true,
                }
            }
        })
    })
});

El modal funciona pero, obviamente, no hace nada. La documentación de SweetAlert no me parece muy clara al respecto de cómo implementar el código... En algún otro hilo de SO he visto que emplean una función con un argumento isConfirm pero tampoco tengo muy claro si es algo built-in o qué. Y de promises, que es algo en lo que la ayuda se explaya un poco más, no tengo mucha idea, la verdad.

Querría hacer algo así pero no consigo implementarlo:

if(value) formulario.reset();
else return false;

A ver si me podéis echar un cable. Gracias por adelantado.

Solución adoptada:

He modificado mi código gracias a las indicaciones de phpMyGuel; funcionaría tal cual añadiéndole una promise:

$(function() 
{
    $('.confirmacion').click(function(e)
    {   
        e.preventDefault();

        var formulario = $('#form-alta-usuario');

        swal(
        {

            //Cuerpo del modal

        }).then(function(value){if(value) formulario.trigger('reset');})
    })
});

2 respuestas 2

8

Con este tipo de plugins la dificultad es encontrar el código apropiado para la versión que estás usando de los mismos. Una vez lo tengas es solamente usar la documentación y jugar con ella.

swal("¿Quiéres borrar tus datos?", {
  buttons: {
    cancel: "NO",
    catch: {
      text: "SI",
      value: true,
    },
    defeat: false,
  },
})
.then((value) => {
  if (value) {
    console.log('Se lanza el borrado');
  }
  else {
    console.log('NO se lanza el borrado');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>

Con Sweetalert2

Swal.fire({
  title: '¿Quieres borrar tus datos?',
  text: "Ten presente que la operación no es reversible",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'SI',
  cancelButtonText: 'NO'
}).then((result) => {
  if (result.value) {
    console.log('Se borran los datos');
  }
  else {
    console.log('NO se borran los datos');
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.all.js"></script>

Ejemplo con código del usuario

$(function () {
  $('.confirmacion').click(function (e) {
     e.preventDefault();
     
     var formulario = $('#form-alta-usuario');
  
    Swal.fire({
      title: '¿Quieres borrar tus datos?',
      text: "Ten presente que la operación no es reversible",
      type: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'SI',
      cancelButtonText: 'NO'
    }).then((result) => {
      if (result.value) {
        formulario.trigger("reset");
      }
      else {
        console.log('NO se borran los datos');
      }
    })
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.all.js"></script>

<form id="form-alta-usuario" method="post" action="index.php?fichero=registro.php">

    <h2 class="titulo-registro display-4 text-center mt-5 mb-4">Parece que tenemos un lindo <span>usuario</span> nuevo...</h2>

    <div class="form-group row">
        <label class="col-2 col-form-label" for="nombre">Tu nombre</label>
        <input class="col-10" id="nombre" type="text" minlength="3" maxlength="25" name="nombre" placeholder="Ejemplo: Indi3_Geek" required/>
        <h6 class="col-2">hola</h6>
        <small class="col-10 form-text text-muted">El apodo que prefieras con tal de que tenga al menos tres caracteres y no más de veinticinco</small>
    </div>

    <div class="form-group row">
        <label class="col-2 col-form-label" for="correo">Un correo</label>
        <input class="col-10" id="correo" type="email" minlength="3" maxlength="100" name="correo" placeholder="Ejemplo: [email protected]" required/>
        <h6 class="col-2">hola</h6>
        <small class="col-10 form-text text-muted">Utiliza una dirección de correo electrónico que utilices habitualmente en caso de que necesitemos contactar contigo</small>
    </div>

    <div class="form-group row">
        <label class="col-2 col-form-label" for="contrasena">Una contraseña</label>
        <input class="col-4" id="contrasena" type="password" name="contrasena" minlength="3" maxlength="25" placeholder="Mejor no dar ejemplos..." required/>
        <label class="col-2 col-form-label" for="contrasena2">Confírmanosla, anda</label>
        <input class="col-4" id="contrasena2" type="password" name="contrasena2" minlength="3" maxlength="25" required/>
        <h6 class="col-2">hola</h6>
        <small class="col-10 form-text text-muted">De nuevo, sólo la restricción de los caracteres (entre 3 y 25)</small>
    </div>

</form>

<div class="form-group form-inline">
    <button class="btn btn-info mr-1" form="form-alta-usuario" id="enviar" type="submit">¡Adelante!</button>
    <button class="btn btn-info mr-2 confirmacion" form="form-alta-usuario" type="reset">Algo no me convence...</button>
    
</div>

Referencia: Sweetalert

8
  • 1
    Supongo que debería migrar a SweetAlert2, por otro lado. Commented el 17 sept. 2019 a las 11:53
  • Modifiqué para añadir como se haría con Sweetalert2.
    – phpMyGuel
    Commented el 17 sept. 2019 a las 11:59
  • Sustituí tu código de SweetAlert por el mío y tampoco había reacción; te pregunta si lo quieres borrar pero no te lo borra. Commented el 17 sept. 2019 a las 12:01
  • 1
    Porque Sweetalert lo único que hace es devolverte un valor dependiendo del botón al que pulses. En la parte donde examinas ese valor (en mi ejemplo el if y el else) tienes que añadirle tú la lógica de como borras los datos. Yo dejé unos consolelogs para que vieses en donde tienes que poner tu código de borrado o tu código para reaccionar a cuando el usuario pulsa en no borrar
    – phpMyGuel
    Commented el 17 sept. 2019 a las 12:03
  • 1
    Actualicé la respuesta para que veas como funciona con tu código. Espero que así te quede más claro.
    – phpMyGuel
    Commented el 17 sept. 2019 a las 12:17
0

En SweetAlert, dentro de swal(), primero pones el bloque donde defines básicamente la apariencia y el tipo de popup que se crea, seguidamente puedes llamar a una función, que se ejecuta en caso de confirmación, entonces para tu ejemplo:

swal(
    {
        ...
    },
    resetForm()
)

definiendo fuera del swal la función resetForm() con la implementación necesaria.


En En SweetAlert 2, creo que es la versión que estás usando, se usan promesas, entonces:

swal({
  ...
})
.then((willClean) => {
    if (willClean) {
        resetForm()
    }
});
3
  • Qué va, es la 1, no sabía siquiera que había una tercera. Commented el 17 sept. 2019 a las 11:55
  • 1
    @Javier Blanco, creo que me equivoque y eran la versión 1 y la 2. Corrijo.
    – Orici
    Commented el 17 sept. 2019 a las 17:25
  • En la 1 también se pueden usar promesas de todas formas; es como resolví el problema. Commented el 18 sept. 2019 a las 7:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.