How to Submit Form using Ajax in Laravel 9?
Published On: 22/06/2022 | Category:
Laravel
Laravel 9
Hi Dev,
In this article we will cover on how to implement How to Submit Form using Ajax in Laravel 9?. I explained simply about Laravel 9 Form Submit Using jQuery Ajax Example. you'll learn Laravel 9 jQuery Ajax Form Submit Example TutorialLaravel Form Submit Using Ajax Example Easy Steps. This article will give you simple example of How to Create Ajax Request In Laravel 9 ?. You just need to some step to done Submit Laravel Form Using Ajax Post Method with Validation.
This article will give you simple example of Form submit using ajax in laravel 9
Let's start following example:
Step 1: Install LaravelFirst of all we are going from scratch new laravel application. if you have already created the project, then skip following step.
composer create-project laravel/laravel example-appStep 2 : Create Routes routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\AjaxFormController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/ajax-form',[AjaxFormController::class, 'index']);
Route::post('/ajax-form-submit',[AjaxFormController::class, 'ajaxFormSubmit'])->name('ajaxFormSubmit');
Step 3 : Create New Controller
In this second step, we need to create a new AjaxFormController; in this file, we will add two method index() and store() for create and store an User.
Let's create AjaxFormController by following command:
php artisan make:controller AjaxFormControllerapp/Http/Controllers/AjaxFormController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
class AjaxFormController extends Controller
{
/**
* Write Your Code..
*
* @return string
*/
public function index()
{
return view('index');
}
/**
* Write Your Code..
*
* @return string
*/
public function ajaxFormSubmit(Request $request)
{
$request->validate([
'name' =>'required',
'email' =>'required|email',
'password' =>'required|min:4',
]);
User::create($request->all());
return response()->json(['message' => 'Form Uploaded successfully']);
}
}
Step 4: Create Blade File
resources/views/index.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>How to Submit Form using Ajax in Laravel 9?</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container mt-5 pt-5">
<div class="row d-flex justify-content-center">
<div class="col-md-10">
<div class="card">
<div class="card-header bg-primary text-white">
<h3 class="text-center">How to Submit Form using Ajax in Laravel 9? - Tuts-Station.com</h3>
</div>
<div class="card-body">
<div class="alert alert-dismissible fade show" style="display:none;" role="alert">
<div id="result"></div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<form action="javascript:void(0)" id="laravel-ajax-form" method="POST">
<div class="mt-3">
<label>Name : <span class="text-danger">*</span></label>
<input type="text" id="name" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" placeholder="Enter Name">
</div>
<div class="mt-3">
<label>Email : <span class="text-danger">*</span></label>
<input type="email" id="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}" placeholder="Enter email">
@error('email')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="mt-3">
<label>Password : <span class="text-danger">*</span></label>
<input type="password" id="password" name="password" class="form-control @error('password') is-invalid @enderror" value="{{ old('password') }}" placeholder="Enter password">
@error('password')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="text-center mt-3">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
@if(isset($colorCode))
<div class="row my-3">
<div class="col-md-12 d-flex justify-content-center">
<p>color code : <strong>#{{ $colorCode }}</strong></p>
</div>
<div class="col-md-12 d-flex justify-content-center">
<div style="height: 100px; width: 100px; border: 1px solid black; background-color: #{{ $colorCode }}; "></div>
</div>
</div>
@endif
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function (e) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#laravel-ajax-form').submit(function(e) {
e.preventDefault();
var name = $('#name').val();
var email = $('#email').val();
var password = $('#password').val();
$.ajax({
type:'POST',
url: "{{ route('ajaxFormSubmit')}}",
data: {name:name,email:email,password:password,_token:$('meta[name="csrf-token"]').attr('content')},
success: (data) => {
this.reset();
$('.alert').css('display','block',).css('background','#d1e7dd');
$('#result').text(data.message);
setTimeout(() => {
$(".alert").remove();
}, 3000);
},
error: function(data){
$('.alert').css('display','block',).css('background','#f8d7da');
$('#result').text(data.responseJSON.message);
setTimeout(() => {
$(".alert").remove();
}, 3000);
}
});
});
});
</script>
</html>
Run Laravel App:
All steps have been done, now you have to type the given command and hit enter to run the laravel app:
php artisan serveOutput :
I hope it can help you...