title: How to set value to a text-box present on bootstrap modal after it opened up by clicking on a hyperlink?
body: <p>I'm using <strong>Bootstrap v3.3.5</strong> in my website.</p>
  
  <p>I've a hyperlink upon clicking of which a bootstrap modal dialog gets open. The HTML of that hyperlink is as follows :</p>
  
  <pre><code>&lt;a href="#myModal-add-event" data-toggle="modal"&gt;Add Event&lt;/a&gt;
  </code></pre>
  
  <p>The HTML code of modal dialog is as follows :</p>
  
  <pre><code>&lt;div id="myModal-add-event" class="modal fade" role="dialog"&gt;
    &lt;div role="document" class="modal-dialog add-event"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-body"&gt;
          &lt;h4 class="modal-title event-title"&gt;Add an Event&lt;/h4&gt;
          &lt;form method="post" action="{$site_url}add_event.php" id="formAddEvent" &gt;
            &lt;!-- The gmail look alike loader should display here only upon successfull submission of a form. --&gt;
            &lt;div class="form-group" id="addEventErrorMsg" style="display:none; color:#FF0000;"&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;input type="text" name="txt_event_title" id="txt_event_title"  autocomplete="off" class="form-control custom-height" placeholder="Event Title" style="height:30px;" /&gt;
             &lt;/div&gt;
             &lt;div class="form-group"&gt;
               &lt;textarea type="text" name="txt_event_description" id="txt_event_description"  autocomplete="off" class="form-control custom-height" placeholder="Description (optional)" style="height:60px;" &gt;&lt;/textarea&gt;
             &lt;/div&gt;
             &lt;table border="0" cellspacing="10"&gt;
               &lt;tr&gt;
                 &lt;th&gt;&lt;span class="event-title1" style="margin-bottom:5px;"&gt;Start Date:&lt;/span&gt;&lt;/th&gt;
                 &lt;th&gt;&lt;span class="event-title1" style="margin-bottom:5px;"&gt;End Date:&lt;/span&gt;&lt;/th&gt;
               &lt;/tr&gt;
               &lt;tr&gt;
                 &lt;td&gt;
                   &lt;div style="margin-right:15px;" class="form-inline form-group event-selection"&gt;
                   &lt;div class="form-group has-feedback"&gt;
                     &lt;div class='input-append date form_datetime' data-date="2013-02-21T15:25:00Z"&gt;
                       &lt;input type='text' id='event_start_date' name="event_start_date" style="width:225px; display:inline; height:30px;" class="form-control" autocomplete="off" /&gt;
                       &lt;span aria-hidden="true" class="glyphicon glyphicon-calendar form-control-feedback"&gt;&lt;/span&gt;
                     &lt;/div&gt;
                   &lt;/div&gt;
                 &lt;/div&gt;
               &lt;/td&gt;
               &lt;td&gt;
                 &lt;div class="form-inline form-group event-selection"&gt;
                   &lt;div class="form-group has-feedback"&gt;
                     &lt;div class='input-append date form_datetime' data-date="2013-02-21T15:25:00Z"&gt;
                       &lt;input type='text' id='event_end_date' name="event_end_date" style="width:225px; display:inline;height:30px;" class="form-control" autocomplete="off" /&gt;
                       &lt;span aria-hidden="true" class="glyphicon glyphicon-calendar form-control-feedback"&gt;&lt;/span&gt;
                     &lt;/div&gt;
                   &lt;/div&gt;
                 &lt;/div&gt;
               &lt;/td&gt;
             &lt;/tr&gt;
           &lt;/table&gt;   
           &lt;div class="form-group has-feedback"&gt;
             &lt;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;" /&gt;
             &lt;span class="glyphicon glyphicon-map-marker form-control-feedback" aria-hidden="true"&gt;&lt;/span&gt;        
           &lt;/div&gt;     
           &lt;div style="clear:both;"&gt; &lt;/div&gt;
           &lt;div id="map"&gt;&lt;/div&gt;
           &lt;div class="form-group"&gt;
             &lt;input type="text" name="txt_event_room" id="txt_event_room"  autocomplete="off" class="form-control custom-height" placeholder="Room No." style="height:30px;" /&gt;
           &lt;/div&gt;
           &lt;div class="form-group"&gt;
             &lt;div id="custom-templates"&gt;
               &lt;input class="typeahead form-control custom-height" id="selected_groupname" name="selected_groupname" type="text" placeholder="Invite Group"&gt;
               &lt;input type="hidden" name="selected_groupid" id="selected_groupid" value=""  /&gt;
             &lt;/div&gt;
           &lt;/div&gt;        
           &lt;div class="modal-footer text-center"&gt;
             &lt;button class="btn btn-primary" id="btn_add_event" type="button"&gt;Add Event&lt;/button&gt;
             &lt;button data-dismiss="modal" class="btn btn-default" type="button"&gt;Cancel&lt;/button&gt;
           &lt;/div&gt;
         &lt;/form&gt;
       &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to set the value as <strong>Hello...How are you?</strong> into the text-box with id <code>'selected_groupname'</code></p>
  
  <p>For it I tried below code but it didn't work for me. </p>
  
  <pre><code>$(document).ready(function() {
    $(function() {
      $('#myModal-add-event').bind('show',function(){
        $("#selected_groupname").val('Hello...How are you?');
      });
    });
  });
  </code></pre>
  
  <p>Also, I checked in Firebug console. There also I didn't get any error or warning.</p>
  
  <p>Please somebody help me.</p>