Published September 3, 2019 by

Laravel 6 Ajax Form Submit With Jquery Validation E.g.

Jquery submit form ajax laravel 6 without page refresh. We will discuss how to submit a form using ajax without page refresh or page reload, we will use jquery submit handler with jquery validation rules for ajax form submission. We will also use csrf token in ajax form submission.

Contents

  • Create One Model and Migration
  • Make Route
  • Generate(create) Controller
  • Create Blade View
  • Start Development Server
  • Conclusion

Create Model and Migration

In this step, we will create one model and migration name Contact. Use the below following command and create it 

php artisan make:model Contact -m

In this command -m is created the migration file

Next, go to app/database/migrations and open contact migration file and put the below code here : 

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateContactsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('email');
            $table->string('mobile_number');
            $table->timestamps();
        });
    }

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

After successfully create migration file and fields than run the below command for creating a table in the database : 

php artisan migrate

Make Route

Create two routes one for show form and the second route send data to the server :

 Route::get('ajax-form-submit', '[email protected]');
 Route::post('save-form', '[email protected]');

Generate (Create) Controller

Now we will create a controller. Use the below command for generate controller 

php artisan make:controller FormController

Next, we will create two methods inside the controller first index method is used to display contact form and second store method is used to store data in the mysql database : 

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Validator,Redirect,Response;
use App\Contact;

class FormController extends Controller
{

    public function index()
    {
        return view('ajax-form');
    }       

    public function store(Request $request)
    {  
        request()->validate([
        'name' => 'required',
        'email' => 'required|email|unique:users',
        'mobile_number' => 'required|unique:users'
        ]);
        
        $data = $request->all();
        $check = Contact::insert($data);
        $arr = array('msg' => 'Something goes to wrong. Please try again lator', 'status' => false);
        if($check){ 
        $arr = array('msg' => 'Successfully submit form using ajax', 'status' => true);
        }
        return Response()->json($arr);
      
    }
}

Create a blade view :

In this step, we will create one blade file name ajax-form.blade.php.

In this ajax form, we will implement a jquery submit handler. first, we will validate form using jquery validation and second is to submit an ajax form using submit handler. 

<!doctype html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>laravel 6 Ajax Form Submission Example - Tutsmake.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
  <style>
   .error{ color:red; } 
  </style>
</head>
 
<body>
 
<div class="container">
    <h2 style="margin-top: 10px;">laravel 6 Ajax Form Submission Example - <a href="https://www.tutsmake.com" target="_blank">TutsMake</a></h2>
    <br>
    <br>
   
    <form id="contact_us" method="post" action="javascript:void(0)">
      @csrf
      <div class="form-group">
        <label for="formGroupExampleInput">Name</label>
        <input type="text" name="name" class="form-control" id="formGroupExampleInput" placeholder="Please enter name">
        <span class="text-danger">{{ $errors->first('name') }}</span>
      </div>
      <div class="form-group">
        <label for="email">Email Id</label>
        <input type="text" name="email" class="form-control" id="email" placeholder="Please enter email id">
        <span class="text-danger">{{ $errors->first('email') }}</span>
      </div>      
      <div class="form-group">
        <label for="mobile_number">Mobile Number</label>
        <input type="text" name="mobile_number" class="form-control" id="mobile_number" placeholder="Please enter mobile number" maxlength="10">
        <span class="text-danger">{{ $errors->first('mobile_number') }}</span>
      </div>
      <div class="alert alert-success d-none" id="msg_div">
              <span id="res_message"></span>
      </div>
      <div class="form-group">
       <button type="submit" id="send_form" class="btn btn-success">Submit</button>
      </div>
    </form>
 
</div>
<script>
   if ($("#contact_us").length > 0) {
    $("#contact_us").validate({
     
    rules: {
      name: {
        required: true,
        maxlength: 50
      },
 
       mobile_number: {
            required: true,
            digits:true,
            minlength: 10,
            maxlength:12,
        },
        email: {
                required: true,
                maxlength: 50,
                email: true,
            },    
    },
    messages: {
       
      name: {
        required: "Please enter name",
        maxlength: "Your last name maxlength should be 50 characters long."
      },
      mobile_number: {
        required: "Please enter contact number",
        digits: "Please enter only numbers",
        minlength: "The contact number should be 10 digits",
        maxlength: "The contact number should be 12 digits",
      },
      email: {
          required: "Please enter valid email",
          email: "Please enter valid email",
          maxlength: "The email name should less than or equal to 50 characters",
        },
        
    },
    submitHandler: function(form) {
     $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
      });
      $('#send_form').html('Sending..');
      $.ajax({
        url: 'http://localhost/laravel-example/save-form' ,
        type: "POST",
        data: $('#contact_us').serialize(),
        success: function( response ) {
            $('#send_form').html('Submit');
            $('#res_message').show();
            $('#res_message').html(response.msg);
            $('#msg_div').removeClass('d-none');

            document.getElementById("contact_us").reset(); 
            setTimeout(function(){
            $('#res_message').hide();
            $('#msg_div').hide();
            },10000);
        }
      });
    }
  })
}
</script>
</body>
</html>

