Form submission using AJAX in Laravel 5.5

Question

I am trying to submit a form using ajax in Laravel 5.5 The problem is the page is refreshing and not submitting data in the database. I need to store data in the database without refreshing the page.
Here is my code:

Controller

public function new_timing_table(Request $request)
{
    if (Request::ajax()) {
        $timing_tables =  new Timing_Table;
        $timing_tables->timing_tables_name = $request->timing_tables_name;
        $timing_tables->save();
        $msg = "yes";
    } else {
        $msg = "yes";
    }
    return ['msg'=> $msg];
}

View

<form id="timeForm" class="form-horizontal form-material" >                                                                      
  <div class="form-group">                                                                      
   {{ csrf_field() }}
   <div class="col-md-12 m-b-20">
   <label> Table Name</label>
   <input type="text" id="timing_tables_name" class="form-control" 
   name="timing_tables_name" />                                                                            
   </div>
   <div class="modal-footer">
   <input type="button" value="Replace Message" id='btnSelector'>
   </div>
  </div>
</form>

Ajax script

const xCsrfToken = "{{ csrf_token() }}";
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': xCsrfToken
    }
});


jQuery(document).ready(function() {
    jQuery('#btnSelector').click(function(e) {
        event.preventDefault();
        getMessage();
    });
});
var getMessage = function() {
    var timing_tables_name = $("input[name=timing_tables_name]").val();
    $.ajax({
        type: 'post',
        url: '/new_timing_table',
        dataType: 'json', //Make sure your returning data type dffine as json
        data: timing_tables_name,
        //data:'_token = <php echo csrf_token() ?>',
        success: function(data) {
            console.log(data); //Please share cosnole data
            if (data.msg) //Check the data.msg isset?
            {
                $("#msg").html(data.msg);
            }
        }
    });
}

Router

 Route::post('/new_timing_table','Timing_TableControoler@new_timing_table');

Answer 1

My code is working now after adding beforeSend: function (request) in Ajax script

var getMessage = function(){
var timing_tables_name = $("#timing_tables_name").val();
console.log(timing_tables_name);

$.ajax({
    type:'GET',
    url:'/new_timing_table', //Make sure your URL is correct
    dataType: 'json', //Make sure your returning data type dffine as json
     data: 
     {
         timing_tables_name
     },
    beforeSend: function (request) {
            return request.setRequestHeader('X-CSRF-Token', $("meta[name='csrf- 
     token']").attr('content'));
        },
    success:function(data){
        console.log(data); //Please share cosnole data
        if(data.msg) //Check the data.msg isset?
        {
            $("#msg").html(data.msg); //replace html by data.msg
        }

    }
});
 }

and editing the controller to be simple as this one

  public function new_timing_table(Request $request){
    $timing_tables =  new Timing_Table;
    $timing_tables->timing_tables_name = $request->timing_tables_name;
    $timing_tables->save();
     $msg = "This is a simple message.";
     return ['msg'=> $msg];
      }

Thank you all for your help

Answer 2

You got a typo or a mistake in your script.

jQuery('#btnSelector').click(function(e){
    // An error here - it should be e.preventDefault();
    event.preventDefault();
    getMessage();
});