Need to pass a input value to another DIV in AlpineJS

Question

I need to pass the input values to a modal, but i can't do it with x-ref. Is this the right way to do it?

<div x-data="orderSearch()" class="container mt-2 mx-auto" x-ref="root">
        <div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 mt-2 mb-3">
           <div class="card m-1 p-1 cursor-pointer border border-gray-400 rounded-lg hover:shadow-md hover:border-opacity-0 transform hover:-translate-y-1 transition-all duration-200 bg-green-200">
              <div class="flex flex-row w-full py-2 px-2 m-1 text-sm text-green-800"  x-data="{ qty: '', val: '', total: ''}" x-effect="total = qty * val">
                 Definir estratégia de COMPRA: 
                 <input class="field shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="valorcompra" type="text" placeholder="Valor" autofocus  x-model.number="qty" x-ref="valorcompra" @keydown.enter="fetchOrder('buy',$refs.quantidadecompra.value,$refs.valorcompra.value)">
                 <input class="field shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="quantidadecompra" type="text" placeholder="Quantidade" x-model.number="val" x-ref="quantidadecompra" @keydown.enter="fetchOrder('buy',$refs.quantidadecompra.value,$refs.valorcompra.value)">
                 <input class="field shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="totalcompra" type="text" placeholder="Total" x-model.number="total" x-ref="totalcompra" @keydown.enter="fetchOrder('buy',$refs.quantidadevenda.value,$refs.valorcompra.value)" x-bind:disabled="true">
              </div>
           </div>
           <div class="card m-1 p-1 cursor-pointer border border-gray-400 rounded-lg hover:shadow-md hover:border-opacity-0 transform hover:-translate-y-1 transition-all duration-200  bg-red-200">
              <div class="flex flex-row w-full py-2 px-2 m-1 text-sm text-red-800" x-data="{ qty: '', val: '', total: ''}" x-effect="total = qty * val">
                 Definir estratégia de VENDA: 
                 <input class="field shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="valorvenda" type="text" placeholder="Valor" autofocus  x-model.number="qty" x-ref="valorvenda" @keydown.enter="fetchOrder('sell',$refs.quantidadevenda.value,$refs.valorvenda.value)">
                 <input class="field shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="quantidadevenda" type="text" placeholder="Quantidade" x-model.number="val" x-ref="quantidadevenda" @keydown.enter="modal=true">
                 <input class="field shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="totalvenda" type="text" placeholder="Total" x-model.number="total" x-ref="totalvenda" @keydown.enter="fetchOrder('sell',$refs.quantidadevenda.value,$refs.valorvenda.value)" x-bind:disabled="true">
              </div>
           </div>
        </div>
        <!-- Dialog (full screen) -->
        <div class="absolute top-0 left-0 flex items-center justify-center w-full h-full" style="background-color: rgba(0,0,0,.5);" x-show="modal">
           <!-- A basic modal dialog with title, body and one button to close -->
           <div class="h-auto p-4 mx-2 text-left bg-white rounded shadow-xl md:max-w-xl md:p-6 lg:p-8 md:mx-0">
              <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                 <h3 class="text-lg font-medium leading-6 text-gray-900">
                    Confirmação!
                 </h3>
                 <div class="mt-2">
                    <p class="text-sm leading-5 text-gray-500" x-text="'Deseja cadastrar a ordem de venda?'">                           
                    </p>
                 </div>
                 
              </div>
              <!-- One big close button.  --->
              <div class="mt-4 flex justify-between">
                 <div class="cancela px-4 bg-red-400 p-3 rounded-lg text-white hover:bg-red-600" @click="modal=false">Cancelar</div>
                 <div class="ok px-4 bg-green-400 p-3 rounded-lg text-white hover:bg-green-600" @click="fetchOrder('sell',$refs.quantidadevenda.value,$refs.valorvenda.value)">Confirmar</div>
              </div>
           </div>
        </div>
        <!-- fim modal div -->
     </div>

Must be read input values here:

<div class="ok px-4 bg-green-400 p-3 rounded-lg text-white hover:bg-green-600" @click="fetchOrder('sell',$refs.quantidadevenda.value,$refs.valorvenda.value)">Confirmar</div>

I tried to find this answer for two days but i cant.

Can you help me?

Why not just pull the value, set it to a new variable, then do what you want with that variable? Where is your JS file? — mstephen19, Oct 13 '21 at 23:51
@mstephen19 Thanks for your response. I can do it, but want to learn "alpine" way to do. I'm studing now Alpine directive $store, so this would resolve my problem. — Paulo Monteiro, Oct 14 '21 at 13:26

score -1 · Accepted Answer · answered Oct 15 '21 at 14:22

i tried a $store solution and it1s done:

<script>
     const element = document.querySelector("#valorvenda")
     element.addEventListener('change', (event) => {            
        const quantidadevenda = document.querySelector("#quantidadevenda").value            
        Alpine.store('venda', {
        valorcompra: document.querySelector("#valorcompra").value,
        quantidadecompra:quantidadevenda,
        valorvenda: event.target.value,
        quantidadevenda: quantidadevenda,
        })
        console.log(Alpine.store('fields').valorvenda);
     })
 </script>

It's like a state management and works fine!

Thanks all.

Need to pass a input value to another DIV in AlpineJS

1 Answers1