Question

我在Laravel应用程序中有一个Bootstrap模式，我正在尝试动态加载。我们的想法是使用来自我的数据库的数据填充模态中的输入字段，以便我可以更新值。我快到了......

我的视图文件中包含以下内容：

   <a href="#myModal" data-toggle="modal" data-target="#edit-auction-modal" data-id="1" data-title="title 1" type="button" class="btn btn-sm btn-primary btn-warning">Open modal</a>

'data-id'和'data-title'被传递给JS函数，如下所示：

$(function() {
    $('#edit-auction-modal').on("show.bs.modal", function (e) {
         $("#auctionLabel").html('Edit auction with id '+ $(e.relatedTarget).data('id'));
         $("#auctionTitle").html($(e.relatedTarget).data('title'));
    });
});

这个JS函数成功捕获了id和title。在下面的模态视图中，我可以在面板标题中打印出id，因为我告诉JS将数据放在id =“auctionLabel”中。

<div class="row">
   <div id="edit-auction-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="panel panel-info">
                  <div class="panel-heading">
                    <div class="panel-title" id="auctionLabel"></div>
                  </div>
                </div>
                <div class="modal-body edit-content" style="padding-top:10px">
                     <form  method="POST" action="{!! route('admin_auctions_update') !!}">
                      {{ csrf_field() }}
                      <div class="form-group">
                        <label for="auction_name" class="control-label">Auction name</label>
                        <input name="auction_name" id="name" class="form-control" placeholder="Auction name" value="{{$auction->auction_name}}">
                      </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success">Update auction</button>
                </div>
            </div>
        </div>
    </div>
</div>

我的问题是我需要如何更改Javascript函数以便使用标题值预填充输入字段。换句话说，我希望输入框的值包含我在JS文件中捕获的“标题”。

Answer 1

试试这个：

$('#edit-auction-modal').on("show.bs.modal", function (e) {
     $("#auctionLabel").html('Edit auction with id '+ $(e.relatedTarget).data('id'));
     $("#auctionTitle").html($(e.relatedTarget).data('title'));
    $('#edit-auction-modal ').find('input#input-id').val($(e.relatedTarget).data('title'))
});

Answer 2

您可以使用.val( value )在jQuery中设置/更改输入值。

http://api.jquery.com/val/#val2

Bootstrap模式：在输入字段中动态加载值

2 个答案: