I have the following form:
<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>
In which it volver.php
is another button that I use to know where it was accessed from, in this case, the page where the form is, and where to return to.
I've created the following modal with jQuery and SweetAlert ( https://sweetalert.js.org/guides/ ) to control the form's reset button:
$(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,
}
}
})
})
});
The modal works but obviously does nothing. SweetAlert's documentation doesn't seem very clear to me about how to implement the code... In some other SO thread I've seen that they use a function with an argument isConfirm
but I'm not sure if it's something built-in or what. And about promises
, which is something that the help expands on a little more, I really don't have much of an idea.
I would like to do something like this but I can't implement it:
if(value) formulario.reset();
else return false;
Let's see if you can give me a cable. Thanks in advance.
Solution adopted :
I have modified my code thanks to the indications of phpMyGuel; It would work as is by adding a 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');})
})
});
With this type of plugins the difficulty is to find the appropriate code for the version you are using of them. Once you have it, just use the documentation and play with it.
With Sweetalert2
Example with user code
Reference: Sweetalert
In SweetAlert , inside
swal()
, first you put the block where you basically define the appearance and the type of popup that is created, then you can call a function, which is executed in case of confirmation, so for your example:defining outside the swal the function
resetForm()
with the necessary implementation.In SweetAlert 2 , I think it's the version you're using, promises are used, so: