Função que duplica campos e faz calculo em array.

wandelcy · Setembro 25, 2012

Olá Pessoal,

Tenho uma função na pagina que duplica campos via javascript, dentre os 3 campos tenho o 1º que é a quantidade, o 2º que é o valor e 3º que é o resultado da multiplicação da quantidade * o valor.

A 1ª linha ele faz o calculo, que acredito que seja a linha sem o array(), da segunda em diante não faz mais o calculo.

gostaria da ajuda de vocês para que eu possa solucionar este problema, desde já agradeço a atenção.

Aqui vai o código:

<html>

<head>

/// função que duplica os campos

function duplicarCampos(){

var clone = document.getElementById('origem').cloneNode(true);

var destino = document.getElementById('destino');

destino.appendChild (clone);

var camposClonados = clone.getElementsByTagName('input');

for(i=0; i<camposClonados.length;i++){

camposClonados.value = '';

}

/// função que remove os campos

function removerCampos(id){

var node1 = document.getElementById('destino');

node1.removeChild(node1.childNodes[0]);

}

/// função que calcula e coloca em moeda REAL

$("#calcula").ready( function() {

$('#quanti, #valor').blur(function(){

var quanti = $('#quanti').val();

var valor = $('#valor').val();

if(valor == "") valor = 0;

if(quanti == "") quanti = 0;

var total = parseInt(quanti) * parseInt( valor.replace(/[\D]+/g,'') );

// 2 casas decimais

total = Math.abs(total);

var tmp = total+'';

tmp = tmp.replace(/([0-9]{2})$/g, ",$1");

if( tmp.length > 6 )

total = tmp.replace(/([0-9]{3}),([0-9]{2}$)/g, ".$1,$2");

$('#total').val(total);

})

</script>

</head>

<body>

<div id="origem">

<a href="java script:void(0)" onclick="duplicarCampos();" <img src="../icon/add.jpg"></a>

<input type="text" name="quanti[]" id="quanti" onblur="calcula();">

<input type="text" name="valor[]" id="valor">

<input type="text" name="total[]" id="total">

<a href="java script:void(0)" onclick="removerCampos(this);" <img src="../icon/cross.jpg"></a>

</div>

<div id="destino"></div>

</body>

</head>

</html>

Editado Setembro 25, 2012 por wandelcy

Romerito · Setembro 25, 2012

i aew wandelcy, bom, você está usando jQuery?

se sim tenta com esse código:

function calcula(obj) {
    var div = $(obj).parent();
    
    var valor = div.find("input:eq(0)").val();
    var quanti = div.find("input:eq(1)").val();
    
    if(valor == "") valor = 0;
    if(quanti == "") quanti = 0;
    var total = parseInt(quanti) * parseInt( valor.replace(/\D+/g,'') );
    
    total = Math.abs(total);
    var tmp = total+'';
    tmp = tmp.replace(/([0-9]{2})$/g, ",$1");
    if( tmp.length > 6 )
    total = tmp.replace(/([0-9]{3}),([0-9]{2}$)/g, ".$1,$2");
    div.find("input:eq(2)").val(total);
};

$(function(){
    $(".calcularOnblur").live('blur',function(){
        calcula($(this));
    });
});

e o html fica assim:

<div id="origem">
<a href="java script:void(0)" onclick="duplicarCampos();">adicionar</a>
<input type="text" name="quanti[]" id="quanti" class="calcularOnblur">
<input type="text" name="valor[]" id="valor" class="calcularOnblur">
<input type="text" name="total[]">
<a href="java script:void(0)" onclick="removerCampos(this);">remover</a>
</div>
<div id="destino"></div>

espero que ajude, abraço!

wandelcy · Outubro 1, 2012

Olá amigo, infelizmente não funcionou, agora ele não faz nenhum calculo, estava fazendo só a primeira linha, e estou usando jquery.

Arash · Outubro 1, 2012

O único motivo de não funcionar é por que...

/// função que calcula e coloca em moeda REAL
$("#calcula").ready( function() {
$('#quanti, #valor').blur(function(){
var quanti = $('#quanti').val();
var valor = $('#valor').val();
if(valor == "") valor = 0;
if(quanti == "") quanti = 0;
var total = parseInt(quanti) * parseInt( valor.replace(/[\D]+/g,'') );
// 2 casas decimais
total = Math.abs(total);
var tmp = total+'';
tmp = tmp.replace(/([0-9]{2})$/g, ",$1");
if( tmp.length > 6 )
total = tmp.replace(/([0-9]{3}),([0-9]{2}$)/g, ".$1,$2");
$('#total').val(total);
})
//// FALTA FECHAR O $('#calcula').ready com " }); "

wandelcy · Outubro 2, 2012

Olá amigos, mas o código foi postado já estava com o fechamento "});" é que na hora de fazer o poste eu copiei faltando, mas assim mesmo não funcionou, o codigo do romerito, não calculou nenhuma linha, como na 1 é sem array() e da segunda em diante é com array() não estou conseguindo fazer este calculo.

Se caso alguém tiver alguma solução por favor poste , para que eu possa finalizar este script, preciso demais, obrigado a todos.

Arash · Outubro 2, 2012

Eu fiz, um código, então se tiver alguma dúvida, me pergunte ^^

O calculo, eu fiz um aleatório, eu não entendi a sua conta ^^, mas é só usar o vv (valor do value) e o vq (valor da quantidade).

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
    $(document).ready(function(e) {
        $('a[name=adiciona]').click(function(e) {
            index = $('#origem').children('input[name=qnt]').last().attr('index');
            index = new Number(index);
            index += 3;
            if (isNaN(index)) {
                index = 0;
            }
            $('#origem').append('<input type="text" name="qnt" index=' + index + '><input type="text" name="valor" index=' + index + '><input type="text" name="total">');
            at();
        });
        $('a[name=remove]').click(function(e) {
            $('#origem').children('input[name=qnt]').last().remove('input[name=qnt]');
            $('#origem').children('input[name=valor]').last().remove('input[name=valor]');
            $('#origem').children('input[name=total]').last().remove('input[name=total]');
            at();
        });
        $('input[name=qnt]').blur(function(e) {
            calcula($(this));
        });
        $('input[name=valor]').blur(function(e) {
            calcula($(this));
        });
    });
    function at() {
        $('input[name=qnt]').off('blur').blur(function(e) {
            calcula($(this));
        });
        $('input[name=valor]').blur(function(e) {
            calcula($(this));
        });
    }
    function calcula (elem) {
        index = elem.attr('index');
        index *= 1;
            vq = document.getElementsByTagName('input').item(index).value;
            vv = document.getElementsByTagName('input').item(index+1).value;
                        conta = vq * vv;
            document.getElementsByTagName('input').item(index+2).value = conta;    
    }
</script>
    </head>
    <body>
    <div id="origem">
<a name="adiciona"> <img src="../icon/add.jpg"></a><a name="remove"> <img src="../icon/cross.jpg"></a>
<br>
<input type="text" name="qnt" index="0">
<input type="text" name="valor" index="0">
<input type="text" name="total">
</div>
<div id="destino"></div>
</body>
</html>

Editado Outubro 2, 2012 por Arash

Romerito · Outubro 2, 2012

Olá amigos, mas o código foi postado já estava com o fechamento "});" é que na hora de fazer o poste eu copiei faltando, mas assim mesmo não funcionou, o codigo do romerito, não calculou nenhuma linha, como na 1 é sem array() e da segunda em diante é com array() não estou conseguindo fazer este calculo.
Se caso alguém tiver alguma solução por favor poste , para que eu possa finalizar este script, preciso demais, obrigado a todos.

cara eu havia testado, e está funcionando, eu tenho certeza que você não está sabendo encaixar as peças, por isso vou postar o codigo todo:

<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">

function duplicarCampos(){
	var clone = $("#origem").clone();
	clone.find("input").val("");
	$("#destino").append(clone);
}
function removerCampos(obj){
	$(obj).parent().remove();
}

function calcula(obj) {
    var div = $(obj).parent();

    var valor = div.find("input:eq(0)").val();
    var quanti = div.find("input:eq(1)").val();

    if(valor == "") valor = 0;
    if(quanti == "") quanti = 0;
    var total = parseInt(quanti.replace(/\D+/g,'')) * parseInt( valor.replace(/\D+/g,'') );

    total = Math.abs(total);
    var tmp = total+'';
    tmp = tmp.replace(/([0-9]{2})$/g, ",$1");
    if( tmp.length > 6 )
    total = tmp.replace(/([0-9]{3}),([0-9]{2}$)/g, ".$1,$2");
    div.find("input:eq(2)").val(total);
};

$(function(){
    $(".calcularOnblur").live('blur',function(){
        calcula($(this));
    });
});
</script>

</head>
<body>
	<div id="origem">
		<a href="#" onclick="duplicarCampos();">adicionar</a>
		<input type="text" name="quanti[]" id="quanti" class="calcularOnblur">
		<input type="text" name="valor[]" id="valor" class="calcularOnblur">
		<input type="text" name="total[]">
		<a href="#" onclick="removerCampos(this);">remover</a>
	</div>
	<div id="destino"></div>
</body>
</head>
</html>

não esqueça de substiruir o import do jquery, para onde está localizado o seu.

aproveitei para modificar as funções duplicarCampos e removerCampos, o resto esta da mesma maneira, estava misturando DOM

com jquery, ao meu ver é bobagem usar DOM nã mao quando se tem o jquery.

se não funcionar, baixa um add-on para firefox chamado firebug, e pesquise para ver o seu funcionamento.

abraço!

wandelcy · Outubro 4, 2012

Olá amigo, realmente você tinha razão, o código sózinho em uma pagina html, funciona certo mesmo, mas na minha pagina php, não funciona de maneira alguma.

Como você falou instalei o firebug, e fui até o dom e verifiquei esta mensagem de erro:

TypeError: valor.replace is not a function

[Parar neste erro]

... total = parseInt(quanti.replace(/\D+/g,'')) * parseInt( valor.replace(/\D+/g,''...

esta é uma parte da função onde faz o calculo, mas mesmo mudando o replace, continua dando erro.

Já verifiquei o Jquery, retirei algumas fuções em javascript, não sei o que pode ser, será que você tem alguma "LUZ" para solucionar este problema.

Obrigado desde já pela sua atenção.

Att.

wandelcy

Arash · Outubro 4, 2012

Wandelcy, voce testou o meu código? Para testar o meu código, voce tem que colocar as imagens na mesma pasta do HTML, para voce clicar para adicionar ou retirar.

E no caso ali do seu erro, quando aparece, valor.replace is not a function, isso quer dizer que:

O valor da variavel "valor", não é string, e sim um número.

Basta antes de colocar replace,

valor = valor.toString();

Editado Outubro 4, 2012 por Arash

wandelcy · Outubro 8, 2012

Olá amigos, achei onde estava o erro, nas linhas: (select)

<a href="#" onClick="duplicarCampos();">adicionar</a>

<select style="height: 2em;vertical-align: middle;" name='unida[]' id="unida" class="cala borda-box-conteudo" >

</select>

<a href="#" onClick="removerCampos(this);">remover</a>

</div>

O select que adicionei não deixa fazer o calculo, pois a linha se tornou select, input quanti, input valor, input total

Outra duvida , é que quando multiplico no campo 3 * 4,44, o total é de 1332, ele não coloca o valor em real "1.332,00".

Gostaria tambem de adicionar um contador, para colocar um input no inicio da linha dando a sequencia de item: 1,2,3,4,5....

Ficaria assim no final:

input item, select, input quanti, input valor, input total.

Sera que conseguiriamos fazer ?

Obrigado desde já.

att.

wandelcy

wandelcy · Outubro 8, 2012

Desculpe, mil desculpas, achei onde esta o verdadeiro erro:

<a href="#" onClick="duplicarCampos();">adicionar</a>

eu adicionei mais um input do numero de itens:

<input type="text" name="item[]" id="item">

<a href="#" onClick="removerCampos(this);">remover</a>

Não era o Select e sim o input que adicionei para mostrar o numero de itens conforme a sua adição.

Por isso ele estava tentando calcular um item que não era valor, pois sempre estava em branco.

Agora se conseguirmos colocar um valor incial de 1 no item(input) e cada vez que adicionamos a linha, ele acrescenta 1, ficaria perfeito.

item tipo quantidade valor total

1 un 12 123,20 R$ 1.479,70

Este seria o final.

Obrigado.

Att

wandelcy

Entrar

Função que duplica campos e faz calculo em array.

Pergunta

Link para o comentário

Compartilhar em outros sites

10 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns