Level 15
See you're using AlpineJS and Livewire, have you tried to use @entangle to share the state between the two?
You can find more about it in the Livewire documentation on working with AlpineJS.
Nov 22, 2020
6
Level 17
Alpine.js binded input value does not appear in request
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);
}
Level 17
I don't use livewire in this part. This code is in blade file
Level 15
Ooh, I totally miss read that then. 😂
1 like
Level 15
Using the $nextTick function on submit worked for me, this gives the model time to update.
<form action="{{ route('form_submit') }}" method="post" x-data="{ backAfterSaveStatus: 0 }" x-ref="foo">
@csrf
<input type="hidden" name="backAfterSave" x-model.number="backAfterSaveStatus">
<div>
<button x-on:click.prevent="backAfterSaveStatus = 1; $nextTick(() => { $refs.foo.submit() })" type="submit">
Save & Back
</button>
<button x-on:click.prevent="$refs.foo.submit()" type="submit" >
Save
</button>
</div>
</form>
This also uses $ref instead of querySelector to submit the form, I also set the model to 0 by default, so when Save is submitted the value is set to 0. On Save & Back we set it to one then wait for the next tick and submit.
Created a repository to demo it, it's the same HTML with some simple styling and then I'm just dumping the result on post.
1 like
Level 17
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>
Level 17
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>
1 like
Please or to participate in this conversation.