How can I add a identification value to a modal box to identify which particular div the modal is be-CodePudding

I have three divs each looking like this

<div >
                    <div >
                        <div >
                            <div >
                                <div >
                                    <img src="assets/images/gateway/61eedfd72289f1643044823.jpg" 
                                        alt="Stripe">
                                </div>
                                <div >
                                    <ul >
                                        <li >Stripe</li>
                                        <li >Limit : 50- 50000 USD</li>
                                        <li > Charge - 0 USD  0% </li>
                                        <li >
                                            <button type="button" data-id="str"
                                                data-base_symbol=""  data-toggle="modal"
                                                data-target="#exampleModal">
                                                Deposit</button>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

i have identified and differentiated each of the 3 divs using data-id now when the deposit button is clicked it opens up this modal below,

<div  id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div  role="document">
            <div >
                <div >
                    <strong  id="exampleModalLabel">Input Deposit Amount</strong>
                    <a href="javascript:void(0)"  data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </a>
                </div>
                <form action=" {{ route('deposit_request') }}" method="post" >
                   @csrf

                    <div >
                        <div >
                           
                            <input type="hidden" name="method_code"  value="">
                            <x-jet-validation-errors  />
                            @include('flash-message')
                        </div>
                        <div >
                            <label>Enter Amount:</label>
                            <div >
                                <input id="amount" type="text"  name="usdamt"
                                    placeholder="0.00" required="" autocomplete="off">
                                <div >
                                    <span >USD</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div >
                        <button type="button"  data-dismiss="modal">Close</button>
                        <button type="submit" >Next</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

now my question is how do I get the data-id variable to the hidden input in the modal to be able to identify which particular payment method was/is been used to open the modal, I suppose it can be done with Ajax or JavaScript, but not being so diverse in this areas I can seem to get it sorted out and is there a better way to differentiate the divs without using data-id

CodePudding user response：

Bootstrap provides events of their modals.

The event I used here is show.bs.modal. The event details has a property called relatedTarget which tells you what prompted the modal event. From that element you can extract the data-id attribute.

$('#exampleModal').on('show.bs.modal', function (e) {
  var data_id = $(e.relatedTarget).data('id');
  console.log(data_id);
})

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Button trigger modal -->
<button type="button"  data-id="MAGIC" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div  id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div  role="document">
    <div >
      <div >
        <h5  id="exampleModalLabel">Modal title</h5>
        <button type="button"  data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div >
        ...
      </div>
      <div >
        <button type="button"  data-dismiss="modal">Close</button>
        <button type="button" >Save changes</button>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

There could be multiple solutions, but you could implement event delegation here.

Move the click event handler up to the parent div element containing all these buttons.

In your event listener, you could do something like this:

let selectedPaymentMethod = "";

const paymentClickHandler = (event) => {
  // get the element
  const buttonClicked = event.target;
  // there are several to check if it's button, i'm using classList
  if (buttonClicked && buttonClicked.classList.contains("btn")) {
    // there are multiple ways to handle this
    // if (buttonClicked.classList.contains('stripe')) payingUsingStripe();
    // if (buttonClicked.dataset.paymentmethod === 'stripe') payingUsingStripe();
    // I would do something like below
    setPaymentMethod(buttonClicked.dataset.paymentmethod);
    displayModal();
  }
};

function setPaymentMethod(paymentMethod) {
  // do some checks to ensure valid value and then
  selectedPaymentMethod = paymentMethod;
}

CodeSandbox to demonstrate above.

Hope it helps.