将数据从索引发送到引导模式

时间:2018-11-07 21:36:23

标签: javascript jquery html bootstrap-4

我正在尝试将数据从索引页发送到模式。

这是我的代码。

模式

  <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');
  })

如果有人可以帮助我,我将非常感激

1 个答案:

答案 0 :(得分:0)

我相信您的.on()的论点列表不正确。如果要指定多个事件来触发处理程序,请用逗号将它们分开:.on('click, shown.bs.modal', func...)

但是,我认为您需要一起删除shown.bs.modal,因为该事件是在渲染模态后触发的。

您可能遇到的另一个问题是您实际上没有从处理程序中的隐藏输入中获取值。看来,您只是在尝试获取要单击的按钮的ID,并将其设置为模态中某些不存在的输入的值。如果您尝试获取按钮的ID(出于某种原因,我看不到),则可以像这样const id = $('#buttonId').attr('id');来获取它。您正在做的是尝试从按钮元素...').data('id');上不存在的数据属性中获取值。

请查看以下简单示例,以了解如何处理此问题:https://codepen.io/dustinoverby/pen/NExXMb?editors=1010