2

Estoy creando una tienda online como proyecto escolar en Laravel. Todo va bien hasta que quiero evitar que un botón ejecute su acción submit.

Ese es el código del formulario al que quiero condicionar con AJAX:

{!! Form::open(['url' => '/in_cursos_carts', 'method' => 'POST', 'class' => "addtocart inline-block" ]) !!}
<input type="hidden" name="curso_id" value="{{$curso->id}}">
<input type="submit" value="Agregar al carrito" class="btn btn-info">
{!! Form::close() !!}

Y este es el código AJAX que quiero ejecutar en el submit del formulario:

$('.addtocart').on("submit", function(ev) { 
    ev.preventDefault();

    var $form = $(this);
    var $button = $form.find("[type='submit']");

    $.ajax({
        url: $form.attr("action"),
        method: $form.attr("method"),
        data: $form.serialize(),
        beforeSend: function() {
            $button.val("Cargando...");
        },
        success: function() {
            $button.css("background-color", "#00c853").val("Agregado"); 
        },
        error: function() {
            console.log(err);
            $button.css("background-color", "d50000").val("Hubo un error.");
            setTimeout(function() {
                restartButton($button);
            }, 5000);
        },
    });

    return false;

});


function restartButton($button) {
    $button.val("Agregar al Carrito").attr("style", "");
};

La idea es que desde la vista donde aparecen los productos el usuario pueda agregar el producto al carrito de compras sin tener que ir a la pantalla donde va a pagar pero al parecer el ev.preventDefault(); no está ejecutándose.

2
  • Intenta prevenir el form de los siguientes eventos: preventDefault(), stopPropagation(), y stopImmediatePropagation()
    – Jorius
    Commented el 7 jun. 2017 a las 21:56
  • 1
    ¿Cuál es el motivo por el que piensas que no se ejecuta el preventDefault()? ¿Se manda el formulario? ¿Se llega a ejecutar la función del evento? ¿Dónde pones ese código javascript? ¿Te sale algún mensaje de error en la consola de depuración de JavaScript? ¿Estás usando algún JavaScript para validar el formulario? Commented el 19 ene. 2019 a las 16:15

3 respuestas 3

1

Hay varias soluciones posibles con Vainilla JS para capturar y detener el evento.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .both-auto {
            margin-left : auto;
            margin-right: auto;
        }
        .flex {
            display: flex;
        }
        .flex-both {
            justify-content: space-between;
        }
        .flex-col {
            flex-direction: column;
        }
        .top-2 {
            margin-top: 2%;
        }
        .w-50 {
            width: 50%;
        }
    </style>
    <script>
        function log() // void
        {
            console.log(...arguments);
        }
        function qs(selector, node = null) // void
        {
            return (node || document).querySelector(selector);
        }
    </script>
</head>
<body>
    <form action="xxx.html" class="flex flex-col w-50 both-auto">
        <input type="text" class="top-2" name="name" placeholder="Nombre">
        <input type="email" class="top-2" name="email" placeholder="Email">
        <textarea name="message" class="top-2" rows="7" placeholder='Mensaje'></textarea>

        <div class="flex flex-both top-2">
            <button type="submit"
                className="btn btn-primary">
                Enviar (submit)
            </button>
            <button type="button"
                className="btn btn-primary">
                Enviar (button)
            </button>
        </div>
    </form>

    <script>
        const buttonButton = qs('button[type="button"]');
        const buttonSubmit = qs('button[type="submit"]');
        const form = qs('form');

        form.onsubmit = (ev) => {
            ev.preventDefault();
            log('form => submit event');
        }
        
        buttonSubmit.onclick = (ev) => {
            ev.preventDefault();
            log('button type submit => onclick event');
        }
        buttonSubmit.onsubmit = (ev) => {
            ev.preventDefault();
            log('button type submit => submit event');
        }
        buttonButton.onclick = (ev) => {
            ev.preventDefault();
            log('button type button => onclick event');
        }
    </script>
