Ajax with laravel

76 0 0 0

Last Updated : 2021-02-27 00:30:42

this snippet will explain how to create ajax requests with laravel specially with forms

to use ajax with laravel you must follow these steps 

1- add csrf meta tag to head in your html file

<meta name="csrf-token" content="{{ csrf_token() }}"> 

2- create your route to use it in the form like this

Route::post("sendMessage", ['uses'=>'MessageController@store', 'as'=>'sendMessage']);

3- create your form and assign your route to form action and specify form method like this

<form class="p-5 bg-white" id="messagingForm" action="{{ route('sendMessage') }}" method="post">  // assigned action and method here            

<div class="row form-group">
<div class="col-md-12 mb-3 mb-md-0">
<label class="text-black" for="fname">الاسم <span class="text-danger">*</span></label>
<input type="text" name="mes_name" id="name" class="form-control rounded-0">

<div class="row form-group">

<div class="col-md-12">
<label class="text-black" for="email">البريد الالكترونى <span class="text-danger">*</span></label>
<input type="email" name="mes_email" id="email" class="form-control rounded-0">

<div class="row form-group">

<div class="col-md-12">
<label class="text-black" for="subject">عنوان الرسالة</label>
<input type="subject" name="mes_subject" id="subject" class="form-control rounded-0">

<div class="row form-group">
<div class="col-md-12">
<label class="text-black" for="message">الرسالة <span class="text-danger">*</span></label>
<textarea name="mes_message" id="message" cols="30" rows="7" class="form-control rounded-0" placeholder="اكتب رسالتك هنا ..."></textarea>

<div class="row form-group">
<div class="col-md-12 text-right">
<button type="button" value="ارسال" id="sendMessageBTN" class="btn btn-primary mr-2 mb-2">ارسال</button>

4- create ajax request like this

$("#sendMessageBTN").click(function () {
// get form and its dependences
var theForm = $("#messagingForm"); // here specify the form
var formAction = theForm[0].action; // specify action of this form
var formMethod = theForm[0].method; // specify method of this form
var formData = theForm.serialize(); // specify data of this form
//console.log(formData); // you can console log form data before moving to the next step
//console.log(formAction); // you can console log form action before moving to the next step
//console.log(formMethod); // you can console log form method before moving to the next step

url: formAction ,
method: formMethod ,
data: formData ,
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
dataType: "json",
success: function(data){
if (data['messages_errors']) {
console.log(data['messages_errors']) ;
} else {
console.log(data['messages_success']) ;
error: function(){
alert("failed .. Please try again !");
}) ;


5- create function in controller like this

public function store(Request $request) {           
$mes_name = $request->input('mes_name');
$mes_email = $request->input('mes_email');
$mes_subject = $request->input('mes_subject');
$mes_message = $request->input('mes_message');

$rules = [
'mes_name' => 'required',
'mes_email' => 'required|email',
'mes_message' => 'required',

$messages = [
'mes_name.required'=>"برجاء ادخال الاسم" ,
'mes_email.required'=>"برجاء ادخال البريد الالكترونى" ,
'mes_message.required'=>"برجاء كتابه الرسالة المطلوبه" ,

$validator = Validator::make($request->all(), $rules, $messages);

$errors = $validator->errors();

if (count($errors) > 0) {
return response()->json(['messages_errors'=>$errors]);
} else {
$newmessage = new Message();
$newmessage->name = $mes_name;
$newmessage->email = $mes_email;
$newmessage->subject = $mes_subject;
$newmessage->message = $mes_message;
$success = $newmessage->save();

if ($success) {
return response()->json(['messages_success'=>'تم ارسال الرساله بنجاح']);
} else {
return response()->json(['messages_errors'=>'حدث خطا ما ... برجاء المحاولة لاحقا']);


Mahmoud Anwar

Mahmoud Anwar

Back End Developer with a passion for developing innovative web applications that expedite the efficiency and effectiveness of organizational success. Well-versed in technology and writing code to create systems that are reliable and user-friendly. Also has the proven ability to motivate, educate, and collaborate effectively to build web applications and effectively track changes. Confident communicator, strategic thinker, and innovative creator to develop software that is customized to meet a company’s organizational needs, highlight their core competencies, and further their success.