Binded input value does not appear in request

Question

I am trying to bind backAfterSaveStatus value to hidden input and for some reason then form is submited backAfterSave value is null. After that I go back and submit form again - backAfterSave value is 1. Where is the problem? I tried same thing without prevent and submit() but it's not working still. Also I had dumped div with x-text and code makes hidden input 1 before form submit. What I am doing wrong?

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

I want same result as below:

let buttonBackAfterSave = document.getElementById('button-back-after-save');

if (buttonBackAfterSave) {
    buttonBackAfterSave.addEventListener('click',  () => document.getElementById('input-back-after-save').value = 1);
}

Don't you need to reset the value of backAfterSaveStatus = 0 after the submit() call in the backAfterSave() method — Donkarnash
– Donkarnash, Commented Nov 22, 2020 at 13:09
I tried it also, but main problem is that first time after form submit value is null. — keizah7
– keizah7, Commented Nov 22, 2020 at 13:14
@keizah Is this issue specific to alpine/php or can it be solved using JS as well? So to resume, whe the form is submitted, and only after submission, you want to be able to click the button save and back and display 1 inside the input field, correct? — rags2riches-prog
– rags2riches-prog, Commented Dec 19, 2020 at 17:26
I reproduced the issue and solved it using the $nextTick magic property — IGP
– IGP, Commented Dec 19, 2020 at 18:36

IGP · Accepted Answer · 2020-12-19 16:45:56Z

1

The problem is the form being submitted "too fast" (the backAfterSaveStatus value isn't done binding to the input). Use $nextTick so Alpine waits until the value is properly changed.

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

edited Dec 19, 2020 at 16:45

answered Dec 19, 2020 at 16:16

IGP

16.4k5 gold badges34 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

keizah7 · Accepted Answer · 2020-12-29 15:28:41Z

Thank you! I don't use x-ref because these buttons are in separate layouts file, so I can't move it outside x-data range. My final code:

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

keizah7 · Accepted Answer · 2021-03-17 18:00:30Z

0

Just released that I could use simple button with custom name and given value.. No javascript was needed :)

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

answered Mar 17, 2021 at 18:00

keizah7

7535 silver badges20 bronze badges

Collectives™ on Stack Overflow

Binded input value does not appear in request

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related