We will validate form data before submit, check validation like mobile number contains only digits not accept the character. The name filed contains 50 characters only. The email contains valid email and max length of only 50 characters. we will use post method in laravel ajax with csrf token

After a submit form successfully, we will reset the form data using the javascript form reset method.

Start Development Server

In this step, we will use the php artisan serve command. It will start your server locally

 php artisan serve
 If you want to run the project diffrent port so use this below command 
 php artisan serve --port=8080

Now we are ready to run our example so run bellow command to quick run. 

http://127.0.0.1:8000/ajax-form-submit
Live Demo

Conclusion

In this laravel jquery ajax form submission example, we have successfully created ajax form and methods. We have implemented ajax form submits handler. Laravel ajax post form to controller successfully without page refresh or reload, and form data reset using javascript form reset() method

Laravel

26 Comments

  1. HeliElith said:

    viagra edad avanzada Eraveden cialis order online fradrady Will Propecia Work Forever Hair Loss

    December 20, 2020
    Reply
  2. Charlesorini said:

    https://novostroyka63.ru/ – Фундамент для дома цена

    Создание дома вашей мечты – это оригинальная возможность, спланировать и претворить в жизнь нечто воистину уникальное во всех отношениях. Возведение фундамента – это в целом первоначальная модель ремонта, в процессе которой домик строится. При расчете замена фундамента под старым деревянным домом цена предусматривается весьма много факторов. Средняясумма возведения домов фундамента составляет приблизительно от 10$ за кв.метр . Погреб сможет умножить итоговую стоимость каждого объекта недвижимости, предоставляя необходимое помещение ради организации хранения и порой рабочее пространство. Наша профессиональная команда по конструированию и возведенью фундамент под памятник на кладбище цена может помочь выстроить жилище, о котором вы всегда мечтали. От начала до конца наша специализированная компания в Череповец позаботимся о всех без исключения процессах, чтобы заказчику не довелось тревожиться о деталях. Специализированная международная компания в Киселевск несет юридическую ответственность за проект, а не вы, именно поэтому организация в Борисоглебск имеют интерес в том, затем чтобы довести до конца строительство коттеджа быстрее и эффективнее. Узнайте о сваи винтовые для фундамента цены в вытегре у спспециалистовециалистов корпорации.

    January 26, 2021
    Reply
  3. Charlesorini said:

    https://novostroyka63.ru/ – Цена куба фундамент

    Создание дома вашей мечты – это оригинальная возможность, спланировать и претворить в жизнь нечто воистину уникальное во всех отношениях. Возведение фундамента – это в целом первоначальная модель ремонта, в процессе которой домик строится. При расчете замена фундамента под старым деревянным домом цена предусматривается весьма много факторов. Средняясумма возведения домов фундамента составляет приблизительно от 10$ за кв.метр . Погреб сможет умножить итоговую стоимость каждого объекта недвижимости, предоставляя необходимое помещение ради организации хранения и порой рабочее пространство. Наша профессиональная команда по конструированию и возведенью фундамент под памятник на кладбище цена может помочь выстроить жилище, о котором вы всегда мечтали. От начала до конца наша специализированная компания в Череповец позаботимся о всех без исключения процессах, чтобы заказчику не довелось тревожиться о деталях. Специализированная международная компания в Киселевск несет юридическую ответственность за проект, а не вы, именно поэтому организация в Борисоглебск имеют интерес в том, затем чтобы довести до конца строительство коттеджа быстрее и эффективнее. Узнайте о сваи винтовые для фундамента цены в вытегре у спспециалистовециалистов корпорации.

    February 3, 2021
    Reply
  6. Lbsxguany said:

    list of legitimate canadian pharmacies viagra pills pills viagra pharmacy 100mg

    February 5, 2021
    Reply
  7. Jbbvguany said:

    men’s health canada meds canada pharmacy online

    February 5, 2021
    Reply
  8. Kbcxbype said:

    prescription drugs online without motion sickness vardenafil

    February 6, 2021
    Reply
  11. Charlesorini said:

    https://novostroyka63.ru/ – Ленточный фундамент под ключ

    Создание дома вашей мечты – это оригинальная возможность, спланировать и претворить в жизнь нечто воистину уникальное во всех отношениях. Возведение фундамента – это в целом первоначальная модель ремонта, в процессе которой домик строится. При расчете замена фундамента под старым деревянным домом цена предусматривается весьма много факторов. Средняясумма возведения домов фундамента составляет приблизительно от 10$ за кв.метр . Погреб сможет умножить итоговую стоимость каждого объекта недвижимости, предоставляя необходимое помещение ради организации хранения и порой рабочее пространство. Наша профессиональная команда по конструированию и возведенью фундамент под памятник на кладбище цена может помочь выстроить жилище, о котором вы всегда мечтали. От начала до конца наша специализированная компания в Череповец позаботимся о всех без исключения процессах, чтобы заказчику не довелось тревожиться о деталях. Специализированная международная компания в Киселевск несет юридическую ответственность за проект, а не вы, именно поэтому организация в Борисоглебск имеют интерес в том, затем чтобы довести до конца строительство коттеджа быстрее и эффективнее. Узнайте о сваи винтовые для фундамента цены в вытегре у спспециалистовециалистов корпорации.

    February 8, 2021
    Reply
  14. Claiva said:

    Скажем, вы обладатель нового сайта, который имеет приятный дизайн, удобную навигацию и полезную для гостей рекламную информацию. Но web-сайт ни кто не посещает. Что делать? Если у вас есть собственный бизнес мы поможем вам создать промо сайт. Установлено, ни одно настоящее или виртуальное предприятие не может продвигаться независимо. Отдельной любой компании необходимо подмога в приобретении популярности, а во Глобальной паутине без нее категорически не быть из-за яростной конкуренции.Мы занимаемся разработкой продающегося сайта. Мы всегда готовы запустить настоящий любой сайт в течение нескольких рабочих дней. Помимо оформления изготовленных online-сайтов, мы выполняем услуги тех. службы: своевременное продление хостинга и вашего домена, добавление содержания на интернет-проект, публикация известий. Наши услуги дадут возможность вам стать лидером на необъятных просторах всемирной паутины.

    особенности продвижения сайта google

    February 10, 2021
    Reply
  23. ecoorini said:

    [b][url=https://eco-corporation.ru]Продажа и установка септиков[/url][/b]

    Септики – это несложная сборка с специфической конструкцией перелива, фильтрации и сложной электроникой
    Наша международная компания занимается не только лишь проектированием и сборкой, профессионалы дополнительно делают последующее сопровождение автономной канализации.
    Для вас мы предлагаем высококлассные сервис по монтажу автономной канализации под ключ, владеем исключительной методикой и частным подходом к работе.
    Высококачественное сопровождение
    Автономная канализация – наиболее востребованная часть технических коммуникаций

    February 20, 2021
    Reply
  24. Nurustict said:

    best happy ending nyc

    o Muscles and Joints – recovery from exercise , improved mobility , you will recover faster after a visual load and elimination of lactic acid
    o Skin – stimulates blood circulation , occurs saturation O2
    relaxing massage more important in the process losing weight and getting rid of c ellulite.
    We greet you.
    Recommended all of you , go the site and view all styles of massage personally.

    February 20, 2021
    Reply
  25. Nurustict said:

    happy ending massage ny

    o Impressive selection options massage techniques
    o Muscles and Joints – recovery from exercise , improved mobility , you will recover faster after a visual load and elimination of lactic acid
    relaxing massage more important in the process losing weight and getting rid of c ellulite.
    o Skin – stimulates blood circulation , occurs saturation O2
    o Vessels – normalizing the cardiovascular system , getting rid of edema and relieving anemia

    February 22, 2021
    Reply
  26. ecoorini said:

    Лучшие септики для дачи

    Всем известно, что профессионализм – это сегодня наиболее важное
    Обеспечиваем лучший завершающий результат
    Максимальное внимание к клиенту
    Это в целом предоставляет вам гарантию того момента, что автономная канализация работает без перебоев в течение многих лет.
    Высококачественное сопровождение

    February 22, 2021
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *