How to set value to a text-box present on bootstrap modal after it opened up by clicking on a hyperlink?

Question

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.

Answer 1

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.

Answer 2

The event to capture for bootstrap modals is this:

$('#modalselector').bind('show.bs.modal'....

Answer 3

Try this:

$("a").click(function(){
   $("#selected_groupname").val(" Hello...How are you? ");
});

Answer 4

Not sure if its a typo or are you missing the # in the js code for selected_groupname ?

$("#selected_groupname").val('Hello...How are you?');