Tengo un bucle que crea 4 formularios en la vista ¿Y pongo un botón para cada formulario para enviar el formulario? ¿Qué solución sugeriría para averiguar qué formulario se envió? html:
@foreach (var item in 4){ <form id="Form_ImgGallery" method="post"> <div class="box_galleryimg col-lg-3 col-md-3 col-sm-6 col-xs-12"> <input type="file" class="form-control"> <div class="form-group"> <input type="submit" class="btn btn-info waves-effect" value="upload"> </div> </div> </form>}
Tal vez deberías darle a cada uno de los formularios una identificación diferente. y luego, a través de la identificación, puede averiguar qué formulario se envió. Aquí hay una muestra para hacerse una idea.
const form = document.querySelector("#Form_ImgGallery"); form.addEventListener("submit", function (e) { e.preventDefault(); console.log(e.target.attributes.id.value); //Form_ImgGallery });El problema que tiene es que su ciclo está creando múltiples elementos con la misma id , lo cual no es válido. Dentro de una sola página, no puede haber duplicación de id . Si desea agrupar elementos, utilice una class . Esto es lo que he hecho en el siguiente ejemplo.
Desde allí, puede usar la palabra clave this en el controlador de eventos para hacer referencia al elemento de form específico que generó el evento de submit y obtener información de él o de uno de los campos de formulario que contiene.
$('.Form_ImgGallery').on('submit', e => { e.preventDefault(); // stop the form submitting in this example let $form = $(e.target); let file = $form.find('input[type="file"]').val(); console.log(file); }); /* plain JS version: document.querySelectorAll('.Form_ImgGallery').forEach(form => { form.addEventListener('submit', e => { e.preventDefault(); // stop the form submitting in this example let file = e.target.querySelector('input[type="file"]').value; console.log(file); }); }); */ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <form class="Form_ImgGallery" method="post"> <div class="box_galleryimg col-lg-3 col-md-3 col-sm-6 col-xs-12"> <input type="file" class="form-control"> <div class="form-group"> <button type="submit" class="btn btn-info waves-effect">upload</button> </div> </div> </form> <form class="Form_ImgGallery" method="post"> <div class="box_galleryimg col-lg-3 col-md-3 col-sm-6 col-xs-12"> <input type="file" class="form-control"> <div class="form-group"> <button type="submit" class="btn btn-info waves-effect">upload</button> </div> </div> </form> <form class="Form_ImgGallery" method="post"> <div class="box_galleryimg col-lg-3 col-md-3 col-sm-6 col-xs-12"> <input type="file" class="form-control"> <div class="form-group"> <button type="submit" class="btn btn-info waves-effect">upload</button> </div> </div> </form> <form class="Form_ImgGallery" method="post"> <div class="box_galleryimg col-lg-3 col-md-3 col-sm-6 col-xs-12"> <input type="file" class="form-control"> <div class="form-group"> <button type="submit" class="btn btn-info waves-effect">upload</button> </div> </div> </form>