计算使用AJAX生成的输入类型的总和

Question

I have these input fields with same id, name. These inputs are generated using the ajax code as per the user choices. I want to do the sum of theses input fields(p_amount) in total_amount field using jquery.

<input type="text" id="p_amount" name="p_amount[]" placeholder="Enter Amount ">
<input type="text" id="p_amount" name="p_amount[]" placeholder="Enter Amount ">

<input type="text" id="p_amount" name="p_amount[]" placeholder="Enter Amount ">
<input type="text" id="p_amount" name="p_amount[]" placeholder="Enter Amount ">
<input type="text" id="p_amount" name="p_amount[]" placeholder="Enter Amount ">

<input type="text" id="total_amount" name="total_amount"  value="" placeholder="Total Amount">

I am using following js code but it only return the sum of digits entered in first text field. and i want sum of all the id's with p_amount. Please help me here.

<script type="text/javascript">
$('#total_amount').click(function() {
    var p_amount=$("#p_amount").val();
    var total = 0;
    for (var i = 0; i < p_amount.length; i++) {
        total += p_amount[i] << 0;
    }
</script>

Answer 1

The problem is that the id s of the fields you use must be distinct. You should use class attributes for annotating multiple elements.

Then you can get these with JQuery and iterate through them with .each().

You can find more information and examples here: JQuery .each()

Answer 2

Try this,

var total=0;
$('#total_amount').click(function() {
    $("input[name='p_amount[]'").each(function(){
        total+=parseInt($(this).val());
    });
});
alert(total);