使用javascript动态设置打开的模态中的文本框值

时间:2016-11-23 06:19:09

标签: javascript twig bootstrap-modal symfony

在按钮上单击打开这样的模型

<a href="#edit-venue" class="btn green editButton" data-toggle="modal" data-id="2" data-placement="bottom" title="Edit"><i class="icon-note"></i></a>

模态

<div id="edit-venue" class="modal fade portlet" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog">
                                        <form class="form-horizontal" id="editVenue" method="post">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                                                    <h4 class="modal-title">Edit Venue Detail</h4>
                                                </div>
                                                <div class="modal-body">

                                                    <div class="form-group">
                                                        <label class="control-label col-sm-3"><b>Venue12</b></label>
                                                        <div class="control-label col-sm-9 text-left">
                                                            <input id="venue" name="venue" class="form-control venue_name" placeholder="Enter venue" type="text">
                                                            <span class="error"></span>

                                                            <span class="error"></span>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="control-label col-sm-3"><b>Room/Stage</b></label>
                                                        <div class="control-label col-sm-9 text-left">
                                                            <input id="roomStage" name="roomStage" class="form-control" placeholder="Enter room/stage" type="text">
                                                            <span class="error"></span>
                                                        </div>
                                                    </div>

                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" data-dismiss="modal" class="btn red">Cancel</button>
                                                    <button type="button" data-dismiss="modal" class="btn green btn_save">Save</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>

当我点击按钮打开模式时,我想点击按钮动态地使用javascript填充特定文本框中的数据。

点击按钮我得到了像{"id":67,"value":"venue 1","Xvalue":"venue 1"}

这样的回复

我试图:$('#venue_name').val(msg.value);

但我想使用#venue_name而不是closest() 我怎么能这样做?

1 个答案:

答案 0 :(得分:0)

如果我理解你的问题,你想在信息的输入框中设置值。

您需要使用模态的shown.bs.modal事件。

var msg = {"id":67,"value":"venue 1","Xvalue":"venue 1"};

$('#edit-venue').on('show.bs.modal', function (e) {
   $("#venue").val(msg.value);
})

JSFIDDLE:https://jsfiddle.net/01zrxq7y/1/

Boostrap Doc:http://getbootstrap.com/javascript/#modals-events