0

Tengo un formulario simple de contacto

Necesito implementarlo con sweetalert para que sólo el mensaje de success y error se muestren con sweetalert haciendo el reset del formulario en el botón cerrar del mismo sweetalert.

Funciona bien pero por el momento sólo muestra los mensajes en el div #info y no logro implementarlo con sweetalert.

    <script >
    function kapat() {
        $('#info').fadeOut(500);

    }
    function gonder() {

        $.ajax( {
            type: "POST",
            url: "http://www.domain.com/send.php",
            data:$('#contactForm').serialize(),
            success: function(cevap) {
                $('#info').show();
                if(cevap==''){
                    $('#info').html('<div class="alert alert-success margin-bottom-30">message has been sent...</div><button type="reset" class="close" data-dismiss="alert" aria-hidden="true" onClick="kapat()" >&times;</button><br />');

                }else{
                    $('#info').html('<span class="alert alert-danger">There is an Error</span><br /><input value="Close" type="reset" onClick="kapat()" />');
                }
            }

        });

    }

    </script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Solucionado agregando

Swal.fire({
icon: 'success',
title: 'Your work has been saved',
showConfirmButton: true,
}).then((result) => {
location.reload();
});

1 respuesta 1

1

En lugar de tu código de

 $('#info').html('<div class="alert alert-success margin-bottom-30">message has been sent...</div><button type="reset" class="close" data-dismiss="alert" aria-hidden="true" onClick="kapat()" >&times;</button><br />');

Pon el siguiente código, (omite la inclusión de la librería si, tú ya la tienes agregada)

Swal.fire({
  position: 'top-end',
  icon: 'success',
  title: 'Your work has been saved',
  showConfirmButton: false,
  timer: 1500
})
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

El diseño del alert varia segun lo configures, aca te dejo un ejmplo de todos los posibles

https://sweetalert2.github.io/#examples


Si quieres que cuando le des click , limpie el formulario solo tienes que:

 Swal.fire({
  position: 'top-end',
  icon: 'success',
  title: 'Your work has been saved',
  showConfirmButton: true,
}).then(function () { $('#idFormulario').trigger("reset"); })
2
  • Funciona bien al mostrar el mensaje, he cambiado para que muestre un botón de ok, cómo haría para que ese botón haga el reset del formulario?
    – Bloop
    Commented el 8 nov. 2019 a las 20:08
  • a lo que ya tienes concatenale .then(function () { $('#idFormulario').trigger("reset"); }) Commented el 8 nov. 2019 a las 22:36

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.