Oi amigos do guj, esto passando por um probleminha, tenho 3 inputtext na minha pagina (feito em jsf+prime), 1 que mostra o valor do item, 1 que recebe a quantidade e o outro que vai receber o valor do primeiro campo * o valor do segundo campo. Alguem pode me dar uma ajudinha nisso?Sei que deve ser uma dúvida simples, mas é que iniciei em programação web a pouco tempo :oops:
Calcular valores entre campos
20 Respostas
Pelo o que entendi voce tem 2 campos na tela que mostra o valor do item e o outro que recebe o quantidade de itens (provavelmente um carrinho de compras).
O 3º campo seria um textField no caso para mostrar o valor total da compra, seria isso? Caso positivo, é possível implementa-lo com Javascript ou via Ajax (não conheço muito bem o prime para ver se ele faz isso nativo).
Outra forma seria ao informar os dois primeiros campos e submeter o formulário, retornar para a mesma página após ter feito o cálculo no seu backing bean.
Caso não deu muito bem para entender mostra um trecho de um código que você já tenha desenvolvido, talvez seja melhor para mostrar uma solução mais adequada
Pelo o que entendi voce tem 2 campos na tela que mostra o valor do item e o outro que recebe o quantidade de itens (provavelmente um carrinho de compras).
O 3º campo seria um textField no caso para mostrar o valor total da compra, seria isso? Caso positivo, é possível implementa-lo com Javascript ou via Ajax (não conheço muito bem o prime para ver se ele faz isso nativo).
Outra forma seria ao informar os dois primeiros campos e submeter o formulário, retornar para a mesma página após ter feito o cálculo no seu backing bean.Caso não deu muito bem para entender mostra um trecho de um código que você já tenha desenvolvido, talvez seja melhor para mostrar uma solução mais adequada
Exato, teria algum exemplo para postar aqui?
Mais ou menos isso aqui, os códigos não estão de acordo com as taglibs, fiz de cabeça, não lembro de cor os atributos:
JSP
<f:inputText value="{bean.valor}" />
<f:inputText value="{bean.qtd}" />
<f:outputText value="{bean.valorTotal}" />
<f:submit>
Backing Bean
public class Bean {
private Integer valor;
private Integer qtd;
private Integer valorTotal;
public void acaoDoSubmit(){
this.valorTotal = this.valor * this.qtd;
}
// --- Não esqueça dos Gets and Sets
}
Ou em JAVASCRIPT:
Fazendo uma rápida pesquisa no Google ([google]Javascript calculate value[/google])
<html>
<head>
<script LANGUAGE="JavaScript">
function calculate()
{
document.formulario.valorTotal.value = (document.formulario.valor.value) * (d ocument.formulario.qtd.value);
}
</script>
</head>
<body>
<form name="formulario" action="teste" method="post">
<input type="text" name="valor" size="10">
<input type="text" name="qtd" size="5" ONCHANGE="calculate()">
<input type="text" name="valorTotal" >
<input type="button" Value="Calculate" ONCLICK="calculate()"></td>
</form>
</body>
</html>
Bom dia.
Com HTML + Javascript:<input type='text' id='inputtext01'/>
<input type='text' onclick='this.value = document.getElementById("inputtext01").value;'/>
Pessoal, não deu certo,eu fiz assim:
<p:inputText id="unit_produto" value="#{orcamentosBean.orcamento.unit}" onchange="calculate()" style="width: 15em;"/>
up
Só coloca como [RESOLVIDO].
Mas eu NÃO resolvi meu problema, ainda não consigo efetuar o calculo
Quando carrega a pagina vc ja tem esses valores… ou vc quer calcular quando for inputado os dados?
Quero calcular quando eu inserir os dados.
Vou colocar um exemplo…
<script type="text/javascript">
function calc() {
var campoOne = document.getElementById("form:entradaOne").value;
var campoTwo = document.getElementById("form:entradaTwo").value;
document.getElementById("form:total").value = ((parseFloat(campoOne))) * ((parseFloat(campoTwo)));
}
</script>
<h:form id="form">
<f:inputText id="entradaOne" value="{bean.valor}" />
<f:inputText id="entradaTwo" value="{bean.qtd}" onblur="calc();" onchange="calc();" />
<f:outputText id="total" value="{bean.valorTotal}" />
</form>
Mais ou menos isso…
Testa ai…
<html>
<head>
<script language="JavaScript" type="text/javascript">
function Calcular(form) {
var field_total = document.getElementById('total');
var qtd = document.getElementById('qtd').value;
var valor = document.getElementById('valor').value;
field_total.value = valor * qtd;
}
</script>
</head>
<body>
<FORM NAME="formulario">
QTD: <INPUT TYPE=TEXT NAME="QTD" id="qtd" onChange="Calcular(this.form)"> <br />
Valor: <INPUT TYPE=TEXT NAME="VALOR" id="valor" onChange="Calcular(this.form)">
<br /><br />
Total: <INPUT TYPE=TEXT NAME="TOTAL" id="total">
</FORM>
</body>
</html>
Acabei de testar no IE.
Sobre o caso do PrimeFaces nunca mexi, mas provavelmente não será muito díficil.
Só jogar a função javascript no local próprio da sua aplicação.
Sobre as tags PrimeFaces provavelmente ficará assim:
<p:inputText id="qtd" onChange="Calcular(this.form)" value="#{seuBean.quantidade}" />
<p:inputText id="valor" onChange="Calcular(this.form)" value="#{seuBean.valor}" />
<p:inputText id="total" value="#{seuBean.valorTotal}" />
Só tome cuidado para alguams validações do tipo, que o usuário pode inserir letras, pontos e vírgulas.
Mas ai fica para uma outra ocasião xD
Gente, nenhum dos exemplos deu certo.Tentei todos mas nenhum funcionou 
Posta o código que você fez inteiro para nós olharmos. Acho que será mais fácil
Pessoal, testei os exemplos e eles funcionam, mas quando testo usando o primefaces ele não faz o calculo.É algum problema de configuração na pagina?
Mais ou menos isso aqui, os códigos não estão de acordo com as taglibs, fiz de cabeça, não lembro de cor os atributos: Ou em JAVASCRIPT: Fazendo uma rápida pesquisa no Google ([google]Javascript calculate value[/google])<html> <head> <script LANGUAGE="JavaScript"> function calculate() { document.formulario.valorTotal.value = (document.formulario.valor.value) * (d ocument.formulario.qtd.value); } </script> </head> <body> <form name="formulario" action="teste" method="post"> <input type="text" name="valor" size="10"> <input type="text" name="qtd" size="5" ONCHANGE="calculate()"> <input type="text" name="valorTotal" > <input type="button" Value="Calculate" ONCLICK="calculate()"></td> </form> </body> </html>
Tente o Código do TheMMM com essa pequena modificação: (Trocar a chamada do document.form por document.getElementById. No JSF geralmente da problema a chamada da outra maneira)
<html>
<head>
<script LANGUAGE="JavaScript">
function calculate()
{
document.getElementById("valorTotal").value = (document.getElementById("valor").value) * (document.getElementById("qtd").value);
}
</script>
</head>
<body>
<form name="formulario" action="teste" method="post">
<input type="text" name="valor" size="10">
<input type="text" name="qtd" size="5" ONCHANGE="calculate()">
<input type="text" name="valorTotal" >
<input type="button" Value="Calculate" ONCLICK="calculate()"></td>
</form>
</body>
</html>
Ainda não deu certo, minha pagina esta assim:
<script LANGUAGE="JavaScript">
function calculate()
{
document.getElementById("total_unit_produto").value = (document.getElementById("valor_unit_produto").value) * (document.getElementById("unit_produto").value);
}
</script>
...
<td><p:inputText id="unit_produto" value="#{orcamentosBean.orcamento.unit}" onchange="calculate()" style="width: 15em;"></p:inputText></td>
Mais alguma dica para resolver isso?
???
Criado 8 de agosto de 2011
Ultima resposta 14 de ago. de 2011
Respostas 20
Participantes 5
Alura O que é Python? — um guia completo para iniciar nessa linguagem de programação Acesse agora o guia sobre Python e inicie sua jornada nessa linguagem de programação: o que é e para que serve, sua sintaxe e como iniciar nela!
Casa do Codigo Guia pratico de TypeScript: Melhore suas aplicacoes... Por Thiago da Silva Adriano — Casa do Codigo