</body>
</html>

Puedes validar datos o lo que necesites y al finalizar enviar el formulario con una sentencia como document.querySelector('form').submit();.


Veamos el ejemplo:

He añadido un botón de tipo submit, que es el habitual y desencadena el envío de formulario y otro de tipo button. Les asocio un evento de tipo onclick a cada uno, este será el primero que se ejecute al accionar los botones, por lo tanto no llegará al submit si se controla en este punto.

Como aclaración, en HTML5 a un botón, que quieras usar como tal (no para enviar un formulario concretamente), debe tener el tipo button para que no lance un submit por defecto. Entonces el botón de tipo button que puse sólo puede controlarse con un onclick, nunca enviaría por si mismo el formulario.

Si quitas el evento onclick del botón de submit, y dejas en evento onsubmit en el formulario y en el botón, el primer que se ejecuta es el del propio botón.

Entonces, ¿que para que controlar el evento en el propio formulario? Es en el último punto en el que se ejecuta. Para un formulario como éste, lo mejor sería controlar el evento en el formulario, por esta razón: si estas dentro de un input y se pulsa enter se lanza el onsubmit, entonces para el ejemplo dejaría sólo:

const form = qs('form');
form.onsubmit = (ev) => {
    ev.preventDefault();
    log('form => submit event');
}

En este punto, un truco, para evitar que pulsando enter se envíe el formulario, justo después de la apertura del formulario, se puede añadir un botón de tipo submit deshabilitado y oculto, como este:

<button type="submit" style="display:none" disabled></button>

Esto funciona con o sin usar javascript, es decir al añadirlo solo activar el botón de tipo submit activaría el envío del formulario, ya se controle o no el evento, que ahora sí, se puede controlar en el botón o en el propio formulario. Entonces en ejemplo podría quedar:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .both-auto {
            margin-left : auto;
            margin-right: auto;
        }
        .flex {
            display: flex;
        }
        .flex-both {
            justify-content: space-between;
        }
        .flex-col {
            flex-direction: column;
        }
        .top-2 {
            margin-top: 2%;
        }
        .w-50 {
            width: 50%;
        }
    </style>
    <script>
        function log() // void
        {
            console.log(...arguments);
        }
        function qs(selector, node = null) // void
        {
            return (node || document).querySelector(selector);
        }
    </script>
</head>
<body>
    <form action="xxx.html" class="flex flex-col w-50 both-auto">
        <button type="submit" style="display:none" disabled></button>

        <input type="text" class="top-2" name="name" placeholder="Nombre">
        <input type="email" class="top-2" name="email" placeholder="Email">
        <textarea name="message" class="top-2" rows="7" placeholder='Mensaje'></textarea>

        <div class="flex flex-both top-2">
            <button type="submit"
                className="btn btn-primary">
                Enviar (submit)
            </button>
            <button type="button"
                className="btn btn-primary">
                Enviar (button)
            </button>
        </div>
    </form>

    <script>
        qs('button[type="submit"]').onsubmit = (ev) => {
            ev.preventDefault();
            log('button type submit => submit event');

            // TODO:
            // qs('form').submit();
        }
    </script>
</body>
</html>

Nota: para simplificar le he añadido un display:none en línea al butón deshabilitado, este hack en principio funciona, es importante que este disabled y oculto al usuario claro. El ideal para mi es el siguiente:

<button type="submit" disabled hidden aria-hidden="true"></button>
0

Si es un tema de versión de browser esto debería cubrir las diferentes alternativas para "preventDefault".

function(ev){
    var  event = ev | window.event;
    if(event.preventDefault){
        event.preventDefault();
    }else{
        event.returnValue = false;
    }

    ...
}
0

Intenta agregando un id a tu botón, luego agrega tu funcióndentro del evento de jQuery ready.

$(document).ready(function(){
     $('#botonSubmit').on("click", function(e){
          e.preventDefault();
    });
});

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.