Mi formulario es como esta demostración

P.1 Me gustaría convertir este formulario a ajax pero parece que a mi código ajax le falta algo. Al enviar no hace nada en absoluto.

Q2. También quiero que la función se active al cambiar cuando el archivo se haya seleccionado para no esperar a que se envíe.

Q3. Quiero hacerlo cuando hice clic en el botón Siguiente paso. Guarde todo el formulario y vaya a la página siguiente.

mi espada

 <form method="post" enctype="multipart/form-data" action="{{ route('update', auth()->id()) }}"> @csrf @method('put') <fieldset> @include('Home.steps.step-1') </fieldset> <fieldset> @include('Home.steps.step-2') </fieldset> <fieldset> @include('Home.steps.step-3') </fieldset> <fieldset> @include('Home.steps.step-4') </fieldset> <fieldset> @include('Home.steps.step-5') </fieldset> <fieldset> @include('Home.steps.step-6') </fieldset> </form>

js

 $(document).ready(function (e) { $('.btn-next').on('click',(function(e) { e.preventDefault(); var formData = new FormData(this); $.ajax({ type:'POST', url: $(this).attr("{{ route('update', auth()->id()) }}"), data:formData, cache:false, contentType: false, processData: false, success:function(data){ console.log("success"); console.log(data); }, error: function(data){ console.log("error"); console.log(data); } }); })); });

Me sale este error en la consola.

TypeError no detectado: constructor de FormData: el argumento 1 no implementa la interfaz HTMLFormElement.