CODEWITHSUNDEEP
javascriptjquery
sunboy_sunboy
sunboy_sunboy

Reputation: 263

javascript : Identify the form in the loop after submission?

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>

}

Upvotes: 0

Views: 119

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337560

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>

Upvotes: 1

Navab Rahimi
Navab Rahimi

Reputation: 51

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
});

Upvotes: 1

Related Questions