Блог

Главная - Вопросы по программированию - Привязанное входное значение не отображается в запросе

Привязанное входное значение не отображается в запросе

#javascript #html #laravel #alpine.js

#javascript #HTML #laravel #alpine.js

Вопрос:

Я пытаюсь привязать backAfterSaveStatus значение к скрытому вводу, и по какой-то причине после отправки формы backAfterSave значение равно нулю. После этого я возвращаюсь и снова отправляю форму — backAfterSave значение равно 1. В чем проблема? Я попробовал то же самое без prevent и submit() , но оно все еще не работает. Также я сбросил div с x-text помощью, и код делает скрытый ввод 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 amp; 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);
}

Комментарии:

1. Разве вам не нужно сбрасывать значение backAfterSaveStatus = 0 после submit() вызова в backAfterSave() методе

2. Я тоже пробовал, но основная проблема заключается в том, что в первый раз после отправки формы значение равно нулю.

3. @keizah Является ли эта проблема специфичной для alpine / php или ее можно решить с помощью JS? Итак, чтобы возобновить, когда форма отправлена, и только после отправки, вы хотите иметь возможность нажать кнопку сохранить и вернуться и отобразить 1 внутри поля ввода, правильно?

4. Я воспроизвел проблему и решил ее, используя $nextTick свойство magic

Ответ №1:

Проблема заключается в том, что форма отправляется «слишком быстро» (значение 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 amp; back
                </button>
            </span>
            <span>
                <button type="submit">
                    Save
                </button>
            </span>
        </div>
    </div>
</form>

Ответ №2:

Спасибо! Я не использую 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 amp; 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>

Ответ №3:

Только что было выпущено, что я мог бы использовать простую кнопку с пользовательским именем и заданным значением.. Javascript не требовался 🙂

 <button type="submit" name="back-after-submit" value="1">Save</button>
Метки: