Jquery Submit Form Ajax PHP Laravel 5.7 Without Page load

Jquery submit form ajax laravel 5.7 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. And also work with laravel 5.8 version.

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 create migration file

Next go to app/datatabase/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 create table in database :

php artisan migrate

Make Route

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

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

Generate (Create) Controller

Now we will create 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 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 blade view :

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

In this ajax form, we will implement jquery submit handler. first we will validate form using jquery validation and second is submit a 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 5.7 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 5.7 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",
        minlength: "The contact number should be 10 digits",
        digits: "Please enter only numbers",
        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 contain only digits not accept charactor. name filed contain 50 charactor only. Email contain valid email and maxlength only 50 charactor. we will use post method in laravel ajax with csrf token

After a submit form successfully, we will reset the form data using 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

Conclusion

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

5 Comments

  1. Fernando J Martin said:

    Lovely! A take-n-go tutorial!
    Exactly what I was looking for!
    Thanks!!

    May 7, 2019
    Reply
  2. Martin said:

    Hi,
    great post, but i have question if it’s easily possible to add a modal window interaction inside this form, example if I want to add somes options by a checkbox list?

    I tried something on my side but the OK button of Modal do action like tte main form button, so I’m not able to only close modal and update fields with value selected.

    I’m sure it’s possible, but not able to figure it out!

    Thnkas

    July 14, 2019
    Reply
  3. JeffZer said:

    Thanks for this tuto! It’s was so helpful!

    August 5, 2019
    Reply
  4. Carlos Rene Ponce Novelo said:

    Great tutorial. I used for a contact form. Only one slightly contribution, i am using bootstrap 4 which use a newer version of jquery so i have to make a little modification to the $.ajax call. I will leave it here, in case, someone is interested:
    $.ajax({
    url: ‘{{ route(‘enviar’) }}’,
    method: ‘POST’,
    data: $(‘#contactUs’).serialize()
    })
    .done(function (response) {
    $(“#enviar”).html(‘Envíar’);
    $(“#res_message”).show();
    $(“#res_message”).html(response.msg);
    $(“#msg_div”).removeClass(‘d-none’);
    document.getElementById(“contactUs”).reset();
    setTimeout(function() {
    $(“#res_message”).hide();
    $(“#msg_div”).hide();
    }, 10000);
    })
    .fail(function (jqXHR, textStatus) {
    $(“#enviar”).html(‘Envíar’);
    $(“#res_message”).show();
    $(“#res_message”).html(response.msg);
    $(“#msg_div”).removeClass(‘d-none’);
    setTimeout(function() {
    $(“#res_message”).hide();
    $(“#msg_div”).hide();
    }, 10000);
    });

    August 20, 2019
    Reply
  5. Riley Riojas said:

    Pretty! This has been an extremely wonderful article. Thank you for providing these details.

    September 5, 2019
    Reply

Leave a Reply

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