Input clonado não calcula

lindofeio · Junho 6, 2014

Saudações.

Bom andei pegando alguns scripts em javascript pra clonar um form, mas acontece que quando clico pra clonar, a função de calculo entre inputs pára de funcionar.
Creio que seja pelo fato do form clonado fique com o mesmo nome do original, até tentei renomear os inputs de calculo, mas ai creio que de erro na hora de gravar no php/Mysql.
Alguém teria alguma ideia pra fazer funcionar esses cálculos?
Os inputs que preciso calcular seria vlr_prod * qtd
Segue o código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="../../jquery/jquery.min.js"></script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<script>
<!--
function calcular(vlr_prod,qtd) {    
var vlr_prod = document.calcform.vlr_prod.value;    
var qtd = document.calcform.qtd.value;   
       
var res = parseFloat(vlr_prod) * parseFloat(qtd); 

total = res.toFixed(2);
  document.calcform.res.value = total;
  
} 
//-->
</script>
</head>

<body>
<p> 
  <script language="javascript">
<!--
var popup;
function Abrir_JanelA(UrL){
popup = window.open(UrL, "Consulta", "width=1200px,height=600px");
}
//-->
</script>
  <script language="JavaScript">
<!--
$(function () { 
function removeCampo() { 
$(".removerCampo").unbind("click"); 
$(".removerCampo").bind("click", function () { 
i=0; 
$(".telefones p.campoTelefone").each(function () { 
i++;
 }); 
 if (i>1) { $(this).parent().remove(); 
 } }); 
 } removeCampo(); 
 $(".adicionarCampo").click(function () { 
 novoCampo = $(".telefones p.campoTelefone:first").clone(); 
 novoCampo.find("input").attr(""); 
 novoCampo.insertAfter(".telefones p.campoTelefone:first"); 
 removeCampo();
  }); 
  }); 
 //--> 
  </script>
  <a href="javascript:Abrir_JanelA('lista.php')">Pesquisar Peças</a> </p>
<form name="calcform" method="post" action="" > 
<fieldset> <legend><span class="campoTelefone"><a href="#" class="adicionarCampo"> Adicionar Item </a></span></legend> 
    <div class="telefones"> 
      <p class="campoTelefone"> 
        <input name="prod_id" type="text" id="prod_id" size="10" />
        <input name="prod_desc" type="text" id="prod_desc" size="60" />
        <input name="vlr_prod" type="text" id="vlr_prod" size="20" />
        <input name="qtd" type="text" id="qtd" onBlur="calcular(document.calcform.value)" size="10"/>
        <input name="res" type="text" id="res" size="20" />
        <a href="#" class="removerCampo">Remover Campo</a> <br />
      </p> 
  
</div> 
</fieldset> 
</form>



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

</body>
</html>

Desde já agradeço a colaboração, obrigado.

rockrgo · Junho 9, 2014

o atributo id em uma página deve ser único ao clonar vc está duplicando os ids, tenta substituir o id por class.

lindofeio · Junho 9, 2014

o atributo id em uma página deve ser único ao clonar você está duplicando os ids, tenta substituir o id por class.

valeu pelo ajuda Rockrgo, tentei trocar i id por class, mas mesmo assim não funciona... estou pesquisando.... obrigado...

rockrgo · Junho 9, 2014

pra que serve esta linha?

novoCampo.find("input").attr("");

se for para deixar o input em branco o correto é:

novoCampo.find("input").val("");

lindofeio · Junho 9, 2014

pra que serve esta linha?
novoCampo.find("input").attr("");
se for para deixar o input em branco o correto é:
novoCampo.find("input").val("");

Bom dia Rockrgo, o input não fica em branco, ele recebe o valor de uma página externa, segue a página que preenche o input.

