In this post, we learn how to submit a form by the Ajax post method in laravel. Ajax is great to submit forms or get data from the database without reloading or refresh the page.
We also validation our data in the Laravel controller and show an error message in your blade file.

Step 1: Make Route for Submit Form
Here I make two routes one to get the form and another to submit the form.
Route::get('get-form', 'ContactController@create');
Route::post('submit-form', 'ContactController@store');
Step 2: Create a Model, Controller and Migration
We create a model, controller, and migration file with the following one command.
php artisan make:model Contact -mcr
By running this command artisan will generate model, controller, and migration file for contact.
Step : 3 Migration Contact Form
To migrate the contact migration run this command
php artisan migrate
Step: 4 Make a Simple Contact Form
In this form, we added a success alert, which is shown when the form is submitted successfully, and an error message, which is come from the Laravel controller.
<div class="alert alert-success" role="alert" id="successMsg" style="display: none" >
Thank you for getting in touch!
</div>
<form id="SubmitForm">
<div class="mb-3">
<label for="InputName" class="form-label">Name</label>
<input type="text" class="form-control" id="InputName">
<span class="text-danger" id="nameErrorMsg"></span>
</div>
<div class="mb-3">
<label for="InputEmail" class="form-label">Email address</label>
<input type="email" class="form-control" id="InputEmail">
<span class="text-danger" id="emailErrorMsg"></span>
</div>
<div class="mb-3">
<label for="InputMobile" class="form-label">Mobile</label>
<input type="number" class="form-control" id="InputMobile">
<span class="text-danger" id="mobileErrorMsg"></span>
</div>
<div class="mb-3">
<label for="InputMessage" class="form-label">Message</label>
<textarea class="form-control" id="InputMessage" cols="30" rows="4"></textarea>
<span class="text-danger" id="messageErrorMsg"></span>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Step 5: Jquery Ajax code for sending form
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
$('#SubmitForm').on('submit',function(e){
e.preventDefault();
let name = $('#InputName').val();
let email = $('#InputEmail').val();
let mobile = $('#InputMobile').val();
let message = $('#InputMessage').val();
$.ajax({
url: "/submit-form",
type:"POST",
data:{
"_token": "{{ csrf_token() }}",
name:name,
email:email,
mobile:mobile,
message:message,
},
success:function(response){
$('#successMsg').show();
console.log(response);
},
error: function(response) {
$('#nameErrorMsg').text(response.responseJSON.errors.name);
$('#emailErrorMsg').text(response.responseJSON.errors.email);
$('#mobileErrorMsg').text(response.responseJSON.errors.mobile);
$('#messageErrorMsg').text(response.responseJSON.errors.message);
},
});
});
</script>
Step 6: FormController.php
In this file, we validate and store the data method.
public function store(Request $request)
{
$request->validate([
'name' => 'required',
'email' => 'required|email',
'mobile' => 'required|regex:/^([0-9\s\-\+\(\)]*)$/|min:10',
'message' => 'required',
]);
$contact = new Contact;
$contact->name = $request->name;
$contact->email = $request->email;
$contact->mobile = $request->mobile;
$contact->message = $request->message;
$contact->save();
return response()->json(['success'=>'Successfully']);
}
I hope it can help you…

Brijpal Sharma is a web developer with a passion for writing tech tutorials. Learn JavaScript and other web development technology.