John Davidson

Message:

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.

---

My Answer:
To add a loading image after clicking the register button, you can use JavaScript to show the loading image when the form is submitted and hide it once the API call is completed. Here's how you can modify your code:

1. Add a loading image in your register.blade.php file:

html

2. Add an id to your form tag in register.blade.php:

html





3. Add JavaScript code to show the loading image when the form is submitted:

javascript



4. Modify your submit method in RegisterController.php to hide the loading image once the API call is completed:

php
public function submit(Request $request)
{
// Validate the request data

// Perform API calls for deploying to new server

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


By following these steps, you can add a loading image that will be displayed when the register button is clicked and hidden once the API call is completed.