如何动态添加输入字段？

我有一个问题，现在，我可以计算静态html字段的总和。我想要计算每个新的动态文件的总和。照片显示第一行是静态的，并正确地计算总和。这是一个具体的部署示例其他字段是动态添加的，第一个字段是静态的。 http://postimg.org/image/ivjbblo1p/ 我的问题是，如何编写动态字段自动计算总和的代码？如何动态添加输入字段？

$(document).ready(function(){ 
    var counter = 0; 
    $('.fee').keyup(function(){ 
     //iterate through each textboxes and add keyup 
     //handler to trigger sum event 
     var tax = (parseFloat($('.quantity_1').val()) * (parseFloat($('.priceperunit_1').val())) * (0.20)); 
     var neto = (parseFloat($('.quantity_1').val()) * (parseFloat($('.priceperunit_1').val()))); 
     var total = tax + (parseFloat($('.quantity_1').val()) * (parseFloat($('.priceperunit_1').val()))); 
     // var total = (parseFloat($('.quantity_1').val()) * (parseFloat($('.priceperunit_1').val()))); 
     counter += 1;  

     $('.fee').each(function(){ 
      var item = parseFloat($(this).val()); 
      if (isNaN(item)) { item = 0; } 
      total = total;   
      tax = tax; 
      neto = neto; 
     }); 

     $('.tax_1').val(tax.toFixed(2)); 
     $('.neto_1').val(neto.toFixed(2)); 
     $('.rez').val('din' + total.toFixed(2)); 
     $('.total_1').val(total.toFixed(2)); 
    }); 
}); 

var counter = 1; 
$(function(){ 
    $('p#add_field').click(function() { 
     counter += 1; 

     $('.item_1').append('<input type="hidden" name="numItems" id="numItems1' + counter + '" value="' + counter + '"  />' + 
      '<div class="item item_total_' + counter + '"><input type="text" id="total_' + counter + '" class="total_' + counter + '" name="total_' + counter + '" value="<?php set_value("total_' + counter + '"); ?>"/>'+ 
      '<div class="item item_tax_' + counter + '"><input type="text" id="tax_' + counter + '" class="tax_' + counter + '" name="tax_' + counter + '" value="<?php set_value("tax_' + counter + '"); ?>"  />'+ 
      '<div class="item item_neto_' + counter + '"><input type="text" id="neto_' + counter + '" class="neto_' + counter + '" name="neto_' + counter + '" value="<?php set_value("neto_' + counter + '"); ?>"  />'+ 
      '<div class="item item_quantity_' + counter + '"><input type="text" id="quantity_' + counter + '" class="fee quantity_' + counter + '" name="quantity_' + counter + '" value="<?php set_value("quantity_' + counter + '"); ?>"/>'+ 
      '<div class="item item_priceperunit_' + counter + '"><input type="text" id="priceperunit_' + counter + '" class="fee priceperunit_' + counter + '" name="priceperunit_' + counter + '" value="<?php set_value("priceperunit_' + counter + '"); ?>"  />'+ 
      '<div class="item item_description_' + counter + '"><input type="text" id="description_' + counter + '" class="description_' + counter + '" name="description_' + counter + '" value="<?php set_value("description_' + counter + '"); ?>"/>'+ 
      '<div class="item item_unit_' + counter + '"><input type="text" id="unit_' + counter + '" class="unit_' + counter + '" name="unit_' + counter + '" value="<?php set_value("unit_' + counter + '"); ?>"  />' 
     );  
    }); 
});

HTML

<input type="hidden" name="numItems" id="numItems1" value="1" /> 
<div class="item item_1"> 
    <div class="item item_unit_1"> 
     <p>Unit</p> 
     <input type="text" id="unit_1" class="unit_1" name="unit_1" value="<?php set_value("unit_1"); ?>"/> 
     <?php echo form_error('unit_1'); ?> 
    </div> 
    <div class="item item_description_1"> 
     <p>Description</p> 
     <input type="text" id="description_1" class="description_1" name="description_1" value="<?php set_value("description_1"); ?>"/> 
     <?php echo form_error('description_1'); ?> 
    </div> 
    <div class="item item_priceperunit_1"> 
     <p>pricepernit</p> 
     <input type="text" id="priceperunit_1" class="fee priceperunit_1" name="priceperunit_1" value="<?php set_value("priceperunit_1"); ?>"/> 
     <?php echo form_error('priceperunit_1'); ?> 
    </div> 
    <div class="item item_quantity_1"> 
     <p>Quantity</p> 
     <input type="text" id="quantity_1" class="fee quantity_1" name="quantity_1" value="<?php set_value("quantity_1"); ?>"/> 
     <?php echo form_error('quantity_1'); ?> 
    </div> 
    <div class="item item_neto_1"> 
     <p>Neto</p> 
     <input type="text" id="neto_1" class="neto_1" name="neto_1" value="<?php set_value("neto_1"); ?>"/> 
     <?php echo form_error('neto_1'); ?> 
    </div> 
    <div class="item item_tax_1"> 
     <p>Tax</p`enter code here`> 
     <input type="text" id="tax_1" class="tax_1" name="tax_1" value="<?php set_value("tax_1"); ?>"/> 
     <?php echo form_error('tax_1'); ?> 
    </div> 
    <div class="item item_total_1"> 
     <p>Total</p> 
     <input type="text" id="total_1" class="total_1" name="total_1" value="<?php set_value("total_1"); ?>"/> 
     <?php echo form_error('tax_1'); ?> 
    </div> 
</div>

来源

2013-08-23 Vladimir Mrksic

请大家来正确地格式化代码的时间。 –

如果可能的话也创建一个小提琴:) –

我是新来的，这是我的第一篇文章。 –

我不完全相信你有，因为你还没有发布任何错误，并且提供的代码是不完整的问题是什么，但我认为下面的代码可能会帮助您简化您的功能。

您可以根据需要在此输入尽可能多的数据。您可以选择在要合计的输入字段上添加数据类型属性，并根据该属性进行选择。

HTML：

<form id="myForm"> 
    <input type="text" placeholder="enter number one" /> 
    <input type="text" placeholder="enter number two" /> 
    <div> 
     <label for="calculateSum">Sum is</label> 
     <span id="calculateSum">0</span> 
    </div> 
</form>

的JavaScript：

$(document).ready(function() { 
    $('#myForm').on('keyup', 'input', function() { 
     var iSum = 0; 
     $('#myForm input').each(function() { 
      iSum = iSum + parseFloat($(this).val()); 
     }); 
     $('#calculateSum').html(iSum); 
    }); 
});

的jsfiddle：http://jsfiddle.net/markwylde/gjz9h/

来源

2013-08-23 13:33:43 Mark

iSum = iSum + parseFloat（$（this）.val（）|| 0）;即使在其中一个框中没有任何内容，这将提供一个数字。 –

我在代码中没有错误，我想计算动态字段的数量。现在我只能计算静态字段 –

如何动态添加输入字段？

回答

相关问题