comando de repetir não funciona a função

[Danilo Moreira da Costa 0]

olá Pessoal, estou com um problema meio bizarro, nao entendo muito de java, entao montei um sistema q era para inserir replicas de campos e tbm fazer alguns calculos, no caso ele funcionaria da seguinte forma. o campo quantidade iria multiplicar com o campo valor unitário e exibir o resultado no campo resultado, o problema disso é q estou conseguindo na replicação os operadores funcionarem, no primeiro elemento funciona, ja no segundo não.

veja o código.

 

Este é o código da multiplicação.

 <script type="text/javascript">
function Calc(){
ValorUm = parseFloat(document.getElementById('valorUni').value);
ValorDois = parseFloat(document.getElementById('quantidade').value);

document.getElementById('resultado').value = (ValorUm*ValorDois).toFixed(2);
}
</script>

o formulário aonde estão os campos.

<div id="tabela_produto">

    <table  border="0" width="100%" id="table" >
        <thead>
            <tr id="tabletitulo">
                <td align="center">QUANTIDADE</td>
                <td align="center">DESCRIÇÃO/MERCADORIAS</td>
                <td align="center">VALOR</td>
                
            </tr>            
        </thead>
        <tbody id="repetir">
            <tr>
                <td id="tableborder"><input name="quantidade" type="text" id="quantidade" class="box4" size="10" >
                					
                </td>
                <td id="tableborder"><select name="valorUni" id="valorUni" size="1" onblur="Calc()" class="box5" />
                					<option value="">Abrir lista de produtos</option>
                					<?php
                                    $sql= "SELECT * FROM controle_estoque";
									$qry = mysql_query($sql);

									while ($produto = mysql_fetch_array($qry))
									{

									?>
  									<option value="<?php echo $produto["preco"]; ?>" ><?php echo $produto["nome_produto"]; ?> | Preço Unitário R$<?php echo $produto["preco"]; ?></option>
                                  <?php }?>
                                    </select></label>
                                   
                </td>
            
                
                <td id="tableborder"><input name="resultado" type="text" id="resultado" class="box4" ></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td align="right" colspan="3"><input type="button" value="Adicionar" id="add" /></td>
            </tr>
        </tfoot>
    </table>
  
</div>

Código para duplicar.

<script>

$(function(){ /* Quando o botão adicionar for clicado... */ $('input#add').click(function(){ /* Pega uma linha existente */ var linha = $('tbody#repetir tr').html(); /* Acrescenta uma nova linha */ $('tbody#repetir').append('<tr>' + linha + '</tr>'); }); });

</script>

[Lucas Guima 164]

Você precisa trocar seus ids por classes e utilizar o a função .on() para funcionar com elementos criados após o carregamento da página.

 

Obs.: Javascript, não Java.

[Danilo Moreira da Costa 0]

Não sei como fazer isso, possui sou muito iniciante, sei dar nomes nos ids do form mais nao sei trabalhar função no javascript, tem como vc me apresentar um código para mim usar?

[Lucas Guima 164]

Postei o link ali... https://api.jquery.com/on/

[Danilo Moreira da Costa 0]

então meu amigo veja o q fiz e msm assim nao estão funcionando

<script type="text/javascript">

function Calc(){

ValorUm = parseFloat.on("click",(document.getElementByClassName('valoruni').value));

ValorDois = parseFloat.on("click",(document.getElementByClassName('quantidade').value));

document.getElementByClassName.on("click",('subresultado').value = (ValorUm*ValorDois).toFixed(2));

})

</script>

[Lucas Guima 164]

Véi... tú tá misturando tudo. Não é assim que funciona o .on().

[ignoredxyz 17]

$(document).ready(function() {
    /* Quando o botão adicionar for clicado... */
    $(document).on("click", "input#add", function(e) {
        /* Pega uma linha existente */
        var linha = $('tbody#repetir tr').html();
        /* Acrescenta uma nova linha */
        $('tbody#repetir').append('<tr>' + linha + '</tr>');
    });
});

Não se esqueça de chamar a biblioteca jQuery

[Danilo Moreira da Costa 0]

obrigado pela ajuda, é o q precisa!