CODEWITHSUNDEEP
javascriptlaravellaravel-livewire
Markwow
Markwow

Reputation: 181

Passing hidden form inputs with Laravel Livewire

I am running into an issue where I am using JavaScript to populate two hidden input fields as a user moves around a cropping tool on an image. The hidden inputs are being populated with the pixels where the image would be cropped. My initial understanding is that using wire.model won't work with hidden input fields that are updated by JavaScript as it will always return null when I submit the form.

<input type="hidden" id="formWidth" name="width" value="width" wire:model.defer="width">
<input type="hidden" id="formHeight" name="height" value="height" wire:model.defer="height">

The value changes as a user moves the cropping tool around the image so once they are ready to submit it would look like:

<input type="hidden" id="formWidth" name="width" value="40px" wire:model.defer="width">
<input type="hidden" id="formHeight" name="height" value="20px" wire:model.defer="height">

I am new to Livewire and I was hoping someone could push me in the direction of how I should be handling hidden inputs or if there is a way to have Livewire read a JavaScript variable and I would no longer update it in the input, but instead a new variable.

Upvotes: 1

Views: 2534

Answers (1)

Markwow
Markwow

Reputation: 181

I ended up find my solution on Lirewire's forum and thought I would share if anyone else runs into the same issue as me:

After you set the value, you can do something like:

var element = document.getElementById('description');
element.dispatchEvent(new Event('input'));

This should trigger the input event on the field and cause livewire to communicate to your backend.

Upvotes: 7

Related Questions