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');

I am doing great, thanks for asking. :) On a more serious note: Greetings and salutations are not needed on SO, on contrary they often clutter the question and make it difficult to read. Please keep a good quality of your questions because future users of this site might search for similar problem and your question might help them find an answer too. — Dharman
– Dharman ♦, Commented Dec 2, 2018 at 19:48
On your jquery use e.preventDefault(); you are passing e and expecting from event — MD. Jubair Mizan
– MD. Jubair Mizan, Commented Dec 2, 2018 at 19:58

Criss · Accepted Answer · 2018-12-02 19:47:20Z

1

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();
});

answered Dec 2, 2018 at 19:47

Criss

9836 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Criss Over a year ago

What isn't working? I can't help you, when you just say that it's not working and leave it at that - give me specifics. What isn't working? What errors do you get?

Rana Robert Over a year ago

Thank you for your help, I have solve the problem now as I have add it in the following replay

Rana Robert · Accepted Answer · 2018-12-03 07:53:41Z

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

Collectives™ on Stack Overflow

Form submission using AJAX in Laravel 5.5

Controller

View

Ajax script

Router

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Controller

View

Ajax script

Router

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related