Question

我正在尝试创建一个模式来输入发票付款。我有一个发票页面，模式是bootstrap。我需要将发票ID传递到要提交以保存的模式中。我有以下html

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#paymentsModal" data-invoice="{{ $invoice->id }}">

这是我的付款方式

                <div class="modal fade" id="paymentsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">New message</h4>
                  </div>
                  <div class="modal-body">
                    <form action="{{ route('payment.store') }}" role="form" id="paymentEvent" method="POST">
                    {{ csrf_field() }}

                    <input type="hidden" name="invoice_id" value=""> //field I want to populate with invoice_id

                      <div class="form-group">        
                        <label for="payment_amount" class="control-label">Amount:<span class="symbol required"></span></label></label>
                        <input type="text" class="form-control" id="payment_amount" name="payment_amount">
                      </div>
                      <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save</button>
                      </div>
                    </form>
                </div>
              </div>
            </div>

最后这是我的js。

        $('#paymentsModal').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget) // Button that triggered the modal
      var invoice_id = button.data('invoice')  // Extract info from data-* attributes
      // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
      // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
      var modal = $(this)
      modal.find('.modal-body input').val(invoice_id)
    });

我从CDN加载。的jquery / 2.2.3 / jquery.min.js Twitter的自举/ 3.3.6 / JS / bootstrap.min.js

Answer 1

您是否可以使用数据属性？

你可以这样做：

 <input type="hidden" data-id="invoice_id" name="invoice_id" value="123">

然后使用jQuery调用data-attribute：

console.log($('[data-id="invoice_id"]').val());
or
alert($('[data-id="invoice_id"]').val());

您还可以使用以下内容为此隐藏输入字段指定值：

$('[data-id="invoice_id"]').val('My new value')

您也可以使用ajax将数据发送到您的模态，可以使用$('[data-id="invoice_id"]').val().

希望这有帮助。

Answer 2

将其放在js中。这很有效。

$('#paymentsModal').on('show.bs.modal', function (event) {
     var invoice_id = ($('[data-invoice]').val());  // Extract info from data-* attributes
     var modal = $(this)
     modal.find('.modal-body input[name=invoice_id]').val(invoice_id)
    });

如何从laravel视图向modal发送数据？

2 个答案: