calculating values in dynamically added inputs

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




    
";
echo "";
echo "
";
$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";


?>










    Wattage: 
    
     Hours Per Day Used: 
    
    Daily Wattage: 
    
    
     Add Line

I've searched on here all morning and haven't found anything that quite describes my issue. Thanks in advance.

Dave · Accepted Answer

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.

$(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 = 'Wattage:  Hours Per Day Used:  Daily Wattage:  Remove Line'; //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);
}




  
    Wattage: 
    
    Hours Per Day Used: 
    
    Daily Wattage: 
    
     Add Line
  



  Total:

calculating values in dynamically added inputs

Answers (1)

Related Questions