Hola amigos. Soy nuevo en este foro ,espero me puedan ayudar.
Tengo un pequeño codigo, una tabla con 3 campos que al presiona el boton "btnisertar" va agregando productos dinamicamente sin cargar la pagina .Lo que necesito es calcular el "total" dinamicamente para mostrarlo en otro input. (que cambie el valor cada vez que agrege un producto) .
<table>
<tr>
<td class='td1'> PRODUCTO</td>
<td class='td1'><div class="autocomplete" ><input type='text' name='txtproducto' id='txtproducto' size="30" data-source="search.php?search=" /></div></td>
<td class='td1'>CANTIDAD</td>
<td class='td1'><input type='text' name='txtcantidad' id='txtcantidad' size='30' class='Campo' /></td>
<td class='td1'>VALOR</td>
<td class='td1'><input type='text' name='txtprecio' id='txtprecio' size='10' class='Campo' /><input name="btnInsertar" id="btnInsertar" type="button" value="Insertar" class="" /></td>
</tr>
</table>
//al presionar insertar me muestar abajo otra tabla con los los valores sin recargar la pagina dinamicamente con javascript.
<table class='tabl' id="tblDatos">
<tbody id="tabla">
<tr class='tr'>
<td align='center' class='td'><strong>Producto</strong></td>
<td align='center' class='td'><strong>Cantidad</strong></td>
<td align='center' class='td'><strong>Precio</strong></td>
<td align='center' class='td'><strong>SubTotal</strong></td>
<td align='center' class='td'><strong>Eliminar</strong></td>
</tr>
<script type="text/javascript" charset="utf-8">
$(function() {
$("#btnInsertar").click(addUsuario);
});
function addUsuario(){
var producto=$("#txtproducto").val();
var cantidad=$("#txtcantidad").val();
var precio=$("#txtprecio").val();
var subtotal=(cantidad*precio);
var tablaDatos= $("#tblDatos");
if(producto!="" || cantidad!="" || precio!="" ){
tablaDatos.append("<tr><td><input type='text' name='producto[]' value="+producto+" /></td><td><input type='text' name='cantidad[]' value="+cantidad+" /></td><td><input type='text' name=precio[]' value="+precio+" /></td><td><input type='text' name='subtotal[]' value="+subtotal+" /></td><td align='center'><input type='button' onclick='borrar(this)' value='ELIMINAR' /></td></tr>");
reset_campos();
}
}
</script>
</tbody>
</table>