Odtnhj

Bootstrap Modal button save is not working when clicked.Below is my jquery:

$('#add-more-academic').on('click',function()
 $('#myModal').modal();
 )
 //==================================================
 $('.SaveAcademic').on('click',function(){
 var academic = $('#new-academic').val();
 alert(academic);

Upon clicking Save on my modal an alert dialog should display showing what I have entered in my text box. Below is my modal:

<!-- Modal -->
<div id="myModal" tabindex="-1" aria-hidden="true" class="modal fade" role="dialog">
 <div class="modal-dialog">

 <!-- Modal content-->
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal">&times;</button>
 <h4 class="modal-title">Academic Year</h4>
 </div>
 <div class="modal-body">
 <div class="row">
 <div class="col-sm-12">
 <input type="text" name="academic_year" id="new-academic" class="form-control" placeholder="Academic Year">
 </div>
 </div>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 <button type="button" class="btn btn-success SaveAcademic" id="SaveAcademic">Save</button>
 </div>
 </div>

 </div>
</div>
</html>

Check this link for more info about bootstrap and alerts.