Click here to Skip to main content
14,636,013 members

Calculate total amount using javascript

shailendra verma asked:

Open original thread
  <script type="text/javascript">
        function FetchData(button) {

            var row = button.parentNode.parentNode;
            var label = GetChildControl(row, "quantity_1").value;
            var label1 = GetChildControl(row, "product_rate_1").value;
            var Multi = parseFloat(label) * parseFloat(label1);
            //var grandtotal = $(this).find('.grand').val();
            GetChildControl(row, "total_price_1").value = Multi;
           
            var tot = 0;
            for (var i = 0; i < Multi.length; i++) {
                if (parseInt(Multi[i].value))
                    tot += parseInt(Multi[i].value);
            }
            document.getElementById('grandTotal').value = tot;
            console.log(+tot)
        };

        function GetChildControl(element, id) {
            var child_elements = element.getElementsByTagName("*");
            for (var i = 0; i < child_elements.length; i++) {
                if (child_elements[i].id.indexOf(id) != -1) {
                    return child_elements[i];
                    console.log(+i)

                }
            }
        };
  </script>
<pre>       <table class="table" id="maintable">
                                <thead>
                                    <tr>
                                            <th class="text-center" width="20%">Item Information*</th> 
                                            <th class="text-center">Batch ID *</th>
                                             <th class="text-center">Expiry  date *</th>
                                            <th class="text-center">Stock/Qnt</th>
                                            <th class="text-center">Quantity *</th>
                                            <th class="text-center">Manufacturer  Price*</th>
                                            <th class="text-center">Total</th>
                                            <th class="text-center">Action</th>
                                        </tr>
                                </thead>
                                <tbody>
                                    <tr class="data-contact-person">
                                        <td>

                                          <input type="text" name="f-name" class="form-control f-name01" /></td>
                                                    
                                         <td>
                                          <input type="text" name="l-name" class="form-control l-name01" /></td>
                                                                                   
                                            <td>
                                              <input type="text" name="email"  class="form-control datepicker" /></td>
                                                                                 
                                       <td >

                                        <input type="text" name="stock" class="form-control stock01" /></td>
                                             
                                            <td>
                                               <input type="text" name="product_quantity" id="quantity_1"  onkeyup="FetchData(this),findTotal()"  placeholder="0.00" value="" min="0" class="form-control qty01" required="required"/></td>
                                                                                  
                                            <td >

                                             <input type="text" name="product_rate" onkeyup="FetchData(this),findTotal()"  id="product_rate_1" placeholder="0.00" value="" min="0"  class="form-control rate01" required="required"/></td>
                                             
                                            <td>
                                             <input type="text" name="total_price" id="total_price_1" value="0.00"  readonly="readonly" class="form-control total_price" /></td>
                                             
                                            <td>

                                               <button type="button" id="btnAdd"  onclick="FetchData(this),findTotal()" class="btn btn-xs btn-primary  classAdd">Add More</button>
                                              
                                            </td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="2">

                                       
                                           <%-- <input type="button" id="add_invoice_item" class="btn btn-info" name="add-invoice-item" onclick="addPurchaseOrderField1('addPurchaseItem');" value="Add New Item" tabindex="11">--%>

                                            <input type="hidden" name="baseUrl" class="baseUrl" value="">
                                        </td>
                                        <td style="text-align:right;" colspan="4">Grand Total:</td>
                                        <td class="text-right">
                                            <input type="text" id="grandTotal" class="text-right form-control" name="grand_total_price" value="0.00" readonly="readonly">
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>


What I have tried:

<script type="text/javascript">
       function findTotal() {
           var arr = document.getElementsByName('total_price');
           var tot = 0;
           for (var i = 0; i < arr.length; i++) {
               if (parseInt(arr[i].value))
                   tot += parseInt(arr[i].value);
           }
           document.getElementById('grandTotal').value = tot;
           console.log(+tot)
       }

   </script>


First Row getting Calculate grandtotal ,if i added the row dynamically
not calculating..
Tags: Javascript

Preview



When answering a question please:
  1. Read the question carefully.
  2. Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
  3. If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
  4. Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.
Let's work to help developers, not make them feel stupid.
Please note that all posts will be submitted under the The Code Project Open License (CPOL).




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100