I have three divs
each looking like this
<div class="col-lg-6 col-md-6 col-sm-12 mb-4">
<div class="card">
<div class="card-body b-primary">
<div class="row justify-content-center">
<div class="col-md-5 col-sm-12">
<img src="assets/images/gateway/61eedfd72289f1643044823.jpg" class="card-img-top w-100"
alt="Stripe">
</div>
<div class="col-md-7 col-sm-12">
<ul class="list-group text-center">
<li class="list-group-item">Stripe</li>
<li class="list-group-item">Limit : 50- 50000 USD</li>
<li class="list-group-item"> Charge - 0 USD+ 0% </li>
<li class="list-group-item">
<button type="button" data-id="str"
data-base_symbol="" class=" btn deposit cmn-btn w-100" 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 class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content modal-content-bg">
<div class="modal-header">
<strong class="modal-title method-name text-white" id="exampleModalLabel">Input Deposit Amount</strong>
<a href="javascript:void(0)" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</a>
</div>
<form action=" {{ route('deposit_request') }}" method="post" class="register">
@csrf
<div class="modal-body">
<div class="form-group">
<input type="hidden" name="method_code" class="edit-method-code" value="">
<x-jet-validation-errors class="mb-4" />
@include('flash-message')
</div>
<div class="form-group">
<label>Enter Amount:</label>
<div class="input-group">
<input id="amount" type="text" class="form-control form-control-lg" name="usdamt"
placeholder="0.00" required="" autocomplete="off">
<div class="input-group-prepend">
<span class="input-group-text currency-addon addon-bg">USD</span>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-md btn-danger" data-dismiss="modal">Close</button>
<button type="submit" class="btn-md cmn-btn">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
2
Answers
Bootstrap provides events of their modals.
The event I used here is
show.bs.modal
. The event details has a property calledrelatedTarget
which tells you what prompted the modal event.From that element you can extract the
data-id
attribute.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:
CodeSandbox to demonstrate above.
Hope it helps.