I have a loop that creates 4 forms in the view And I put a button for each form to submit the form? What solution would you suggest to find out which form was submitted? 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>
}
Maybe you should give each of the forms a different id. and then via id you can find out which form was submitted. here is a sample for getting idea.
const form = document.querySelector("#Form_ImgGallery");
form.addEventListener("submit", function (e) {
e.preventDefault();
console.log(e.target.attributes.id.value); //Form_ImgGallery
});
The issue you have is that your loop is creating multiple elements with the same id, which is invalid. Within a single page, there can be no duplication of id. If you want to group elements, then use a class. This is what I've done in the example below.
From there you can use the this keyword in the event handler to refer to the specific form element which raised the submit event, and get information from it, or one of the form fields it contains.
$('.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>