John Davidson

Message:

I'm try to create my first custom register module in Jetstream on Laravel 8 and i've create 6 important custom fields to generate automatically the Italian fiscal code (name, surname, gender, birthday, birthday_province, birthplace )
After these i've implemented this repo to generate automatically the fiscal code:
https://github.com/lucavandro/CodiceFiscaleJS#:~:text=CodiceFiscale.js%20is%20a%20javascript%20and%20typescript%20utility%20library,and%20validate%20Italian%20Italian%20Tax%20code%20%28codice%20fiscale%29.

The problem that i have now is that i have one button for generate the fiscal code and a button to submit all form to create a new user in the same form

So how can i active the first button to autofill the input without refresh the page and after this click on the second button to complete the registration?

<x-guest-layout>

    <x-jet-authentication-card>

        <x-slot name="logo">

            <x-jet-authentication-card-logo />

        </x-slot>



        <x-jet-validation-errors class="mb-4" />



        <form method="POST" action="{{ route('register') }}">

            @csrf



            <div>

                <x-jet-label for="name" value="{{ __('Nome') }}" />

                <x-jet-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required

                    autofocus autocomplete="name" />

            </div>



            <!-- Creo un campo cognome -->

            <div>

                <x-jet-label for="surname" value="{{ __('Cognome') }}" />

                <input type="text" class="form-control" id="surname" name="surname" :value="old('surname')" required>

            </div>



            <div class="mt-4">

                <x-jet-label for="email" value="{{ __('Email') }}" />

                <x-jet-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')"

                    required />

            </div>



            <!-- Add the nickname to default settings, dopo modifica la migration "create user" -->

            <div class="mt-4">

                <x-jet-label for="nickname" value="{{ __('Nickname') }}" />

                <x-jet-input id="nickname" class="block mt-1 w-full" type="text" name="nickname"

                    :value="old('nickname')" required />

            </div>



            <!-- Creo una select per il sesso -->

            <div class="mt-4">

                <x-jet-label for="gender" value="{{ __('Sesso') }}" />

                <select id="gender" class="block mt-1 w-full" type="select" name="gender" :value="old('gender')" required>

                    <option value="M">Maschio</option> <!-- Viene salvato il value -->

                    <option value="F">Femmina</option>

                </select>

            </div>



            <!-- Creo un input per la data di nascita -->

            <div class="mt-4">

                <x-jet-label for="birthday" value="{{ __('Anno di nascita') }}" />

                <input id="birthday" class="form-control" type="date"  name="birthday" :value="old('birthday')" required>

            </div>



            <!-- Creo una select per la provincia di nascita -->

            <div class="mt-4">

                <x-jet-label for="birthday_province" value="{{ __('Provincia di nascita') }}" />

                <select class="custom-select" name="birthplace_province" id="birthplace_province" required>

                </select>

            </div>



            <!-- Creo una select per il comune di nascita -->

            <div class="mt-4">

                <x-jet-label for="birthplace" value="{{ __('Comune di nascita') }}" />

                <select class="custom-select" name="birthplace" id="birthplace" required>

                </select>

            </div>



            <!-- Creo un input per la generazione automatica del codice fiscale -->

            <div class="mt-4">

                <x-jet-label for="cf" value="{{ __('Codice Fiscale') }}" />

                <input type="text" class="input-auto" name="cf" id="cf-1" readonly>

                <button type="submit" class="btn-inline" >Genera Codice Fiscale</button>

            </div>



            <div class="mt-4">

                <x-jet-label for="password" value="{{ __('Password') }}" />

                <x-jet-input id="password" class="block mt-1 w-full" type="password" name="password" required

                    autocomplete="new-password" />

            </div>



            <div class="mt-4">

                <x-jet-label for="password_confirmation" value="{{ __('Confirm Password') }}" />

                <x-jet-input id="password_confirmation" class="block mt-1 w-full" type="password"

                    name="password_confirmation" required autocomplete="new-password" />

            </div>



            @if (Laravel\Jetstream\Jetstream::hasTermsAndPrivacyPolicyFeature())

            <div class="mt-4">

                <x-jet-label for="terms">

                    <div class="flex items-center">

                        <x-jet-checkbox name="terms" id="terms" />



                        <div class="ml-2">

                            {!! __('I agree to the :terms_of_service and :privacy_policy', [

                            'terms_of_service' => '<a target="_blank" href="'.route('terms.show').'"

                                class="underline text-sm text-gray-600 hover:text-gray-900">'.__('Terms of

                                Service').'</a>',

                            'privacy_policy' => '<a target="_blank" href="'.route('policy.show').'"

                                class="underline text-sm text-gray-600 hover:text-gray-900">'.__('Privacy

                                Policy').'</a>',

                            ]) !!}

                        </div>

                    </div>

                </x-jet-label>

            </div>

            @endif



            <div class="flex items-center justify-end mt-4">

                <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('login') }}">

                    {{ __('Ho già un account?') }}

                </a>



                <x-jet-button class="ml-4">

                    {{ __('Registrati') }}

                </x-jet-button>

            </div>

        </form>

    </x-jet-authentication-card>

</x-guest-layout>

---

My Answer:
Laravel is a popular PHP framework that provides a robust set of tools and features for building web applications. Laravel 8 is the latest version of the framework, released in September 2020. It comes with several new features and improvements, including Laravel Jetstream, Laravel Fortify, and Laravel Breeze for authentication scaffolding, improved job batching, model factory classes, dynamic Blade components, and more.

To get started with Laravel 8, you can follow these steps:

1. Install Laravel using Composer:
bash
composer create-project --prefer-dist laravel/laravel myapp


2. Navigate to your project directory:
bash
cd myapp


3. Start the development server:
bash
php artisan serve


4. You can now access your Laravel application at `http://localhost:8000`.

5. You can also use Laravel's Artisan command-line tool to generate controllers, models, migrations, and more:
bash
php artisan make:controller MyController
php artisan make:model MyModel
php artisan make:migration create_my_table


6. Configure your database connection in the `.env` file.

7. Start building your application by creating routes, controllers, views, and models.

Laravel 8 provides a powerful and elegant way to build web applications, with features like routing, middleware, authentication, database migrations, and more. It also has a vibrant community and extensive documentation to help you get started and troubleshoot any issues you may encounter.