muy buenas tengo este codigo:
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<title> </title>
<script type='text/javascript'>
window.onload=function(){
$(document).ready(function(){
$('[id^=total]').on('change',function() {
var total = 0;
$('[id^=total]').each(function(index){
total += parseFloat($(this).val()?$(this).val():0);
});
var totalAll = $('#amt_due').val(total.toFixed(2));
});
});
$(document).ready(function() {
var max_fields = Infinity; //maximum input boxes allowed
var wrapper1 = $(".input_fields_wrap1");
var add_button1 = $(".add_field_button1"); //Add button
var x = 0; //initlal text box count
$(add_button1).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper1).append('<div id="contenedor"><input type="text" value="'+x+'" size="5"> <input type="text" name="prod['+x+'][detalle]" size="60"/> N/S: <input type="text" name="prod['+x+'][serie]" size="40"/> P.Unit: <input type="text" name="prod['+x+'][cantidad]" id="total" size="10"/><input class="remove_field" type="button" value="- Eliminar" /></div>'); //add input box
}
});
$(wrapper1).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
}//]]>
</script>
</head>
<body>
<form name="myForm" action="guardar3.php" method="POST">
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="65" align="center">ITEM</td><td width="400" align="center">DETALLE</td>
<TD width="241" align="center">NUMERO DE SERIES</TD><TD width="194" align="center">PRECIO</TD><td width="100">CANCElAR</td>
</tr>
<TR>
<td colspan="5">
<div class="input_fields_wrap1">
<input class="add_field_button1" type="button" value="+ Agregar" /> <input type="submit" value="Enviar">
</div>
</td>
</TR>
<tr>
<td colspan="3">total</td><td> <input type="text" class="k-textbox" value="0.00" style="color: red; text-align: right; font-family: courier" name="total_amt_due" id="amt_due" readonly /></td>
</tr>
</table>
</form>
</body>
</html>
.... name="prod['+x+'][cantidad]" esto es para la bs de datos php bueno no esta completo solo es para ver si llegan los datos
<?php
foreach($_POST['prod'] as $key => $val){
echo "detalle: ".$val['detalle'];
echo "<br>";
echo "serie: ".$val['serie'];
echo "<br>";
echo "total: ".$val['total'];
echo "<br>";
echo "---------------------------";
echo "<br>";
}
?>
el problema es q no me genera la auto suma como en este:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
</style>
<title> by rochellecanale</title>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('[id^=total]').on('change',function() {
var index = this.id.match(/\d+/)[0];
var total_input = parseInt($('#total'+index).val());
var total = 0;
$('[id^=total]').each(function(index){
total += parseFloat($(this).val()?$(this).val():0);
});
var totalAll = $('#total_amt_due').val(total.toFixed(2));
});
});//]]>
</script>
</head>
<body>
<table border="1">
<tr>
<td>
<input type='text' id='total' value='' />
</td>
</tr>
<tr>
<td>
<input type='text'' id='total' value='' />
</td>
</tr>
<tr>
<td>
<input type='text' id='total' value='' />
</td>
</tr>
<tr>
<td>
<input type='text' id='total' value='' />
</td>
</tr>
<tr>
<td>
<input type='text' id='total' value='' />
</td>
</tr>
<tr>
<td>
<input type="text" class="k-textbox" value="0.00" style="color: red; text-align: right; font-family: courier" name="total_amt_due" id="total_amt_due" readonly="readonly" />
</td>
</tr>
</table>
</body>
</html>
la diferencia es q uno se genera automáticamente no soy muy bueno con jquery, o como se debería aplicar!!!