0

No código abaixo, as duas são 'alimentadas' por um select via JS, ou seja, escolho a opção no select e ele me preenche esses dois campos (numéricos, Float).

Tenho outro campo input que é 'alimentado' por outros inputs (soma de inputs, total do carrinho de compras).

O que quero fazer é o seguinte: quando mudar a input "total" ou quando mudar os "aaa" ou "bbb", via JS, acontecer uma operação tipo: "total" * "aaa" * "bbb" e preenche a input "ccc".

<input name="total" id="total" hidden/>

<select name="forma_pgto" id="forma_pgto">				
  <option value="1">A Vista</option>
  <option value="2">Credito</option>
</select>

<span name="aaa" id="aaa" hidden>0</span>
<span name="bbb" id="bbb" hidden>0</span>

<input name="ccc" id="ccc" readonly/>

A seleção do select faz uma busca em tempo real no BD e retorna o valor das 2 taxas a "aaa" e a "bbb".

Eu tentei assim, mas não deu certo:

$(function(){
   var taxa1 = Number(document.getElementById("aaa").value);
   var taxa2 = Number(document.getElementById("bbb").value);
   var total = Number(document.getElementById("total").value);
   $("#forma_pgto").on("change", function(){ //usando o id do select
	$("#ccc").val(taxa1.toFixed(2)*taxa2.toFixed(2)*total.toFixed(2));
		});
});

EDIT - para exemplificar minha operação, eu fiz a tabela conforme: Marcar container do checklist e executar JS

E esse select forma_pgto, modificaria o valor total do carrinho (pois depende de taxas de cartão, então se for a vista a taxa é X, credito Y e assim por diante...) e jogaria o valor final no "ccc".

2
  • 1
    Quando aaa, bbb, ou total forem modificados, nada vai acontecer mesmo, pois você aplicou o on change a tag forma_pgto. Só quando forma_pgto for modificada, os valores serão atualizados. Commented 7/04/2019 às 17:49
  • Bom, obrigado pela resposta. Porém, nem a operação de multiplicação está funcionando, acredito que não esteja pegando os valores da <span>. O valor da <input> "total" e das <span> "aaa" e <span> "bbb" podem alterar-se com certa frequência e quando forem alterados gostaria de atualiza o <span> "ccc" com a operação descrita acima.
    – Nosredna
    Commented 7/04/2019 às 17:53

1 Resposta 1

1

Para inicio, tenha certeza que o jQuery está importado na sua página...

Taça o seguinte:

$("#aaa").on("change", function() {
   Recalcular();
});

$("#bbb").on("change", function() {
   Recalcular();
});

$("#total").on("change", function() {
   Recalcular();
});

function Recalcular() {
   var taxa1 = Number(document.getElementById("aaa").textContent);
   var taxa2 = Number(document.getElementById("bbb").textContent);
   var total = Number(document.getElementById("total").value);
   $("#ccc").val(taxa1.toFixed(2)*taxa2.toFixed(2)*total.toFixed(2));
}
7
  • A operação de multiplicação não ocorre e a input "ccc" continua vazia... eu fiz certo a forma de passar os valores das span's "aaa" e "bbb"? lembre-se que esta duas span's e a input total são preenchidas via JS tb (previamente)
    – Nosredna
    Commented 7/04/2019 às 18:00
  • 1
    Mudei na resposta, pois o span vem via textContent e não por value. tente isto. vejo o console e me fale. Commented 7/04/2019 às 18:04
  • Sem chance. Eu mudo os produtos e o "total" atualiza normalmente. Eu mudo o select "forma_pgto" e as duas span (aaa e bbb) atualizam, porém a operação no ccc não ocorre. Mudei até as <span> para <input>, mas não foi também...mudei de volta para <span>
    – Nosredna
    Commented 7/04/2019 às 18:08
  • 1
    Tudo que não for para o usuário mexer mantenha como span. Mude o ccc para span e tire o readyonly. pode ser ele o impedimento da altetração... Commented 7/04/2019 às 18:14
  • 1
    Vai lá no chat, na sala "Luis te Ajuda"... Commented 7/04/2019 às 18:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .