Laravel Form Submit Using Ajax with Validations Example step by step from scratch is today’s leading topic. Here we are going to share how to submit data a click event using jquery ajax request and save data into database table. To saving data in database using laravel 7 we use POST request to submit data using ajax jquery easy step.
Using jquery ajax request we submit data in database without refresh the page also show the error and success messages easily. Le’ts checkout how to submit a form in laravel 7 using ajax jquery. This example works in your laravel 5, laravel 6, laravel 7 or laravel 8 version.
Step 1: Add Routes
First add two routes in your web.php file.
routes/web.php
Route::get('contact-form', 'ContactController@create');
Route::post('contact-form', 'ContactController@store');Step 2: Create Model & Migration File
Run the below command generate the model and migration file.
php artisan make:model Contact -mAfter this add below code in your migration file.
database\migrations\2020_07_26_073923_create_contacts_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateContactsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('contacts', function (Blueprint $table) {
$table->id();
$table->string('name')->nullable();
$table->string('email')->nullable();
$table->string('mobile_number')->nullable();
$table->string('subject')->nullable();
$table->text('message')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('contacts');
}
}
Run Migrate Commad
php artisan migrateAdd FIllable Properties
Add gillable properties in your contact model.
app\Contact.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Contact extends Model
{
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'name', 'email', 'subject', 'mobile_number', 'message'
];
}
Step 3: Create Controller
Create a new controller just run the below command in your terminal.
php artisan make:controller ContactControllerAfter getting the new controller put the below code on it. Here we have added two methods one is showing the form and the another is for showing validations errors and saving the data in database.
app/Http/Controllers/ContactController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Contact;
class ContactController extends Controller
{
public function create()
{
return view('contact-form');
}
public function store(Request $request)
{
$request->validate([
'name' => 'required',
'email' => 'required|email',
'subject' => 'required',
'mobile_number' => 'required|numeric',
'message' => 'required',
]);
Contact::create([
'name' => $request->name,
'email' => $request->email,
'subject' => $request->subject,
'mobile_number' => $request->mobile_number,
'message' => $request->message,
]);
return response()->json([ 'success'=> 'Form is successfully submitted!']);
}
}
Step 4: Create Blade File
Crate a new blade file which is show the form where we send the ajax request for showing form validations and etc functionalities.
resources\views\contact-form.blade.php
<html lang="en">
<head>
<title>Laravel Ajax jquery Validation Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<div class="container panel panel-default ">
<h2 class="panel-heading">Laravel Ajax jquery Validation</h2>
<form id="contact-form">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Enter Name" id="name">
<span class="text-danger" id="name-error"></span>
</div>
<div class="form-group">
<input type="text" name="email" class="form-control" placeholder="Enter Email" id="email">
<span class="text-danger" id="email-error"></span>
</div>
<div class="form-group">
<input type="text" name="mobile_number" class="form-control" placeholder="Enter Mobile Number" id="mobile_number">
<span class="text-danger" id="mobile-number-error"></span>
</div>
<div class="form-group">
<input type="text" name="subject" class="form-control" placeholder="Enter subject" id="subject">
<span class="text-danger" id="subject-error"></span>
</div>
<div class="form-group">
<textarea class="form-control" name="message" placeholder="Message" id="message"></textarea>
<span class="text-danger" id="message-error"></span>
</div>
<div class="form-group">
<button class="btn btn-success" id="submit">Submit</button>
</div>
<div class="form-group">
<b><span class="text-success" id="success-message"> </span><b>
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#contact-form').on('submit', function(event){
event.preventDefault();
$('#name-error').text('');
$('#email-error').text('');
$('#mobile-number-error').text('');
$('#subject-error').text('');
$('#message-error').text('');
name = $('#name').val();
email = $('#email').val();
mobile_number = $('#mobile_number').val();
subject = $('#subject').val();
message = $('#message').val();
$.ajax({
url: "/contact-form",
type: "POST",
data:{
name:name,
email:email,
mobile_number:mobile_number,
subject:subject,
message:message,
},
success:function(response){
console.log(response);
if (response) {
$('#success-message').text(response.success);
$("#contact-form")[0].reset();
}
},
error: function(response) {
$('#name-error').text(response.responseJSON.errors.name);
$('#email-error').text(response.responseJSON.errors.email);
$('#mobile-number-error').text(response.responseJSON.errors.mobile_number);
$('#subject-error').text(response.responseJSON.errors.subject);
$('#message-error').text(response.responseJSON.errors.message);
}
});
});
</script>
</body>
</html>
Great! you have learned Laravel 7 Form Submit Using Ajax with Validations Example tutorials. I hope this is work for you.. If any question feel free to contact below.
jhj