<html>  
<head>
<title>Lista de Clientes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="pt-br">
<script src="../../jquery/jquery.min.js"></script>
<script src="../../jquery/jquery.tablesorter.min.js"></script>
<script src="../../jquery/jquery.tablesorter.pager.js"></script>
<link href="../../css/custom.css" rel="stylesheet" type="text/css" media="screen">
<link href="../../css/basico.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
<!--
.style2 {color: #6699CC}
-->
</style>
<script language="javascript">
var pai = window.opener;

function EnviarProPai(TextO){
pai.document.getElementById('prod_id').value = document.getElementById('prod_id').value;
pai.document.getElementById('prod_desc').value = document.getElementById('prod_desc').value;
pai.document.getElementById('vlr_prod').value = document.getElementById('vlr_prod').value;

}
</script>
</head>
  <body>
<div id="Layer7" style="position:absolute; width:1168px; height:75px; z-index:7; left: 17px; top: 3px;">
  
  <p>
<?php
   $produto_id = $_POST['envia'];
   $produto_descricao = $_POST['produto_descricao'];
   $vlr_venda = $_POST['vlr_venda'];
   ?>
<form id="pesquisa" action="javascript:EnviarProPai();">
<input type="text" name="prod_id" id="prod_id" value="<?php echo "$produto_id";?>">
<input type="text" name="prod_desc" id="prod_desc" value="<?php echo "$produto_descricao";?>">
<input type="text" name="vlr_prod" id="vlr_prod" value="<?php echo "$vlr_venda";?>">
<input type="submit" value="Enviar" onClick="window.close();">
</form>
</div>
<p class="style2">.</p>
	<p class="style2">.</p>
	<p class="style2">.</p>
    <form method="post" id="frm-filtro">
  <p> 
    <label for="pesquisar">Pesquisar</label>
    <input type="text" id="pesquisar" name="pesquisar" size="30">
    <font color="#CCCC99">    </font> </p>
    </form>
    
   
<table width="1880px">
  <thead>
    <tr> 
      <th width="35"> </th>
      <th width="50">Ações</th>
      <th width="100"> Cód.</th>
      <th width="100"> Cód. Barras</th>
      <th width="174">Auxiliar</th>
      <th width="350">Descrição</th>
      <th width="100">Valor de Venda</th>
      <th width="150">Marca</th>
      <th width="136">Categoria</th>
      <th width="119">Estoque</th>
      <th width="150">Ultima Venda</th>
      <th width="131">Imagem</th>
      <th width="175">ID</th>
    </tr>
  </thead>
  <?php
	  require "../../../../db_config/conn.php";
	  
$busca = mysql_query("SELECT * FROM produtos ORDER BY  `produtos`.`produto_descricao` ASC");

 

if (empty($busca)) { //Se nao achar nada, lança essa mensagem
    echo "Nenhum registro encontrado.";
}
   
echo "<tbody>";
// quando existir algo em '$busca_query' ele realizará o script abaixo.
while ($lista = mysql_fetch_array($busca)) {?>
  <tr> 
    <form action="lista.php" method="post">
      <td width="35" height="18"><font size="2" face="Arial"><?php echo $seq ++;?></font></td>
      <td width="50" height="18"><div align="center"> <font size="2" face="Arial"> 
      <input name="envia" type="image" src="../../img/seleciona.gif" width="25" height="18" border="0" value="<?php echo $lista['produto_id'];?>">
</font></div></td>
      <td width="100" height="18"> <font size="2" face="Arial"><?php echo $lista['produto_id'];?> 
        </font></td>
      <td width="100" height="18"><font size="2" face="Arial"><?php echo $lista['produto_barras'];?> 
        </font></td>
      <td width="174" height="18"><font size="2" face="Arial"><?php echo $lista['produto_cod_original'];?> 
        </font></td>
      <td width="350" height="18"><font size="2" face="Arial"> <?php echo $lista['produto_descricao'];?>
        <input name="produto_descricao" type="hidden" id="produto_descricao" value="<?php echo $lista['produto_descricao'];?>">
        </font></td>
      <td width="300" height="18"><font size="2" face="Arial"><?php echo $lista['vlr_venda'];?> 
        <input name="vlr_venda" type="hidden" id="vlr_venda" value="<?php echo $lista['vlr_venda'];?>">
        </font></td>
      <td width="150" height="18"><font size="2" face="Arial"><?php echo $lista['produto_marca'];?></font></td>
      <td width="136" height="18"><font size="2" face="Arial"><?php echo $lista['produto_grupo'];?></font></td>
      <td width="119" height="18"><font size="2" face="Arial"><?php echo $lista['saldo_stq'];?>
        <input name="saldo_stq" type="hidden" id="saldo_stq" value="<?php echo $lista['saldo_stq'];?>">
        </font></td>
      <td width="150" height="18"><font size="2" face="Arial"><?php echo $lista['data_ultima_saida'];?></font></td>
      <td width="131" height="18"><font size="2" face="Arial"><?php echo $lista['prod_tags'];?></font></td>
      <td width="175" height="18"> <font size="2" face="Arial"> 
        <input name="produto_id" type="text" id="produto_id" value="<?php echo $lista['produto_id'];?>" size="10">
        </font></td>
    </form>
  </tr>
  <?php
 
  }
 
  echo  "</tbody>";
  ?>
</table>
    
    
<script>
    $(function(){
      
      $('table > tbody > tr:odd').addClass('odd');
      
      $('table > tbody > tr').hover(function(){
        $(this).toggleClass('hover');
      });
      
      $('#marcar-todos').click(function(){
        $('table > tbody > tr > td > :checkbox')
          .attr('checked', $(this).is(':checked'))
          .trigger('change');
      });
      
      $('table > tbody > tr > td > :checkbox').bind('click change', function(){
        var tr = $(this).parent().parent();
        if($(this).is(':checked')) $(tr).addClass('selected');
        else $(tr).removeClass('selected');
      });
      
     
      
      $('#pesquisar').keydown(function(){
        var encontrou = false;
        var termo = $(this).val().toLowerCase();
        $('table > tbody > tr').each(function(){
          $(this).find('td').each(function(){
            if($(this).text().toLowerCase().indexOf(termo) > -1) encontrou = true;
          });
          if(!encontrou) $(this).hide();
          else $(this).show();
          encontrou = false;
        });
      });
      
      $("table")
        .tablesorter({
          dateFormat: 'uk',
          headers: {
            1: {
              sorter: false
            },
            11: {
              sorter: false
            }
          }
        })
        
        .bind('sortEnd', function(){
          $('table > tbody > tr').removeClass('odd');
          $('table > tbody > tr:odd').addClass('odd');
        });
      
    });
    </script>
  </body>
</html>

Talvez o código esteja bagunçado pois são códigos que peguei na net e fui tentando adaptar, não tenho formação em nenhuma linguagem de programação, sou apenas um curioso e teimoso tentando fazer uma aplicação. Obrigado pela atenção.

lindofeio · Junho 11, 2014

Resolvido, fiz em PHP, inverti a lógica da página, estou salvando as linhas no BD e depois retorna tudo calculado.

Obrigado pela atenção Rockrgo.

Entrar

Arquivado

Input clonado não calcula

Recommended Posts

lindofeio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rockrgo 138

Compartilhar este post

Link para o post

Compartilhar em outros sites

lindofeio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rockrgo 138

Compartilhar este post

Link para o post

Compartilhar em outros sites

lindofeio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

lindofeio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante