Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – JS Bootstrap form in modal submit twice

I have a table. In each row I have a button that open a modal, and fills it with information relevant to row, so it can be updated.

The issue is that when I click on first row’s button, it opens the modal. Let’s say I made a mistake, so I cancel in the modal (click on Cancel or click outside the modal, whatever) and then click on the second row’s button. I then hit the Save button in modal. The form is then submitted twice, once for first row, once for second.

Here is a working code snippet: if you open memb1 modal, then cancel, then open memb2 and Save, it will submit for both memb 1 and memb 2.

What am I missing?
Thanks

$(document).ready(() => {
  updateMember();
});

function updateMember() {
  const memberModal = document.getElementById('member-modal');
  if (memberModal) {
    memberModal.addEventListener('show.bs.modal', event => {
      const button = event.relatedTarget;
      const memberId = button.getAttribute('memberId');
      const paymentId = button.getAttribute('paymentId');
      console.log("update", memberId)
      patchMember(memberId, paymentId);
      console.log("update after", memberId)
    });
  }
}

function patchMember(memberId, paymentId) {
  console.log("patch", memberId)
  $('#form-member').submit((event) => {
    console.log("patch submit", memberId)
    event.preventDefault();
    })
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"  rel="stylesheet" />
<div class="modal fade" id="member-modal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="member-modal-title">Plop</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <form id="form-member" name="form-member">
            <div class="modal-body">
              <h5 class="border-bottom mb-3">Truc</h5>
              <div class="form-check mb-1">
                <input class="form-check-input" type="checkbox" value="" id="machin">
                <label class="form-check-label" for="machin">Machin</label>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
              <button type="submit" class="btn btn-info">Save</button>
            </div>
          </form>
        </div>
      </div>
    </div>
<button class="btn btn-outline-info btn-sm" memberId="1" paymentId="1}" type="button" data-bs-toggle="modal" data-bs-target="#member-modal">memb 1</button>
<button class="btn btn-outline-info btn-sm" memberId="2" paymentId="2" type="button" data-bs-toggle="modal" data-bs-target="#member-modal">memb 2</button>
Tags:

2

Answers


  1. 0

    The reason why its triggering the modal twice is because of this. data-bs-target="#member-modal". so you create 2 which could be like target="#member-modal-2" and try this same scenario. Or another reason could be that button type="submit" class="btn btn-info">Save this button on submit just triggers the both the functions. But i am pretty sure that it is because of the #member-modal so try to change the name to #member-modal-2 as try to use it and let me know.

    Thanks.

    Login or Signup to reply.
  2. 0

    You add the event listener every time you open the modal.

    You could delegate and use data attributes

    $(() => {
  $('#member-modal').on('show.bs.modal', function(event) {
    const button = $(event.relatedTarget);
    const memberId = button.attr('memberId');
    const paymentId = button.attr('paymentId');
    console.log("update", memberId);

    // Store the memberId and paymentId in the form's data attributes
    $('#form-member').data('memberId', memberId);
    $('#form-member').data('paymentId', paymentId);
  });

  // Use event delegation to handle form submission
  $('#member-modal').on('submit', '#form-member', function(event) {
    event.preventDefault();

    const memberId = $(this).data('memberId');
    const paymentId = $(this).data('paymentId');
    console.log("patch submit", memberId, paymentId);

    // Your submit logic here, e.g., making an AJAX request with memberId and paymentId
  });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search