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