-1

estoy usando laravel y tengo un formulario que al enviarse quiero que cargue contenido con ajax y que se matenga parte de mi pagina y no me redireccione directamente a la ruta que tiene el action, trate de hacerlo como otras funciones de click que ya tenia pero solo me bota el json de mi controlador al enviar el formulario

<div class="card">
<h5 class="card-header">Agregar Region</h5>
<div class="card-body">
    <p class="cart-text">
        <div class="table-responsive">
            <form id="formulario-agregar-region" action="{{route('Rstore')}}" method="POST" enctype="multipart/form-data">
                @csrf
                <label for="">Nombre</label>
                <input type="text" name="nombre" class="form control" required>
                <br></br>
                <label for="">Descripcion</label>
                <input type="text" name="descripcion" class="form control" value="...">
                <br></br>
                <label for="">Otros</label>
                <input type="text" name="otros" class="form control" value="...">
                <br></br>
                <a href="" class="btn btn-info" id="volver-index" data-url-Avolver="{{route('regiones')}}">
                    <span class="fa fa-solid fa-undo-alt"></span>Regresar</a>
                <button id="agregar-region-btn" class="btn btn-primary">Agregar
                    <span class="fa fa-solid fa-user-plus"></span>
                </button>
                
            </form>
            
        </div>
    </p>
</div>

'en mi js tengo `

contenidoDinamico.addEventListener("click", function (event) {
    if (event.target.id === "agregar-region-btn") {
        event.preventDefault(); 
        fetch(this.action, {
            method: this.method,
            body: new FormData(this)
        })
        .then((response) => response.json())
        .then((data) => {
            
            contenidoDinamico.innerHTML = data;
            
        })
        .catch((error) => {
            console.error("Error:", error);
        });
    }
});
    

contenido dimamico es una variable que modifca un div en mi pagina princial`

2

1 respuesta 1

1

Podrías hacerlo de la siguiente manera:

// Selecciona el formulario y el botón por sus id 
const formulario = document.getElementById('formulario-agregar-region')
const btnSubmit = document.getElementById('agregar-region-btn')

// Escucha el evento click a traves de tu boton Agregar
btnSubmit.addEventListener('click', async e => {
    e.preventDefault(); // Cancela el evento por Default

    const formData = new FormData(formulario); // Formulario

    const url = `ruta`; // Aquí va la ruta a donde vas a hacer la petición por ejemplo lo que tienes en action="{{route('Rstore')}}"

    try {
        const response = await fetch(url, {
            method: 'POST',
            body: formData
        });

        const data = await response.json();
        if (!response.ok) {
            // Si no hubo éxito
            console.log(response)
        } else {
            // Si hubo éxito en la petición 
            console.log(response)
        }

    } catch (e) {
        console.log(e); // Si se produce una excepción
    }
})

Verifica que tu ruta en Laravel sea del tipo post en el archivo web.php:

Route::post('/nombreDeTuRuta', [TuController::class, 'store']);

pdt: Este @csrf no lo vayas quitar de tu html ya que este contiene el Token necesario para hacer la petición y se agrega automáticamente al formulario al declarar el formData en JS.

Espero que te sirva, Saludos!

1
  • gracias agrege las variables url y el formData y lo adapte a mi propia estructura de ajax que ya tenia y funciono
    – user339304
    el 21 sep. a las 0:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.