Javascript 动态表单多个输入字段计算

我需要动态添加表单字段。每组输入值包含3个字段，

数量

，

价格

，和

总计

。每次我在

数量

和

价格

中插入数值时，

总计

字段必须显示总和或倍数

我已经意识到这一点，但它只适用于第一个领域。当我添加另一行字段时，它不会计算其他字段

这是我的密码

$（文档）.ready（函数（）{
var i=1；
$（'#添加'）。单击（函数（）{
i++；
$（'#articles'）。追加（'X'）；
});
$（文档）.on（'click'，'btn_remove'，函数（）{
var按钮_id=$（this.attr（“id”）；
$（“#行”+按钮id+”）.remove（）；
});
$（“#提交”）。单击（函数（）{
//警报（$（'#add_name'）.serialize（）；//警报所有值并正常工作
$.ajax({
url:“wwwdb.php”，
方法：“张贴”，
数据：$（'#添加名称'）。序列化（），
成功：功能（数据）{
$（'#添加_名称'）[0].reset（）；
}
});
});
功能upd_艺术（）{
变量数量=$（“#数量”）.val（）；
var价格=$（“#价格”）.val（）；
var总计=（数量*价格）.toFixed（2）；
$（'总计'）.val（总计）；
}
设定间隔（upd_艺术，1000）；
});





标题
新增
您应该在一个DOM中使用唯一的
id
属性。当相同的
id
出现在一个HTML中，并且您在jquery中使用它们时，只会考虑id的首次出现，它将不会按预期工作

创建新的动态元素时，请使用
class
而不是
id
。并在jquery函数中使用类选择器
upd_art
以下是解决方案：

第一：添加JQuery

第二：修正了计算方法。如果你想要数量*价格，它应该乘以而不是求和。查看我的更改

第三：在每个ID和append方法中添加一个数字

第四：更改计算方法以携带id

第三：对您创建的计时器进行注释，并调用在输入的内部计算最终值的方法。这样，您就不会永远进行处理（即使没有任何更改），它只在触发
change
事件时计算

希望能有帮助


$（文档）.ready（函数（）{
var i=0；
$（“#数量-”+i）.change（函数（）{
upd_艺术（一）
});
$（“#价格-”+i）.change（函数（）{
upd_艺术（一）
});
$（'#添加'）。单击（函数（）{
i++；
$（'#articles'）。追加（'X'）；
$（“#数量-”+i）.change（函数（）{
upd_艺术（一）
});
$（“#价格-”+i）.change（函数（）{
upd_艺术（一）
});
});
$（文档）.on（'click'，'btn_remove'，函数（）{
var按钮_id=$（this.attr（“id”）；
$（“#行”+按钮id+”）.remove（）；
});
$（“#提交”）。单击（函数（）{
警报（$（'#add_name'）.serialize（）；//警报所有值
$.ajax({
url:“wwwdb.php”，
方法：“张贴”，
数据：$（'#添加名称'）。序列化（），
成功：功能（数据）{
$（'#添加_名称'）[0].reset（）；
}
});
});
功能upd_艺术（一）{
变量数量=$（'#数量-'+i）.val（）；
var价格=$（'#价格-'+i）.val（）；
var totNumber=（数量*价格）；
var tot=totNumber.toFixed（2）；
美元("总计-"+i.val(总计);；
}
//设定间隔（upd_艺术，1000）；
});





标题
新增
对于初学者，ID必须是唯一的。当我向数据库插入值时，该脚本工作正常。目标是不手动插入总值，而是自动计算总值，然后保存到db。如果可能的话，请举例说明如何在这种情况下使用唯一ID。谢谢欢迎！！；）。看到了第一行在创建秒数或三分之一后不会更改。可能需要进一步检查，但是关于如何在jquery上使用ID的想法是这样的。无论如何，强烈建议使用angularJs进行这些操作；）