Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Sfork16

Multiplicar quantidade por preço e exibir no total

Por , em Javascript

Recommended Posts

Sfork16    0

Sfork16
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Sfork16    0

Sfork16
Postado

 

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Sfork16    0

Sfork16
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Sfork16    0

Sfork16
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

wanderval    19

wanderval
Postado 
<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/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Sfork16    0

Sfork16
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

wanderval    19

wanderval
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Sfork16    0

Sfork16
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

nosredna    1

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

nosredna    1

nosredna
Postado
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

Compartilhar este post

Link para o post
Compartilhar em outros sites

nosredna    1

nosredna
Postado

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito