get the value of multiple element created by jquery

Question

I have table in which i can add more rows. There are some input fields in each row. I want to calculate the value and show it. Also update the total amount at the bottom row.

Here is my html code:

<table style="background-color:#ccffcc;width:50%; float:left;" id="d">
    <tr>
        <th colspan="6" style="border-bottom:1px solid #AAAAAA;">Debits</th
    </tr>
    <tr>
        <th>User</th>
        <th>Account</th>
        <th>Item</th>
        <th>Unit Price</th>
        <th>Quantity</th>
        <th>Amount</th>
    </tr>
    <tr id="student_entry1">
        <td>
            <input type="hidden" name="totaldr[]" id="totaldr" value="<?php echo count($account);?>">
            <select name="customer" class="form-control" required style="width: 100px;">
            <option value=""><?php echo get_phrase('select_customer');?></option>
            <?php 
            $customers = $this->db->get_where('customer')->result_array();
            foreach ($customers as $row):
            ?>
            <option value="<?php echo $row['componentId'];?>"><?php echo $row['name'];?></option>
            <?php endforeach;?>
            </select>
        </td>
        <td>
            <select name="account" class="form-control" required style="width: 100px;">
            <option value=""><?php echo get_phrase('select_account');?></option>
            <?php 
            $categories = $this->db->get_where('account')->result_array();
            foreach ($categories as $row):
            ?>
            <option value="<?php echo $row['componentId'];?>"><?php echo $row['description'];?></option>
            <?php endforeach;?>
            </select>
        </td>
        <td>
            <select id="item_selector_holder" name="item[]" class="form-control" style="width: 100px; margin-left: 0px;">
            <option value=""><?php echo get_phrase('select_item');?></option>
            <?php 
            $categories = $this->db->get('item')->result_array();
            foreach ($categories as $row):
            ?>      
            <option value="<?php echo $row['componentId'];?>"><?php echo $row['itemName'];?></option>
            <?php endforeach;?>
            </select>
        </td>
        <td>
            <input type="text" name="unitpriced[]" class="unitPriced"style="width: 70px;" data-validate="required" data-message-required="<?php echo get_phrase('value_required');?>"/>
        </td>
        <td>
            <input type="text" name="quantityd[]" style="width: 50px;" onchange="calcSum1();" class="quantityd"  data-validate="required" data-message-required="<?php echo get_phrase('value_required');?>"/>
        </td>
        <td>
            <input type="text" name="amount[]" style="width: 60px;" readonly>           
            <input onclick="deleteParentElement(this);" type="button" style="width: 3px; text-align: left; font-weight: bold;font-size: large;" value="-"/>                     
        </td>
    </tr>
    <tr>
        <th><input type="button" onclick="append_debit_table_row();" style="padding: 3px 8px;font-weight: bold;font-size: large;" value=" + "/>
        </th>
        <th colspan="3">Total</th>
        <th id="total">0.00</th>
    </tr>
</table>

Here is my script

function calcSum1(){
    var sum = 0.0;
    var unitprice = [];
    var quantity = [];
    var amount = [];

    $(".quantityd").each(function(){            
        quantity = $(this).val();
        $(".unitPriced").each(function(){
            unitprice = $(this).val();
            sum = quantity * unitprice;
        });
        $('input[name=amount]').val(sum);    
    });
}

Don't forget to parseInt or parseFloat your vals, because they are string — asdf_enel_hak
– asdf_enel_hak, Commented Dec 12, 2016 at 8:24

Milind Anantwar · Accepted Answer · 2016-12-12 08:27:48Z

1

You need to target the unit textbox and total textbox from current row while calculating total amount for that row and setting the total value.

I would suggest you to rather iterate over rows and set total for each row accordingly. something like this:

 $("#d tr").each(function(){            
       var $this = $(this);
       quantity = parseInt($this.find('.quantityd').val(),10);
       unitprice = parseFloat($this.find('.unitPriced').val(),10);
       $this.find('[name="amount[]"]').val(quantity * unitprice );
 });

answered Dec 12, 2016 at 8:27

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nishan Singha Over a year ago

It works. i also want to sum the amount show it as total. can u help?

Milind Anantwar Over a year ago

@NishanSingha:

var sum = 0; $('[name="amount[]"]').each(function() { 	if(!isNaN(this.value) && this.value.length!=0) { 		sum += parseFloat(this.value); 	} });

Collectives™ on Stack Overflow

get the value of multiple element created by jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related