Wsrtjtyk

I'm trying to send data from my index page to a modal.

Here's my code.

Modal

  <div class="modal modal-1 fade bd-example-modal-lg " id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">

    <div class="modal-dialog modal-lg" role="document">

      <div class="modal-content">

        <div class="modal-header">

          <h5 class="modal-title subtitles" id="exampleModalLongTitle">¿Cómo funciona?</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 class="demo">



                 <!-- Here's where I want to get data -->

                 <input data-id="sum">



            </div>

        </div>

        <div class="modal-footer">

          <!-- <button type="button" class="btn btn-secondary" data-dismiss="modal"></button> -->

          <button type="button" class="btn btn-secondary" data-dismiss="modal"  data-toggle="modal" data-target="#exampleModalCenter2" >Siguiente</button> 

        </div>

      </div>

    </div>

  </div>

First, my button to show my modal

    <button type="button" data-toggle="modal" data-target="#exampleModalCenter" > Cotizar préstamo </button>

Input data that I want to send to my modal

    <input class="c-slider__loan-sum" id="sum" name="loan_sum" type="hidden" value="NaN">

    <input class="c-slider__loan-period" name="loan_period" type="hidden" value="20">

And I've been trying with this jQuery

  $('#exampleModalCenter').on('click','shown.bs.modal', function () {

    let a = $(this).data('id');

    $(".modal-body #sum").val( a );

    $('#myInput').trigger('focus');

  })

If someone could help me, I'll be so grateful

I believe your argument list for .on() is incorrect. If you want to specify multiple events to trigger the handler you separate them with a comma: .on('click, shown.bs.modal', func...).

However, I think you need to remove shown.bs.modal all together, as that event is triggered after the modal has rendered.

Another issue you may have is that you're not actually getting the values from your hidden inputs in your handler. You're just, seemingly, trying to get the id of the button that's being clicked and setting that as the value on some non-existent input in your modal. If you are trying to get the id of the button (for some reason I can't see) then you can get it like this const id = $('#buttonId').attr('id');. What you're doing is trying to get the value from a data attribute that doesn't exist on the button element: ...').data('id');.

Check out this simple example to see how you may want to handle this: https://codepen.io/dustinoverby/pen/NExXMb?editors=1010