Отправка данных из индекса в модал начальной загрузки

Question

Я пытаюсь отправить данные со своей индексной страницы на модал.

Вот мой код.

Модальные

  <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>

Во-первых, моя кнопка, чтобы показать мой модальный

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

Входные данные, которые я хочу отправить на мой модальный

    <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">

И я пытался с этим JQuery

  $('#exampleModalCenter').on('click','shown.bs.modal', function () {
    let a = $(this).data('id');
    $(".modal-body #sum").val( a );
    $('#myInput').trigger('focus');
  })

Если кто-то может мне помочь, я буду так благодарен

Answer 1

Я считаю, что ваш список аргументов для .on() неверен. Если вы хотите указать несколько событий для запуска обработчика, вы разделяете их запятой: .on('click, shown.bs.modal', func...).

Однако, я думаю, вам нужно удалить shown.bs.modal все вместе, так как это событие срабатывает после рендеринга модала.

Другая проблема, с которой вы можете столкнуться, заключается в том, что вы на самом деле не получаете значения из скрытых входных данных в вашем обработчике. Похоже, вы просто пытаетесь получить идентификатор кнопки, на которую нажимаете, и устанавливаете ее как значение для какого-либо несуществующего ввода в вашем модале. Если вы пытаетесь получить идентификатор кнопки (по какой-то причине я не вижу), то вы можете получить его вот так const id = $('#buttonId').attr('id');. Вы пытаетесь получить значение из атрибута данных, который не существует в элементе кнопки: ...').data('id');.

Посмотрите на этот простой пример, чтобы узнать, как вы можете справиться с этим: https://codepen.io/dustinoverby/pen/NExXMb?editors=1010