Jump to content
Sfork16

Multiplicar quantidade por preço e exibir no total

Recommended Posts

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.

Share this post


Link to post
Share on other sites

 

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>

Edited by Sfork16

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites
<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/

Edited by wanderval
  • +1 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 ???

Share this post


Link to post
Share on other sites
Em 22/04/2014 at 11:48, wanderval disse:

fiz as modificações:

 

http://jsfiddle.net/QBTN6/2/


<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/ 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?

Share this post


Link to post
Share on other sites
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? Vlw

Share this post


Link to post
Share on other sites

Bom, 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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.