Jump to content
Fórum Script Brasil
  • 0

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


wandelcy
 Share

Question

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>

<script type="text/javascript">

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

Edited by wandelcy
Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0

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!

Link to comment
Share on other sites

  • 0

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 " }); "

Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

  • 0

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>

Edited by Arash
Link to comment
Share on other sites

  • 0
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!

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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();

Edited by Arash
Link to comment
Share on other sites

  • 0

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

<div id="origem">

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

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

<option value=""></option>

<option value="Un">Un</option>

<option value="m²">m²</option>

<option value="KM">KM</option>

</select>

<input type="text" name="quanti[]" id="quanti" class="calcularOnblur">

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

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

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

</div>

<div id="destino"></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

Link to comment
Share on other sites

  • 0

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

<input type="text" name="quanti[]" id="quanti" class="calcularOnblur">

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

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

<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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share



  • Forum Statistics

    • Total Topics
      150.2k
    • Total Posts
      647.4k
×
×
  • Create New...