Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá galera bom dia, estou tentando fazer uma parte de um sistema que estou fazendo em PHP mais não
consigo sei que é em JAVASCRIPT queria ver se algum pode me ajudar.
Não estou conseguindo colocar a foto aqui então coloquei ela temporariamente em uma pagina do meu site >>>
http://www.hksinformatica.com.br/IMaster/Imaster.jpg
Queria calcular a quantidade vezes o valor e já ser exibido no total e depois somar todos os
totais e exibir no total geral, lembrando que o valor e a quantidade e o usuário que coloca.
Alguém pode me ajudar ?
Desde já muito obrigado.
Sim, qual a dificuldade? Algum erro?
Então estou começando agora a mexer com JAVA eu ainda não sei nada, andei
pesquisando e consegui fazer isso (Está logo a baixo), mais ainda não serve
pra min por que tenho que fazer vários campos de input de produto e também tenho
que colocar o total geral... e nem sei se como eu fiz está certo.
Estou fazendo esse de teste ainda não apliquei naquele código da imagem
no enunciado.
<html>
<head>
<script type="text/javascript">
function id( el ){
return document.getElementById( el );
}
function total01( un01, qnt01 ){
return un01 * qnt01;
}
window.onload = function(){
id('valor_unitario01').onkeyup = function()
{
id('total01').value = total01( this.value , id('qnt01').value );
}
id('qnt01').onkeyup = function(){
id('total01').value = total01( id('valor_unitario01').value , this.value );
}
}
</script>
</head>
<body>
<form action="" method="post">
Valor Unitário 01:<input type="text" name="valor_unitario01" id="valor_unitario01" />
Quantidade: <input type="text" name="qnt01" id="qnt01" value="0" />
Total: <input type="text" name="total01" id="total01" readonly="readonly" />
</form>
</body>
</html>1º: JAVAScript.
2º: Utilize as tags de código para postar código.
3º: Como não sabe se o que fez está certo, você não testou?
>
1º: JAVAScript.
2º: Utilize as tags de código para postar código.
3º: Como não sabe se o que fez está certo, você não testou?
OK, JAVASCRIPT, Vou usar as tags de código.
E sim eu teste e da certo só não sei se é a maneira correta de se
fazer tal procedimento, mais só o que eu fiz não me ajuda.
Se funciona, bola pra frente.
O que falta pra essa solução te ajudar?
Eu só consigo fazer um input (Quantidade, Valor e Total) com essa function e eu precisava de mais
ou menos dez .
EX:
Com essa eu faço >>>
Quantidade Valor Total
2 20,00 40,00
(Usuário) (Usuário) (Automático)
E eu precisava de >>>
Quantidade Valor Total
2 20,00 40,00
10 1,00 10,00
5 10,00 50,00
1 100,00 100,00
(Usuário) (Usuário) (Automático)
E depois eu queria soma toda a coluna total dando um valor GERAL DOS TOTAIS
<html>
<head>
<script type="text/javascript">
function id( el ){
return document.getElementById( el );
}
function total01( un01, qnt01 ) return un01 * qnt01;
}
window.onload = function() id('valor_unitario01').onkeyup = function()
{
id('total01').value = total01( this.value , id('qnt01').value );
}
id('qnt01').onkeyup = function()
{
id('total01').value = total01( id('valor_unitario01').value , this.value );
}
}
</script>
</head>
<body>
<form action="" method="post">
Valor Unitário 01:<input type="text" name="valor_unitario01" id="valor_unitario01" />
Quantidade: <input type="text" name="qnt01" id="qnt01" value="0" />
Total: <input type="text" name="total01" id="total01" readonly="readonly" />
</form>
</body>
</html>Vou fazer aqui! depois posto o resultado!
<form action="" method="post">
<table id="table-shop">
<tr id="line1">
<td class="class_unit">Valor Unitário 01:<input type="text" name="valor_unitario01" id="valor_unitario01" /></td>
<td class="class_quant">Quantidade: <input type="text" name="qnt01" id="qnt01" value="0" /></td>
<td class="class_total">Total: <input type="text" name="total01" id="total01" readonly="readonly" /></td>
</tr>
<tr id="line2">
<td class="class_unit">Valor Unitário 02:<input type="text" name="valor_unitario02" id="valor_unitario02" /></td>
<td class="class_quant">Quantidade: <input type="text" name="qnt02" id="qnt02" value="0" /></td>
<td class="class_total">Total: <input type="text" name="total02" id="total02" readonly="readonly" /></td>
</tr>
<tr id="line3">
<td class="class_unit">Valor Unitário 03:<input type="text" name="valor_unitario03" id="valor_unitario03" /></td>
<td class="class_quant">Quantidade: <input type="text" name="qnt02" id="qnt02" value="0" /></td>
<td class="class_total">Total: <input type="text" name="total02" id="total02" readonly="readonly" /></td>
</tr>
</table>
<div id="total">Total: <span class="value_total"></span> </div>
</form>tomei a liberdade de alterar um pouco sua estrutura de codigo utilizei tabelas para ter um referência unica de linha desta forma quando um determinado evento é disparado e possivel que eu consiga a linha exata do evento, baixo o javascript, utilizei jquery
function id( el ){
//return document.getElementById( el );
return $( el );
}
function calcTotal( un01, qnt01 ) return un01 * qnt01;
}
function getElementParent(event){
return event.srcElement.parentNode.parentNode.getAttribute('id');
}
function getValorUnitario(elParent){
return $('#'+elParent+' .class_unit input').val();
}
function getQuantidade(elParent){
return $('#'+elParent+' .class_quant input').val();
}
function setFieldTotal(elParent, valueUnit, valueQuant){
id('#'+elParent+' .class_total input').val(calcTotal( valueUnit , valueQuant));
setTotalFinal();
}
function setTotalFinal(){
var total = 0;
$('#table-shop tr .class_total input').each(function(){
if(this.value != ''){
var valor = this.value;
total += parseInt(valor);
}
});
$('#total .value_total').html(total);
}
$(document).ready(function(){
id('#table-shop tr .class_unit').keyup(function(event)
{
var elemenPai = getElementParent(event);
var valueUnit = getValorUnitario(elemenPai);
var valueQuant = getQuantidade(elemenPai);
setFieldTotal(elemenPai, valueUnit , valueQuant);
});
id('#table-shop tr .class_quant').keyup(function(event)
{
var elemenPai = getElementParent(event);
var valueUnit = getValorUnitario(elemenPai);
var valueQuant = getQuantidade(elemenPai);
setFieldTotal(elemenPai, valueUnit , valueQuant);
});
});espero que isso ajude exemplo: http://jsfiddle.net/QBTN6/
Nossa muito obrigado esse que você fez ficou muito BOM e me ajudou bastante nem sei como agradecer ..
Estou tentando aqui mais não estou conseguindo acrescentar uma coisa, eu queria deixar o
TOTAL GERAL(Que são todos os totais) dentro de um input também por que vou
gravar esses resultados em um banco de dados.
fiz as modificações:
<div id="total">Total: <input class="value_total" readonly></input>
na funcao setTotalFinal
$('#total .value_total').val(total);
Como eu converto numero inteiro para numero real, vou fazer com esse mesmo código acima ?
usa mascara de moeda, acho que é isso que quer né mas te aconselho a pesquisar sobre a configuração do compo no banco pra receber esse tipo de valor caso seja diferente de varchar
No banco já esta ok, já coloquei os campos certos para os tipos de objetos que vou gravar ..
a questão é no input mesmo, se eu colocar números reais no preço ela da o 'NaN' no total.
Alguém pode ajudar ???
Se os itens são preenchidos por um laço que mostra todos os produtos disponiveis para fazer pedido, como deixar este script fazer o cálculo para N produtos, visto que está para 3?
Bom dia!
Tem como formatar em Real com centavos.
Estou tentando mas infelizmente não consegui.
Desde já agradeço,
Gilberto
Boa tarde!
Como envio estes dados para outra pagina?
Desde já agradeço
Gilberto
>
Em 22/04/2014 at 11:48, wanderval disse:
fiz as modificações:
<div id="total">Total: <input class="value_total" readonly></input>
na funcao setTotalFinal
$('#total .value_total').val(total);
Olá, no link: [http://jsfiddle.net/QBTN6/2/](http://jsfiddle.net/QBTN6/2/) funcionou bonitinho, mas quando eu joguei em um editor de texto no meu pc dá o seguinte erro:
Uncaught TypeError: Cannot read property 'parentNode' of undefined
at getElementParent (final.html:21)
at HTMLTableCellElement.<anonymous> (final.html:48)
at HTMLTableCellElement.dispatch (jquery.js:4409)
at HTMLTableCellElement.elemData.handle (jquery.js:4095)
o que seria?>
54 minutos atrás, nosredna disse:
Olá, no link: http://jsfiddle.net/QBTN6/2/ funcionou bonitinho, mas quando eu joguei em um editor de texto no meu pc dá o seguinte erro:
Uncaught TypeError: Cannot read property 'parentNode' of undefined
at getElementParent (final.html:21)
at HTMLTableCellElement.<anonymous> (final.html:48)
at HTMLTableCellElement.dispatch (jquery.js:4409)
at HTMLTableCellElement.elemData.handle (jquery.js:4095)
o que seria?
Bom... descobri que funciona com o jQuery 1.7.2, mas não como jQuery 3.3.1! Alguém sabe alguma solução para corrigir isso? VlwBom, consegui... a solução, para quem se interessar, seria substituir:
function getElementParent(event){
return event.srcElement.parentNode.parentNode.getAttribute('id');
}
por:
function getElementParent(event){
return event.target.parentNode.parentNode.getAttribute('id');
}
Solucionado!
Sim, qual a dificuldade? Algum erro?