计算动态添加的输入中的值
calculating values in dynamically added inputs
我正在尝试构建一个公用事业账单计算器,允许用户动态添加额外的行。每条线路将有3个字段:瓦数、每天使用的小时数和瓦数*小时的总和。第一行一切都很好,但当我尝试动态添加额外的行时,我的代码仍然可以使用第一个产品,并给我一个NaN。理想情况下,一旦他们完成了添加行,我会在底部加上总千瓦时。粘贴在下面的是我到目前为止所拥有的:
<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var maxField = 30; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = '<div>Wattage: <input type="text" name="field_wattage" value="300" size=4 maxlength="4" onchange="product()"> Hours Per Day Used: <select name="field_hour" onchange="product()"><option value="01"> 01</option><option value="02"> 02</option><option value="03"> 03</option><option value="04"> 04</option><option value="05"> 05</option><option value="06"> 06</option><option value="07"> 07</option><option value="08"> 08</option><option value="09"> 09</option><option value="10"> 10</option><option value="11"> 11</option><option value="12"> 12</option><option value="13"> 13</option><option value="14"> 14</option><option value="15"> 15</option><option value="16"> 16</option><option value="17"> 17</option><option value="18"> 18</option><option value="19"> 19</option><option value="20"> 20</option><option value="21"> 21</option><option value="22"> 22</option><option value="23"> 23</option><option value="24"> 24</option></select> Daily Wattage: <INPUT TYPE="text" ID="dailyproduct" NAME="result" VALUE=""/><a href="javascript:void(0);" class="remove_button" title="Remove field"> Remove Line</a></div>'; //New input field html
var x = 1; //Initial field counter is 1
$(addButton).click(function(){ //Once add button is clicked
if(x < maxField){ //Check maximum number of input fields
x++; //Increment field counter
$(wrapper).append(fieldHTML);
// Add field html
}
});
$(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});
</script>
<script type="text/javascript">
function product()
{
var num1 = document.myform.field_wattage.value;
var num2 = document.myform.field_hour.value;
var myproduct = parseInt(num1) * parseInt(num2);
document.getElementById('dailyproduct').value = myproduct;
}
</script>
<?php
echo "<br>";
echo "</select>";
echo "<br>";
$dateStart = mktime(0, 0, 0, 03, 01);
$dateEnd = mktime(0, 0, 0, 10, 31);
if (time() < $dateEnd && time() > $dateStart)
// show stuff
echo "You are in Peak Hours";
else
echo "You are in Off Peak Hours";
?>
<body>
<FORM NAME="myform">
<br />
<br />
<br />
<div class="field_wrapper">
<div>
Wattage:
<input type="text" name="field_wattage" value="300" size=4 maxlength="4" onchange="product()">
</select> Hours Per Day Used:
<select name="field_hour" onchange="product()"/>
<option value="01"> 01</option>
<option value="02"> 02</option>
<option value="03"> 03</option>
<option value="04"> 04</option>
<option value="05"> 05</option>
<option value="06"> 06</option>
<option value="07"> 07</option>
<option value="08"> 08</option>
<option value="09"> 09</option>
<option value="10"> 10</option>
<option value="11"> 11</option>
<option value="12"> 12</option>
<option value="13"> 13</option>
<option value="14"> 14</option>
<option value="15"> 15</option>
<option value="16"> 16</option>
<option value="17"> 17</option>
<option value="18"> 18</option>
<option value="19"> 19</option>
<option value="20"> 20</option>
<option value="21"> 21</option>
<option value="22"> 22</option>
<option value="23"> 23</option>
<option value="24"> 24</option>
</select>
Daily Wattage:
<INPUT TYPE="text" ID="dailyproduct" NAME="dailyproduct" VALUE=""/>
<INPUT TYPE="button" NAME="button" Value="=" onClick="product()"/>
<a href="javascript:void(0);" class="add_button" title="Add field"> Add Line</a>
</div>
</div>
</FORM>
</div>
</body>
</html>
我在这里找了一上午,没有找到任何能描述我问题的东西。提前谢谢。
我在下面创建了一个工作示例。正如我在评论中所说,您是按名称引用字段,当页面上有相同名称的字段时,这是不起作用的。
要以更现代的方式解决问题,您应该使用事件委派并确定要在事件中更新哪些字段。在这个例子中,我编写了一个事件来处理select
和input
的更改,然后我使用jQuery的.closest()
方法来帮助我找到需要更新的字段。
$(document).ready(function(){
var maxField = 30; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = '<div>Wattage: <input type="text" name="field_wattage" value="300" size=4 maxlength="4"> Hours Per Day Used: <select name="field_hour"><option value="01"> 01</option><option value="02"> 02</option><option value="03"> 03</option><option value="04"> 04</option><option value="05"> 05</option><option value="06"> 06</option><option value="07"> 07</option><option value="08"> 08</option><option value="09"> 09</option><option value="10"> 10</option><option value="11"> 11</option><option value="12"> 12</option><option value="13"> 13</option><option value="14"> 14</option><option value="15"> 15</option><option value="16"> 16</option><option value="17"> 17</option><option value="18"> 18</option><option value="19"> 19</option><option value="20"> 20</option><option value="21"> 21</option><option value="22"> 22</option><option value="23"> 23</option><option value="24"> 24</option></select> Daily Wattage: <INPUT TYPE="text" NAME="dailyproduct" VALUE=""/><a href="javascript:void(0);" class="remove_button" title="Remove field"> Remove Line</a></div>'; //New input field html
var x = 1; //Initial field counter is 1
$(addButton).click(function(){ //Once add button is clicked
if(x < maxField){ //Check maximum number of input fields
x++; //Increment field counter
$(wrapper).append(fieldHTML);
// Add field html
}
});
$(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});
$(".field_wrapper").on("change", "input,select", function() {
var parent = $(this).closest("div");
var num1 = parent.find('[name="field_wattage"]').val();
var num2 = parent.find('[name="field_hour"]').val();
var dailyproduct = parent.find('[name="dailyproduct"]');
var myproduct = parseInt(num1) * parseInt(num2);
dailyproduct.val(myproduct);
getTotal();
});
function getTotal() {
var total = 0;
$('[name="dailyproduct"]').each(function() {
total += (parseInt(this.value, 0) || 0);
});
$("#total").val(total);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="field_wrapper">
<div>
Wattage:
<input type="text" name="field_wattage" value="300" size=4 maxlength="4" />
Hours Per Day Used:
<select name="field_hour">
<option value="01"> 01</option>
<option value="02"> 02</option>
<option value="03"> 03</option>
<option value="04"> 04</option>
<option value="05"> 05</option>
<option value="06"> 06</option>
<option value="07"> 07</option>
<option value="08"> 08</option>
<option value="09"> 09</option>
<option value="10"> 10</option>
<option value="11"> 11</option>
<option value="12"> 12</option>
<option value="13"> 13</option>
<option value="14"> 14</option>
<option value="15"> 15</option>
<option value="16"> 16</option>
<option value="17"> 17</option>
<option value="18"> 18</option>
<option value="19"> 19</option>
<option value="20"> 20</option>
<option value="21"> 21</option>
<option value="22"> 22</option>
<option value="23"> 23</option>
<option value="24"> 24</option>
</select>
Daily Wattage:
<INPUT TYPE="text" NAME="dailyproduct" VALUE=""/>
<a href="javascript:void(0);" class="add_button" title="Add field"> Add Line</a>
</div>
</div>
<label>
Total:
<input id="total" />
</label>
相关文章:
- 计算输入中有多少逗号分隔的字符串
- 从表单中获取用户输入执行计算(操作顺序)并输出回该表单
- Javascript-如何使用bootstrap日期时间选择器自动计算两个时间输入之间的差异
- 计算输入值
- 如何从范围滑块动态值计算输入值
- 使用reactjs setState回调获取上一个输入值的计算值
- 在添加的输入字段中计算TOTAL
- 基于输入框的角度JS计算
- 计算输入的每个单词组合的百分比
- 对表单输入执行计算
- 当用户在文本框中输入日期时,如何计算一年的持续时间
- 使用 JavaScript 计算并添加表单输入的值
- 使用单选按钮的输入计算分数
- Javascript - 根据用户的表单输入计算用户的年龄
- 从用户输入计算日期
- 不使用eval()从表单输入计算数据
- 如何根据 3 个下拉列表中的输入计算值
- 通过文本字段输入计算余额和预付款
- JavaScript中的动态输入计算
- Javascript动态输入计算