Access input text field inside Bootstrap Modal using JQuery .find()

Question

I am trying to access the text which is entered into the input box but it keeps returning an empty string

Can someone help resolve the issue?

 $('#my_modal').on('show.bs.modal', function(e) { var id = $(e.relatedTarget).data('id'); var txt = $(this).find('input[id="txt"]').val(); $(this).find('button[id="save"]').click(function() { alert(id); alert(txt); }); });

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <a href="#my_modal" data-toggle="modal" data-id="1">Edit</a> <div class="modal" id="my_modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> <h4 class="modal-title">Click Save!</h4> </div> <div class="modal-body"> <div class="form-group"> <label for="txt" class="control-label">Text:</label> <input id="txt" class="form-control" autofocus="autofocus" placeholder="1000"/> </div> </div> <div class="modal-footer"> <button id="save" type="save" class="btn btn-primary" data-dismiss="modal">Save</button> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div>

Answer 1

You are trying to access the input value on modal showing, when actually the value is empty. You should access the value inside the click handler function of the button.

Please Note: this differs based on the context on which they are executing, thus modal click and button click has their own this . In order to preserve the intended this (the modal) you can store that in a variable and use that afterwards.

 $('#my_modal').on('show.bs.modal', function(e) { var id = $(e.relatedTarget).data('id'); var that = $(this); $(this).find('button[id="save"]').click(function() { var txt = that.find('input[id="txt"]').val(); alert(id); alert(txt); }); });

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <a href="#my_modal" data-toggle="modal" data-id="1">Edit</a> <div class="modal" id="my_modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> <h4 class="modal-title">Click Save!</h4> </div> <div class="modal-body"> <div class="form-group"> <label for="txt" class="control-label">Text:</label> <input id="txt" class="form-control" autofocus="autofocus" placeholder="1000"/> </div> </div> <div class="modal-footer"> <button id="save" type="save" class="btn btn-primary" data-dismiss="modal">Save</button> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div>

Answer 2

You were showing the value you had recovered before onClick. Retrieving the value within onClick will resolve

 $('#my_modal').on('show.bs.modal', function(e) { var id = $(e.relatedTarget).data('id'); var txt = $(this).find('input[id="txt"]'); $(this).find('button[id="save"]').click(function() { alert(id); alert(txt.val()); }); });

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <a href="#my_modal" data-toggle="modal" data-id="1">Edit</a> <div class="modal" id="my_modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> <h4 class="modal-title">Click Save!</h4> </div> <div class="modal-body"> <div class="form-group"> <label for="txt" class="control-label">Text:</label> <input id="txt" class="form-control" autofocus="autofocus" placeholder="1000"/> </div> </div> <div class="modal-footer"> <button id="save" type="save" class="btn btn-primary" data-dismiss="modal">Save</button> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div>