0

Estoy haciendo un formulario dentro de un modal para subir un archivo excel

<div class="modal fade" id="excel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="ModalLabel">Escoja su archivo</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="formImport" action="{{route('user.import')}}" method="POST">
                @csrf
                <div class="modal-body">
                    <i class="fas fa-file-import fa-2x"></i> <input type="file" name="excel" id="excelFile" required>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">volver</button>
                    <button type="submit" class="btn btn-success" id="">Confirmar</button>
                </div>
            </form>
        </div>
    </div>
</div>

tengo esta función ajax

 $("#formImport").submit(function(e) {
        $('#excel').modal('hide')
        var form = $(this);
        var url = form.attr('action');
        $.ajax({
            url: url,
            type: "post",
            data: form,
            cache: false,
            contentType: false,
            processData: false
        })
        .done(function(res){
            console.log(res);
        });
   

});

cuando mi controlador procesa los datos me envia un json si el archivo se proceso correctamente o no, pero el res me direcciona a la ruta del controlador y en ella se muestra el json, quiero solamente quedarme en la misma pagina y con ese json mandar un mensaje

0

1 respuesta 1

1

Tienes que cambiar tu boton tipo submit por un boton normal, tu tienes esto:

<button type="submit" class="btn btn-success" id="">Confirmar</button>

Debes tener:

<button class="btn btn-success" id="botonEnviar">Confirmar</button>

Fijate en que se le puso un id al boton.

Ademas tu evento no debe ser tipo submit, si no tipo click y se lo deberas agregar al boton y no a tu formulario:

$("#botonEnviar").click(function(e) {
   ...
   tu codigo
   //Si sigue sin funcionar y te dirige a la pagina
   //Coloca aqui un preventDefault de inicios:
   e.preventDefault();
   ...
}

Ademas deberas cambiar una pequeña parte de tu codigo para poder que vaya acorde con lo que tienes en tu ajax, deberas cambiar:

var form = $(this);

por:

var form = $("#formImport");

Lo que ocurre con los botones tipo submit es que si o si debes usarlos si no estas usando ajax porque con estos es que se hace la acción de enviar datos a alguna parte, sin embargo esta acción de enviar datos al no hacer uso de ajax lo que hace es directamente enviarte a la pagina a la cual te referiste en el action.

Sin embargo como estas usando ajax, no es necesario usar un boton con un atributo type definido como submit, puesto que al usar ajax (que no recarga la pagina), ya no necesitas un boton especial, si no cualquier cosa que desencadene la llamada a tu ajax, por ejemplo puedes reemplazar tu boton tipo submit con un boton normal y seguira funcionando tu ajax sin problemas.

Con la unica diferencia de que ya no se recargara tu pagina ni te enviara al action de tu form (aunque los datos si seran enviados a este).

5
  • Hola, gracias por responder, no funciono tampoco. intente colocando el data capturando el excel por el id del input y tampoco, me sigue enviando a la ruta del controlador con el json que retorne Commented el 10 may. 2020 a las 3:42
  • 1
    Acabo de editar la respuesta, porfavor mirala de nuevo tal vez funcione...
    – Layer
    Commented el 10 may. 2020 a las 3:43
  • Igual, sigue enviandome a la ruta del action Commented el 10 may. 2020 a las 3:50
  • 1
    Probaste colocando preventDefault dentro del evento click??
    – Layer
    Commented el 10 may. 2020 a las 3:51
  • Listo amigo, con el preventDefault obtiene la respuesta. Muchas gracias Commented el 10 may. 2020 a las 3:56

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.