Laravel Form Submit Using Ajax Example Tutorial

Today, we are going to share how to submit Laravel form using Ajax jquery with validations in a simple easy way. Laravel Form Submit Using Ajax is very important for all applications without reloading or refreshing the page to save data in the database.

So following the following step by step guide on how to submit laravel form using ajax and jQuery.

Step 1: Install Laravel App

First, you need to install a fresh Laravel application using the following command:

composer create-project --prefer-dist laravel/laravel laravel-app

Next, go inside the app directory

cd laravel-app

Step 2: Setup Database Credential

Next, open the .env file which is located in your project root directory and update your database credential such as database name, username, password or your DB.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db name
DB_USERNAME=db user name
DB_PASSWORD=db password

Step 3: Make Model and Migration

Now generate a model and migration file by just adding the below command in your terminal which generates a model file and migration.

php artisan make:model Contact -m

After this open the newly created file database\migrations\2020_09_14_120412_create_contacts_table.php and add the below code on it.

<?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');
            $table->string('email');
            $table->string('mobile');
            $table->string('subject');
            $table->text('message');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('contacts');
    }
}

Next, we need to run the migrate command to generate database tables. So open your terminal and run the below command.

php artisan migrate

Next, open the app\Models\Contact.php file and add fillable properties in your contact model.

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Contact extends Model
{
    use HasFactory;

    protected $fillable = [
      'name', 'email', 'mobile', 'subject', 'message'
    ];
}

Step 5: Make Routes

First, you need to open the routes/web.php file and add two routes for implementing the Laravel form submit using ajax. One route will show the form and another is to save the data to the database using ajax request.

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ContactController;

Route::get('contact-us', [ ContactController::class, 'create' ]);
Route::post('contact-us', [ ContactController::class, 'store' ]);


Route::get('/', function () {
    return view('welcome');
});

Step 6: Create Controller

Now create a ContactController to handle your request in the backend. In this controller, we add two methods one for displaying contact form and another is submitting data in database.

php artisan make:controller ContactController

After creating the now constroller now open the app/Http/Controllers/ContactController.php file and update the following code on it.

<?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) {
      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 7: Create Blade File for Ajax Request

Now navigate the resources/views directory and create a file named as “contact_form.blade.php” file. Next, open the resources/views/contact_form.blade.php and update the below code on it.

<html lang="en">
<head>
    <title>Laravel Ajax jquery Validation Tutorial</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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 Form Submit Using Ajax jquery</h2>
    <form id="contactForm">
        <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>
    </form>
</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

   <script type="text/javascript">

    $('#contactForm').on('submit',function(e){
        e.preventDefault();

        let name = $('#name').val();
        let email = $('#email').val();
        let mobile_number = $('#mobile_number').val();
        let subject = $('#subject').val();
        let message = $('#message').val();

        $.ajax({
          url: "/contact-form",
          type:"POST",
          data:{
            "_token": "{{ csrf_token() }}",
            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); 
              $("#contactForm")[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>

Learn Also: Laravel AJAX CRUD Example Tutorial from Scratch

That’s all the Laravel Form Submit using ajax Tutorial example is over now. Hope you have learned new things today.