[英]How to set a value present in anchor tag to a hidden field upon clicking on the hyperlink text(i.e. value present in anchor tag)?
[英]How to set value to a text-box present on bootstrap modal after it opened up by clicking on a hyperlink?
我在網站上使用Bootstrap v3.3.5 。
單擊后,我有一個超鏈接,該超鏈接會打開一個引導模式對話框。 該超鏈接的HTML如下:
<a href="#myModal-add-event" data-toggle="modal">Add Event</a>
模態對話框的HTML代碼如下:
<div id="myModal-add-event" class="modal fade" role="dialog">
<div role="document" class="modal-dialog add-event">
<div class="modal-content">
<div class="modal-body">
<h4 class="modal-title event-title">Add an Event</h4>
<form method="post" action="{$site_url}add_event.php" id="formAddEvent" >
<!-- The gmail look alike loader should display here only upon successfull submission of a form. -->
<div class="form-group" id="addEventErrorMsg" style="display:none; color:#FF0000;">
</div>
<div class="form-group">
<input type="text" name="txt_event_title" id="txt_event_title" autocomplete="off" class="form-control custom-height" placeholder="Event Title" style="height:30px;" />
</div>
<div class="form-group">
<textarea type="text" name="txt_event_description" id="txt_event_description" autocomplete="off" class="form-control custom-height" placeholder="Description (optional)" style="height:60px;" ></textarea>
</div>
<table border="0" cellspacing="10">
<tr>
<th><span class="event-title1" style="margin-bottom:5px;">Start Date:</span></th>
<th><span class="event-title1" style="margin-bottom:5px;">End Date:</span></th>
</tr>
<tr>
<td>
<div style="margin-right:15px;" class="form-inline form-group event-selection">
<div class="form-group has-feedback">
<div class='input-append date form_datetime' data-date="2013-02-21T15:25:00Z">
<input type='text' id='event_start_date' name="event_start_date" style="width:225px; display:inline; height:30px;" class="form-control" autocomplete="off" />
<span aria-hidden="true" class="glyphicon glyphicon-calendar form-control-feedback"></span>
</div>
</div>
</div>
</td>
<td>
<div class="form-inline form-group event-selection">
<div class="form-group has-feedback">
<div class='input-append date form_datetime' data-date="2013-02-21T15:25:00Z">
<input type='text' id='event_end_date' name="event_end_date" style="width:225px; display:inline;height:30px;" class="form-control" autocomplete="off" />
<span aria-hidden="true" class="glyphicon glyphicon-calendar form-control-feedback"></span>
</div>
</div>
</div>
</td>
</tr>
</table>
<div class="form-group has-feedback">
<input type="text" name="txt_event_location" id="txt_event_location" autocomplete="off" class="controls form-control custom-height" placeholder="Event Location" style="height:30px;" />
<span class="glyphicon glyphicon-map-marker form-control-feedback" aria-hidden="true"></span>
</div>
<div style="clear:both;"> </div>
<div id="map"></div>
<div class="form-group">
<input type="text" name="txt_event_room" id="txt_event_room" autocomplete="off" class="form-control custom-height" placeholder="Room No." style="height:30px;" />
</div>
<div class="form-group">
<div id="custom-templates">
<input class="typeahead form-control custom-height" id="selected_groupname" name="selected_groupname" type="text" placeholder="Invite Group">
<input type="hidden" name="selected_groupid" id="selected_groupid" value="" />
</div>
</div>
<div class="modal-footer text-center">
<button class="btn btn-primary" id="btn_add_event" type="button">Add Event</button>
<button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
</div>
</form>
</div>
</div>
</div>
</div>
我想將值設置為Hello ...您好嗎? 進入ID為'selected_groupname'
的文本框
為此,我嘗試使用下面的代碼,但對我而言不起作用。
$(document).ready(function() {
$(function() {
$('#myModal-add-event').bind('show',function(){
$("#selected_groupname").val('Hello...How are you?');
});
});
});
另外,我檢查了Firebug控制台。 我也沒有收到任何錯誤或警告。
請有人幫我。
我認為您沒有將功能綁定到模態的正確事件。
Bootstrap模態具有一些用於show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal, loaded.bs.modal
模態功能的自定義事件: show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal, loaded.bs.modal
。
您應該使用的事件是show.bs.modal
,當調用show
實例方法時,它將立即觸發。
嘗試以下代碼:
$(document).ready(function() {
$('#myModal-add-event').on('show.bs.modal',function(){
$("#selected_groupname").val('Hello...How are you?');
});
});
您可以在此處閱讀有關引導模式事件的更多信息: http : //getbootstrap.com/javascript/#modals-events 。
引導模態捕獲的事件是這樣的:
$('#modalselector').bind('show.bs.modal'....
不知道它是拼寫錯誤還是您是否在js代碼中缺少selected_groupname的#
?
$("#selected_groupname").val('Hello...How are you?');
嘗試這個:
$("a").click(function(){
$("#selected_groupname").val(" Hello...How are you? ");
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.