Form Submit two time

[agile crater]

• i have a dropdown like this

<div class="inline-flex items-center">
    <x-dropdown :align="'left'">
        <x-slot name="trigger">
            <x-nav-link class="h-[66.0px]">
                {{ __('Update') }}
            </x-nav-link>
        </x-slot>

        <x-slot name="content">
            <x-dropdown-link @click="$dispatch('open-modal', 'updateUser'); $dispatch('set-role', { role: 'Admin' })">
                {{ __('Update Admin') }}
            </x-dropdown-link>
            <x-dropdown-link @click="$dispatch('open-modal', 'updateUser'); $dispatch('set-role', { role: 'Teacher' })">
                {{ __('Update Teacher') }}
            </x-dropdown-link>
            <x-dropdown-link @click="$dispatch('open-modal', 'updateUser'); $dispatch('set-role', { role: 'Student' })">
                {{ __('Update Student') }}
            </x-dropdown-link>
        </x-slot>
    </x-dropdown>
</div>```

• and a modal like this:

    <div class="s01">
        <form id="searchForm" x-data="{ role: '' }" x-init="$watch('role', value => console.log(value))"
            @set-role.window="role = $event.detail.role" x-on:submit.prevent="updateUser()">

            <div class="inner-form">
                <div class="input-field first-wrap">
                    <input id="input_user_code" type="text" x-bind:placeholder="`Enter ${role} code`"
                        x-bind:data-role="role" name="input_user_code" maxlength="8" required
                        oninput="debouncedSearchUser()" autocomplete="off" />
                    <div id="resultCard" class="result-card"></div>
                </div>

                <div class="input-field third-wrap">
                    <button class="btn-search" type="submit">Save</button>
                </div>
            </div>
{{ the messege is to long so i cut this part }}
        </form>
    </div>
</x-modal>```
when i press the save button, the form call updateUser twice, leading to it submit 2 time.
One more thing: when i open this modal, i notice that value => console.log(value) get print twice too.

• here is the cut part

                <x-test-label style="color: White">User code: </x-test-label>
                <x-text-input id="user_code" name="user_code" placeholder="user code" class="ms-2.5"
                    style="width: 97%;">test </x-text-input>

                <x-test-label style="color: White">Role: </x-test-label>
                <x-text-input id="role" name="role" placeholder="role" class="ms-2.5" style="width: 97%;">
                </x-text-input>

                <x-test-label for="username" style="color: White">Username: </x-test-label>
                <div style="display: flex">
                    <x-text-input id="username" name="username" placeholder="username" class="ms-2.5"
                        style="width: 97%;">
                    </x-text-input>
                    <x-secondary-button id="usernameButton" style="margin-left: 10px">Change</x-secondary-button>
                </div>

                <x-test-label style="color: White" for="email">Email: </x-test-label>
                <div style="display: flex">
                    <x-text-input id="email" name="email" placeholder="email" type="email" class="ms-2.5"
                        style="width: 97%;">
                    </x-text-input>
                    <x-secondary-button id="emailButton" style="margin-left: 10px">Change</x-secondary-button>
                </div>
            </div>```

• this is the updateUser function

        const input = document.getElementById('searchForm');
        const userInfoDiv = input.querySelector('#userInfomation');
        const userCode = userInfoDiv.querySelector('#user_code').value;
        const userName = userInfoDiv.querySelector('#username').value;
        const email = userInfoDiv.querySelector('#email').value;


        fetch(`{{ route('user.updateUser') }}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    userCode: userCode,
                    username: userName,
                    email: email
                })
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Request failed with status ' + response.status);
                }
                return response.json();
            })
            .then(data => {
                console.log('Update successful:', data);
            })
            .catch(error => console.error('Error:', error));

    }```