SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict anita_86's Avatar
    Join Date
    Aug 2010
    Location
    Nagpur, India
    Posts
    232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sum of array elements

    Hi again!!
    This is my code to add and delete dynamic rows and auto calculate the amount field by multiplying qty and rate.

    PHP Code:
    <form name="staff_reg" action="<?php echo $_SERVER['PHP_SELF']."?".$_SERVER['QUERY_STRING']; ?>" method="post" enctype="multipart/form-data">
    <table width="100%" border="0" cellspacing="0" cellpadding="2">
    <table border="0" cellpadding="1" cellspacing="0" class="normal-text" align="left">
    <tr align="center">
    <td width="10" class="forhead" style="white-space:nowrap;">&nbsp;</td>
    <td width="92" class="forhead" style="white-space:nowrap;">Qty</td>
    <td width="94" class="forhead" style="white-space:nowrap;">Rate</td>
    <td width="94" class="forhead" style="white-space:nowrap;">Amount</td>
    </tr>
    </table>

    <tr align="left">
    <td class="forhead" style="white-space:nowrap;"><input type="button" value="Add Row" onClick="addRow('dataTable')" >&nbsp;
    <input type="button" value="Delete Row" onclick="deleteRow('dataTable')" ></td>
    <table border="0" id="dataTable" cellpadding="1" cellspacing="0" class="normal-text">
    <tr>
    <td width="10" class="forhead" style="white-space:nowrap;"><input type="checkbox" name="chk[]"/></td>
    <td width="92" class="forhead" style="white-space:nowrap;">

    <input type="text"  name="qty[]"  style="width:80px;" onblur="">

    </td>
    <td width="94" class="forhead" style="white-space:nowrap;">

    <input type="text"  name="rate[]" style="width:80px;" value=""></td>

    <td width="94" class="forhead" style="white-space:nowrap;">

    <input type="text"  onblur="getValues('qty[]','rate[]','amt[]')" name="amt[]" style="width:80px;"></td>

    </tr>
    </table>
    <table border="0">
    <tr>
    <td>Total:</td>
    <td><input type="text"  name="total[]" style="width:80px;" value=""></td>
    </tr>

    <tr>
    <td colspan="2">
    <input name="Submit" type="submit" value="Save" style="text-decoration:none" />
    <input type="reset" value="Cancel" onclick="window.location.href='<?php echo $_SERVER['PHP_SELF'];?>'">
    </td>
    </tr>
    </form>
    <script type="text/javascript">

        function getValues(objName,objName2,objName3)
        {    
            var var3 = "";
            var arr = new Array();
            arr = document.getElementsByName(objName);
            arr2 = document.getElementsByName(objName2);
            arr3 = document.getElementsByName(objName3);
            for(var i = 0; i < arr.length; i++)
            {
                for(var i = 0; i < arr2.length; i++)
                {
                for(var i = 0; i < arr3.length; i++)
                {
                
                    var obj1 = document.getElementsByName(objName2).item(i);
                    var var2 = obj1.value;

                    var obj = document.getElementsByName(objName).item(i);
                    var var1 = obj.value;

                    var obj3 = document.getElementsByName(objName3).item(i);
                    var var3 = obj3.value;
                    var var4 = var1 * var2;
                    document.getElementsByName(objName3).item(i).value=var4;

                }        
                }
            }    
            
        }
        
      function addRow(tableID) {
         var table = document.getElementById(tableID);
         var rowCount = table.rows.length;
         var row = table.insertRow(rowCount);
         var colCount = table.rows[0].cells.length;
               for(var i=0; i<colCount; i++) {
                   var newcell = row.insertCell(i);
                    newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                    //alert(newcell.childNodes);
                    switch(newcell.childNodes[0].type) {
                        case "text":
                                newcell.childNodes[0].value = "";
                                break;
                        case "checkbox":
                                newcell.childNodes[0].checked = false;
                                break;
                        case "select-one":
                                newcell.childNodes[0].selectedIndex = 0;
                                break;
                    }
                }
            }
            
    function deleteRow(tableID)
    {
                try
                     {
                    var table = document.getElementById(tableID);
                    var rowCount = table.rows.length;

                        for(var i=0; i<rowCount; i++) 
                            {
                            var row = table.rows[i];
                            var chkbox = row.cells[0].childNodes[0];
                
                            if (null != chkbox && true == chkbox.checked) 
                                {
                                if (rowCount <= 1) 
                                    {
                                    alert("Cannot delete all the rows.");
                                    break;
                                    }
                    
                                table.deleteRow(i);
                                rowCount--;
                                i--;
                                }

                            }
                        } catch(e) 
                            {
                            alert(e);
                            }
    }

    </script>
    I would like to know that how can I show the value of all the elements in array "amount" in total field??
    It's easy once you know how...

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by anita_86 View Post
    I would like to know that how can I show the value of all the elements in array "amount" in total field??
    That's achieved by totalling up all the values in the array, and then updating the total field.

    Which parts of that do you require help with?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict anita_86's Avatar
    Join Date
    Aug 2010
    Location
    Nagpur, India
    Posts
    232
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So far I found this code on sitepoint forum:
    [QUOTE]<script type="text/javascript">
    function GrandTotal(elem){
    var sum=0;
    var cost = document.getElementsByName('amt[]');
    for(var i=0;i<cost.length;i++)
    {
    sum += parseFloat(cost[i].value);
    }
    document.getElementByName('total').value = sum;
    }

    </script> [QUOTE]

    And if I call it in this way:

    <input type="text" name="total" style="width:80px;" onblur="return GrandTotal(this)">
    Its not working for some unknown reasons
    It's easy once you know how...

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Location
    Bs. As. - Argentina
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have a question, creating objects with name "amt[]" does create a collection with objects named "amt[0]", "amt[1]", etc... or simply creates a collection of objects with name "amt[]" without indexes?

    Asumming the previous method works, i see that you in this line are pointing to the object "document.getElementByName('total').value = sum;" but you named "total[]".

    May be there is something to fix, by the way, which error gives you? that will explains many things.

    See you :coo:


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •