How to set value to a text-box present on bootstrap modal after it opened up by clicking on a hyperlink?
I think that you are not binding the function to the correct event of the modal.
Bootstrap modals have a few custom events for hooking into modal functionality: show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal, loaded.bs.modal
.
The event you should be using is show.bs.modal
, which fires immediately when the show
instance method is called.
Try the following code:
$(document).ready(function() {
$('#myModal-add-event').on('show.bs.modal',function(){
$("#selected_groupname").val('Hello...How are you?');
});
});
You can read more about bootstrap modal's events here: http://getbootstrap.com/javascript/#modals-events.
PHPFan
Updated on June 06, 2022Comments
-
PHPFan almost 2 years
I'm using Bootstrap v3.3.5 in my website.
I've a hyperlink upon clicking of which a bootstrap modal dialog gets open. The HTML of that hyperlink is as follows :
<a href="#myModal-add-event" data-toggle="modal">Add Event</a>
The HTML code of modal dialog is as follows :
<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>
I want to set the value as Hello...How are you? into the text-box with id
'selected_groupname'
For it I tried below code but it didn't work for me.
$(document).ready(function() { $(function() { $('#myModal-add-event').bind('show',function(){ $("#selected_groupname").val('Hello...How are you?'); }); }); });
Also, I checked in Firebug console. There also I didn't get any error or warning.
Please somebody help me.
-
PHPFan over 8 yearsStill no success. Even I tried alert("Hello"). The alert also doesn't get appeared.
-
PHPFan over 8 yearsStill no success. Even I tried alert("Hello"). The alert also doesn't get appeared.
-
PHPFan over 8 yearsActually I tried to assign value of one hidden input field to another input field of type text by using following code but it's not assigning the value. Why so? $("#selected_groupname").value = $("#hidden_selected_groupname").val(); Can you please guide me in this regard?
-
andreivictor over 8 yearsTry this:
$("#selected_groupname").val( $("#hidden_selected_groupname").val() )
; -
andreivictor over 8 yearsGlad I could help you.
-
andreivictor over 5 yearsBootstrap modals are built on jQuery, why whould you want a non-jQuery solution?