Laravel 8 和 Jetstream - 带有两个按钮的注册表单，一个用于自动完成财政代码的按钮和一个用于提交数据的按钮

如何解决Laravel 8 和 Jetstream - 带有两个按钮的注册表单，一个用于自动完成财政代码的按钮和一个用于提交数据的按钮

我正在尝试在 Laravel 8 上的 Jetstream 中创建我的第一个自定义注册模块，并且我已经创建了 6 个重要的自定义字段自动生成意大利财政代码（姓名、姓氏、性别、生日、生日省、出生地） 在这些之后，我实现了这个 repo 来自动生成财政代码： 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。

我现在遇到的问题是我有一个按钮用于生成财务代码，还有一个按钮用于提交所有表单以在同一表单中创建新用户

那么如何在不刷新页面的情况下激活第一个按钮来自动填充输入，然后点击第二个按钮完成注册？

<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>