How to updtae input field value from other fields value with JS

#1

Hi!

I have 2 forms on a page one is “invoice-rows” like invoice-rows.0.summa … invoice-rows.n.summa
I’m using wire:modell and HTML name with the same name with dots to build up the arra invoice-rows[0].summa. It works excellent.

I have other form calculator. It is workink simular way, excellent,

I have buttons on the calculator form. I would like to update some invoice-rows summa filed with the calculated SUM value from the calculator.

I could find the solution yet. I can update the fields well. The input filed value is update, but the invoice-row form don’t recognise this update, livewire is not sending the new value of the filed to the server.

I also tried to add wire:model on the button . not working.
I tried to send with JS change event on the filed: not working
var event = new Event(‘change’);
var element=document.getElementById(‘summa.{{ $index }}’);
document.dispatchEvent(event);

If the filed was updated with this JS code and I’m saving that form, the new (updated) value is not sent by the form, I’m saving the original value what was updated with JS.

But if go manually into this field and I do a manual updtae, like I’m deleting one char, the filed value will send to the server and it works fine with Livevire.

I could’nt find solution with Alpine.js

Do you have any idea?

Thanks
Gergely

#2

Hi!
I have a woriking solution, but I would be interested in a more professional also.

My solution is
On livewire calculator SUM field ID for a HTML element. (it has or LW colntroller and view)
I have button in the calendar what is representing the filed of the other independent LW. form.

On the button i have JS what is sending the value from the SUM field to the dedivated text input element on the other form with change event. On the click on the button I’m sending the value, then I focus on the input field and trigger change event. (My idea was, it is enough for the working with Livewire on that filed, but unfortunatelly isn’t working.

So I placed in the Input text’s Controller a Listener “totalupdate” what is calld with the field name and SUM value from the calculator,

In the blade file on the input text field I placed also a JS onchange="" listener.
what is calling
window.livewire.emit(‘totalupdate’,‘daily_closing_rows.{{$irnr}}.summa’,ertek);
what is now working, but i am not proud of this solution.

So If You have nicer solution, please share it wih me.
Thanks
Gergely

PS: @ * Message

calebporzio Would it be possible to use emit call a function from the controller, what is placed in an other controller? I mean

I call it like this: ControllerName@functionName then the parameters.
Thx.