Laravel中如何获取Prompt对话框值并提交表单？

你遇到的问题是：设置card变量后立刻调用$el.submit()，此时Alpine.js的响应式更新还没来得及把新值同步到隐藏输入框，表单提交的仍是初始的空值。

以下两种方式都能解决这个问题，按需选择即可：

方案一：直接操作DOM设置输入框值（更直接） #

跳过响应式绑定的延迟，手动获取隐藏输入框并设置其值，再提交表单：

<form x-data="{ card: '' }" x-on:submit.prevent="
    const cardInput = $el.querySelector('input[name=tessera]');
    const card = prompt('Insert card');
    if(card !== null) {
        cardInput.value = card;
        $el.submit();
    }
" method="POST" action="{{ route('member.store', ['identity' => $identity->id]) }}">
    @csrf
    <input type="hidden" name="tessera"/>
    <button type="submit"><img class="object-scale-down h-6 ml-5" src="{{asset('images/card_add.png')}}" title="Aggiungi tessera" alt="Aggiungi tessera"></button>
</form>

方案二：用$nextTick等待DOM更新（保留响应式绑定） #

利用Alpine的$nextTick方法，等待响应式值同步到DOM后再提交表单：

<form x-data="{ card: '' }" x-on:submit.prevent="
    const card = prompt('Insert card');
    if(card !== null) {
        this.card = card;
        $nextTick(() => {
            $el.submit();
        });
    }
" method="POST" action="{{ route('member.store', ['identity' => $identity->id]) }}">
    @csrf
    <input type="hidden" x-bind:value="card" name="tessera"/>
    <button type="submit"><img class="object-scale-down h-6 ml-5" src="{{asset('images/card_add.png')}}" title="Aggiungi tessera" alt="Aggiungi tessera"></button>
</form>

内容的提问来源于stack exchange，提问作者luca lisotti