为了账号安全,请及时绑定邮箱和手机立即绑定

绑定的输入值未出现在请求中

绑定的输入值未出现在请求中

喵喵时光机 2023-08-24 15:30:56
我试图将backAfterSaveStatus值绑定到隐藏输入,由于某种原因,提交的表单backAfterSave值为空。之后我返回并再次提交表单 -backAfterSave值为 1。问题出在哪里?我尝试了同样的事情prevent,submit()但它仍然不起作用。x-text另外,我在表单提交之前转储了 div,并且代码使隐藏输入 1 。我做错了什么?<form action="<...>" method="post">    <div x-data="{        backAfterSaveStatus: '',        backAfterSave () {            this.backAfterSaveStatus = '1';            document.querySelector('form.withBackAfterSave').submit();        }    }">        <input name="backAfterSave" :value="backAfterSaveStatus">        <div>            <span>                <button x-on:click.prevent="backAfterSave()" type="submit">                    Save & back                </button>            </span>            <span>                <button type="submit">                    Save                </button>            </span>        </div>    </div></form>我想要与下面相同的结果:let buttonBackAfterSave = document.getElementById('button-back-after-save');if (buttonBackAfterSave) {    buttonBackAfterSave.addEventListener('click',  () => document.getElementById('input-back-after-save').value = 1);}
查看完整描述

3 回答

?
汪汪一只猫

TA贡献1898条经验 获得超8个赞

问题是提交的表单“太快”(backAfterSaveStatus 值未完成与输入的绑定)。使用 $nextTick 以便 Alpine 等待,直到值被正确更改。


<form method="post" class="withBackAfterSave">

    @csrf

    <div x-data="{

        backAfterSaveStatus: '',

        backAfterSave () {

            this.backAfterSaveStatus = '1';

            this.$nextTick(() => { document.querySelector('form.withBackAfterSave').submit() });

        }

    }">

        <input name="backAfterSave" x-bind:value="backAfterSaveStatus">

        <div>

            <span>

                <button x-on:click.prevent="backAfterSave()" type="submit">

                    Save & back

                </button>

            </span>

            <span>

                <button type="submit">

                    Save

                </button>

            </span>

        </div>

    </div>

</form>


查看完整回答
反对 回复 2023-08-24
?
牛魔王的故事

TA贡献1830条经验 获得超3个赞

刚刚发布,我可以使用带有自定义名称和给定值的简单按钮。不需要 javascript :)

<button type="submit" name="back-after-submit" value="1">Save</button>


查看完整回答
反对 回复 2023-08-24
?
跃然一笑

TA贡献1826条经验 获得超6个赞

我不使用x-ref,因为这些按钮位于单独的layouts文件中,所以我无法将其移出x-data范围。我的最终代码:


<div class="pt-5">

    <div class="flex justify-end" x-data="{

        backAfterSave: 0

    }">

        <input type="hidden" name="backAfterSave" :value="backAfterSave">

        <button type="button"

                class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">

            {{ __('Cancel') }}

        </button>

        <button type="submit"

                @click.prevent="backAfterSave=1; $nextTick(() => {

                    document.querySelector('form.with-back-after-save').submit()

                })"

                class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">

            {{ __('Save & back') }}

        </button>

        <button type="submit"

                class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500">

            {{ __('Save') }}

        </button>

    </div>

</div>


查看完整回答
反对 回复 2023-08-24
  • 3 回答
  • 0 关注
  • 116 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信