计算动态添加输入中的值

Question

I'm trying to build a utility bill calculator that allows for the user to dynamically add additional lines.我正在尝试构建一个公用事业账单计算器，允许用户动态添加额外的行。 each line will have 3 fields: wattage, hours used per day, and the total of wattage*hours.每行将有 3 个字段：瓦特数、每天使用的小时数和瓦数*小时的总和。 everything works fine on the first line, but when I try to dynamically add additional lines, my code still works with the first product and gives me a NaN.第一行一切正常，但是当我尝试动态添加其他行时，我的代码仍然适用于第一个产品并给我一个 NaN。 ideally once they're done adding rows, I would sum the total kilowatt hours at the bottom.理想情况下，一旦他们完成添加行，我会在底部求和总千瓦时。 Pasted below is what I have so far:下面粘贴的是我到目前为止所拥有的：

<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>

I've searched on here all morning and haven't found anything that quite describes my issue.我整个上午都在这里搜索，但没有找到任何能完全描述我的问题的内容。 Thanks in advance.提前致谢。

Answer 1

I created a working example below.我在下面创建了一个工作示例。 As I stated in the comments, you are referencing fields by name, and that doesn't work when there are fields named the same on the page.正如我在评论中所述，您是按名称引用字段，当页面上存在名称相同的字段时，这不起作用。

To solve in a more modern way, you should use event delegation and determine which fields to update within the event.要以更现代的方式解决，您应该使用事件委托并确定要在事件中更新哪些字段。 In the example, I have written one event to handle the select and input changes, then I use jQuery's .closest() method to help me find the fields that need to be updated.在示例中，我编写了一个事件来处理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>

计算动态添加输入中的值

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-11-11 22:10:38

计算动态添加输入中的值

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-11-11 22:10:38

解决方案1
1 已采纳 2015-11-11 22:10:38