Give focus to a control in a Bootstrap modal popup window

The times that try men’s’ souls is when you have a Bootstrap modal popup window, and you can’t get the control you want to get focus. So if I have a modal popup window like so:

<div id=”resultsModal” class=”modal fade” role=”dialog”>
   <div class=”modal-dialog”>
      <div class=”modal-content”>
         <div class=”modal-header”>
            <button id=”modalClose” type=”button” class=”close” data-dismiss=”modal”>&times;</button>
            <h4 class=”modal-title text-center”>Update Record</h4>

         <div class=”modal-body”>
            <div class=”form-inline” style=”margin-left: auto; margin-right: auto; width: 400px”>
               <div class=”form-group”>
                  <label for=”theDate” >Date: </label>
                  <input type=”text” id=”theDate” class=”form-control” /><br>
                  <input type=”button” id=”save” value=”Save” onclick=”saveRecord() class=”form-control saveButton” />

         <div class=”modal-footer”>
            <button type=”button” class=”btn btn-default” data-dismiss=”modal”>Cancel</button>

To give focus to the date textbox, I use this little snippet:

$(“#myModal”).on(“”, function () {


  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: