laravel Bootstrap 模式：在输入字段中动态加载值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38221012/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap modal: dynamically load value in input field
提问by wiwa1978
I have a Bootstrap modal in a Laravel app that I'm trying to dynamically load. The idea is to fill the input fields in the modal with data coming from my database so I can update the values. I'm almost there....
我正在尝试动态加载的 Laravel 应用程序中有一个 Bootstrap 模式。这个想法是用来自我的数据库的数据填充模式中的输入字段，以便我可以更新值。我快到了....
I have the following in my view file:
我的视图文件中有以下内容：
<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>
The 'data-id' and 'data-title' are passed to a JS function that looks as follows:
'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'));
});
});
This JS function captures the id and title successfully. In the below modal view, I can print out the id in the panel-title because I'm telling in JS to put the data in the id="auctionLabel".
这个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>
My question is how I need to change the Javascript function in order to pre-fill the input fields with the value of the title. In other words, I want the value of the input box to contain the 'title' that I captured in the JS file.
我的问题是我需要如何更改 Javascript 函数以便用标题的值预填充输入字段。换句话说，我希望输入框的值包含我在 JS 文件中捕获的“标题”。
回答by Pratik Deshmukh
Try this :
尝试这个 ：
$('#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'))
});
回答by Yates
You can use .val( value )to set/change the input value in jQuery.
您可以使用.val( value )在 jQuery 中设置/更改输入值。
