soma campo input dinamico jquery

[junaooaks 3]

ola pessoa

 

tenho um formulario que é acrescentado os campos dinamico com jqury

gostaria de somar um campos sem usar class pode ser por id é apresentar este valor em outro input.

 

var valor = 0; 
$('.teste').each(function(i){ 

valor = parseInt($(this).val()) + valor ;

html
<input type="text" id="qualquer1" class="teste" /> 
<input type="text" id="qualquer2" class="teste" />

 

este codigo usa a class como faço para usar o id ?

[William Bruno 1501]

$('#qualquer1,#qualquer2').each(function(i){ 

[junaooaks 3]

$('#qualquer1,#qualquer2').each(function(i){ 

 

o problema e que o formulario e dinamico ;)

tem como soma os campos com o mesmo id ?

e apresentar o valor em outro input

[William Bruno 1501]

você não pode ter varios elementos com o mesmo ID.

 

faça com class, ou com algum seletor que agrupe esses campos.

como por exemplo o elemento pai deles.

[junaooaks 3]

por class não da por causa do css. tem varios campos no formulario usando a class do css

 

talvez poderia por tabela ou nome dos campos pegando dinamicamente

 

cod que adicionar os input

$('#mais').click(function(){

	var next = $('#lista tbody').children('tr').length + 1;

	$('#lista tbody').append('<tr class="remover'+next+'">' + 
       	'<td><input type="text" name="item' + next + '" size="70" class="effect" onkeyup="up(this)" /></td>' + 
           '<td><input type="text" name="quantidade' + next + '" size="5" class="effect" onkeyup="up(this)"/></td>' +
        '<td><input type="text" name="uni' + next + '" size="8" class="effect" onkeyup="up(this)" /></td>' +
      '<td><input type="text" name="custo' + next + '" size="5" id="soma" class="effect" onkeyup="up(this)"/></td>' +
      '<td align="center" id="menos'+ next +'"><a href="#" onclick ="$(this).parent().parent().remove();"><img src="resources/images/menos.png" border="0"/></a></td>'+
      '</tr>');

	$(':hidden').val(next);

               return false;
}

 

tabela html que recebe os input dinamico

 

<table border="0" id="lista">
           <tr style="color:#000; font-weight:bold; background:#D9E5F3;">
               <td colspan="6" align=""><a href="#" id="mais"><img src="resources/images/add.png" border="0"/></a></td>
            </tr>
             <tr style="color:#FFF; font-weight:bold; background:#024B78;">
               <td align="center">PRODUTO</td>
               <td align="center">QUANT.</td>
               <td align="center">CUSTO UNI.</td>
               <td align="center">CUSTO</td>
               <td align="center">EXC...</td>
            </tr>
<tr>
               <td><input type="text" name="item1" size="70" class="effect" onkeyup="up(this)"/></td>
               <td><input type="text" name="quantidade1" size="5" class="effect" onkeyup="up(this)" id="quantidade1"/></td>
               <td><input type="text" name="uni1" size="8" class="effect" onkeyup="up(this)"/></td>
               <td><input type="text" name="custo1" size="5" class="effect" onkeyup="up(this)"/></td>
               <td align="center"><a href="" id="menos"><img src="resources/images/menos.png" border="0"/></a></td>
             </tr>
<input type="hidden" value="1" name="quantidade_itens" />
          </table>

 

eu to meio :wacko: sem saber o que fazer

[William Bruno 1501]

cria uma class somente para o js usar.. não tem problema.

 

<td><input type="text" name="custo1" size="5" class="effect js-somar-este" onkeyup="up(this)"/></td>

e ai você usa a class:

$('.js-somar-este').each(function(i){ 

 

entendeu ?

[junaooaks 3]

cara não sabia que podia fazer isto :clap: vou testar agora

 

<script type="text/javascript">
var valor = 0; 
$('.soma').each(function(i){ 

valor = parseInt($(this).val()) + valor ;
$('#valor').val();
}); 
</script>

 

como mostro o resultado dentro do input automaticamente, tipo assim que pular de campo soma

 

<input name="subtotal" type="text" class="effect" id="valor" value="" style="color:#F00;" size="15" maxlength="10" />

[William Bruno 1501]

dispare a tua soma no evento onblur()

[junaooaks 3]

dispare a tua soma no evento onblur()

 

<script type="text/javascript">
   function calcula(){
       var valor = 0; 
       $('.soma').each(function(i){ 

           valor = parseInt($(this).val()) + valor ;
           $('#valor').val();
       }); 
   }
</script>

html que dispara

<input type="text" name="custo1" size="5" class="effect soma" onkeyup="up(this)" onBlur="calcula();"/>

 

html que era pra receber

<input name="subtotal" type="text" class="effect" id="valor" value="" style="color:#F00;" size="15" maxlength="10" />

 

nao funciona nao mostra erro :cry:

[William Bruno 1501]

o erro do js é meio escondido..

 

aperte Ctrl+Shift+J no teu Firefox.

http://wbruno.com.br/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

[junaooaks 3]

William Bruno

 

mesmo assim, não mostra erro como se não estive executando

o tem alguma coisa errado no codigo ?

 

estou usando a versao jquery

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

[William Bruno 1501]

é q não tinha erro nenhum de sintaxe, apenas um de lógica.

 

faltou você atribuir, assim:

 

    function calcula(){
       var valor = 0; 
       $('.soma').each(function(i){ 

           valor = parseInt($(this).val()) + valor ;
       }); 
       $('#valor').val( valor ); //fora do loop
   }