skip to Main Content

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


  1. 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" class="btn btn-primary" data-id="MAGIC" data-toggle="modal" data-target="#exampleModal">
      Launch demo modal
    </button>
    
    <!-- Modal -->
    <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">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search