Bootstrap - Form not submitting inside a modal

Question

I have a form which is inside a modal which is not submitting my PHP action. When I take the form outside of the modal it submits fine as I want it to however once in the modal the submit becomes unresponsive, Here is the code that I am using:

div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" 
     aria-labelledby="myLargeModalLabel" aria-hidden="true" id="myLargeModalLabel">

  <div class="modal-dialog modal-lg">
<div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Add A New Appointment</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">



<form id="submit_form">
                     <div class="row">
                         <div class="col">
                        <label>Name</label>  
                            <input type="text" name="fname" id="fname" class="form-control" /> 
                             </div>
                      <div class="col">                         
                        <label>Date</label>  
                            <input type="date" name="datepicker" id="datepicker" class="form-control" />
                         </div> 
                                                  </div>                                                  


                        <div class="form-group">
                            <label class="CustomLabel">Appointment Information</label>  
                     <textarea name="notes" id="notes" class="form-control"></textarea>  
                     </div> 
                     <input type="button" name="submit" id="submit" class="btn btn-info" value="Add Appointment" />  
                     <span id="error_message" class="text-danger"></span>  
                     <span id="success_message" class="text-success"></span>  
                </form> 

Javascript:

 $(document).ready(function(){  
  $('#submit').click(function(){ 
  var name = $('#fname').val();  
       var message = $('#notes').val();  
       if(name == '' || message == '')  
       {  
            $('#error_message').html("All Fields are required");  
       }  
       else  
   {  
            $('#error_message').html('');  
            $.ajax({  
                 url:"insert.php",  
                 method:"POST",  
                 data:{fname:name, notes:message},  
                 success:function(data){  
                      $("form").trigger("reset");  
                      $('#success_message').fadeIn().html(data);  
                      setTimeout(function(){  
                           $('#success_message').fadeOut("Slow");  
                      }, 2000);  
                    }  
               });  
            }  
        });  
    });  

Answer 1

See this working fiddle Working Fiddle of your Code

<form id="submit_form">
  <div class="row">
    <div class="col">
      <label>Name</label>
      <input type="text" name="fname" id="fname" class="form-control" />
    </div>
    <div class="col">
      <label>Date</label>
      <input type="date" name="datepicker" id="datepicker" class="form-control" />
    </div>
  </div>


  <div class="form-group">
    <label class="CustomLabel">Appointment Information</label>
    <textarea name="notes" id="notes" class="form-control"></textarea>
  </div>
  <input type="button" name="submit" id="submit" class="btn btn-info" value="Add Appointment" />
  <span id="error_message" class="text-danger"></span>
  <span id="success_message" class="text-success"></span>
</form>

JS Code

$(document).ready(function() {
  $('#submit').click(function() {
    var name = $('#fname').val();
    var message = $('#notes').val();
    if (name == '' || message == '') {
      $('#error_message').html("All Fields are required");
    } else {
      $('#error_message').html('');
      $.ajax({
        url: "insert.php",
        method: "POST",
        data: {
          fname: name,
          notes: message
        },
        success: function(data) {
          $("form").trigger("reset");
          $('#success_message').fadeIn().html(data);
          setTimeout(function() {
            $('#success_message').fadeOut("Slow");
          }, 2000);
        }
      });
    }
  });
});

I do not see an issue, Except jquery reference not loaded. This you can see in the developer console of your browser