Add loading image after click the `register` button in Laravel 8

Question

I am new in Laravel and using Laravel version 8 now.

There is form submit in register page.

When user fills out their info and clicks the register button, another app is deployed to new server. so deploy api is called after clicking resgister button.

As you know, there are some times to deploy to new server after clicking button. So in this case, I'd like to add loading image.

register form is in register.blade.php and api calls and register actions are in register controller.

Here are some parts of code.

@extends('layouts.central')

@section('content')

<div>
    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
        <div class="px-4 py-8 bg-white shadow sm:rounded-lg sm:px-10">
            <form action="{{ route('central.tenants.register.submit') }}" method="POST">

                <div class="mt-6">
                    <label for="name" class="block text-sm font-medium text-gray-700 leading-5">
                        Full name
                    </label>
                </div>

                <div class="mt-6">
                    <label for="domain" class="block text-sm font-medium text-gray-700 leading-5">
                        Domain
                    </label>
                </div>

                <div class="mt-6">
                    <label for="email" class="block text-sm font-medium text-gray-700 leading-5">
                        Email address
                    </label>
                </div>

                <div class="mt-6">
                    <label for="password" class="block text-sm font-medium text-gray-700 leading-5">
                        Password
                    </label>
                </div>

                <div class="mt-6">
                    <label for="password_confirmation" class="block text-sm font-medium text-gray-700 leading-5">
                        Confirm Password
                    </label>
                </div>

                <div class="mt-6">
                    <span class="block w-full rounded-md shadow-sm">
                        <button type="submit" class="btn">
                            Register
                        </button>
                    </span>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

This is RegisterController.php

<?php

namespace App\Http\Controllers\Central;

use App\Actions\CreateTenantAction;
use App\Http\Controllers\Controller;
use App\Models\Tenant;
use Illuminate\Http\Request;

class RegisterController extends Controller
{
    public function show()
    {
        return view('central.register');
    } 

    public function submit(Request $request)
    {
        $data = $this->validate($request, [
            'domain' => 'required|string|unique:domains',
            'company' => 'required|string|max:255',
            'name' => 'required|string|max:255',
            'email' => 'required|email|max:255|unique:tenants',
            'password' => 'required|string|confirmed|max:255',
        ]);

       ....

        here are api calls for deploying to new server

        $data['password'] = bcrypt($data['password']);
        $tenant = (new CreateTenantAction)($data, $data['domain']);


        return redirect()->away("http://{$siteDomain}");
    }
}

In this case, where do i have to add loading section? Don't need to add any code in controller.php ?

Could you make or add the correct answer in my code? Thanks a lot and appreciate.

you need to add them in blade file, right after the button is clicked — Farhan Ibn Wahid, Dec 14 '21 at 15:29
@Psycho can you show me some examples or can you add it on my code? — AlexSakai06, Dec 14 '21 at 15:37
Kindly have a look at the ajax post request, you can show an image when the response is sent and hide it when the response return from the server. https://stackoverflow.com/questions/1853662/how-to-show-page-loading-div-until-the-page-has-finished-loading — Pragnesh Chauhan, Dec 14 '21 at 15:46

score 3 · Accepted Answer · answered Dec 14 '21 at 16:24

Add this to any of your root css files or header style of root layout:

CSS

#loader {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,0.75) url("/your_loading_image.gif") no-repeat center center;
    z-index: 99999;
}

add this div to any of your root layout like app layout or master layout:

html

<div id='loader'></div>

Then in your register page, add jquery code script to the bottom:

script

<script>
$(function() {
    $( "form" ).submit(function() {
        $('#loader').show();
    });
});
</script>

thanks. it works for me and you saved my time. – AlexSakai06 Dec 14 '21 at 18:19 — AlexSakai06, Dec 14 '21 at 18:19

score 0 · Answer 2 · answered Nov 24 '22 at 09:03

I thought to add my Idea for this and its working perfectly after testing

The HTML part

  <button class="btn btn-success btn-lg submit" type="submit">
<span class="btn-txt">SUBMIT</span>
<span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>                 
 </button>

Then in JQuery :

 $(document).ready(function() {
            $("#clientform").submit(function() {
                $(".spinner-border").removeClass("d-none");
                $(".submit").attr("disabled", true);
                $(".btn-txt").text("Processing ...");
            });

Let me explain whats going . We added a span having a class of bootrap spinner which is by default hidden. Added a class to span .btn-txt on submit button text. Then in Jquery on form submit having an id we are removing class "d-none", disabling the button and adding the processing... text to .btn-txt class.

I hope I have explained in clear words.

Add loading image after click the `register` button in Laravel 8

2 Answers2