SitePoint Sponsor

User Tag List

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

    Auto Calculating Dynamic Feilds..

    Hi!!
    This is some of the code I am using to add dynamic rows when user clicks the Add Row button.I want to show the calculated amount like:
    line_total=qty*unit_price;
    sub_total=total of line_total;
    total=sub_total+tax-advance;

    PHP Code:
    <script type="text/javascript">
    function 
    addRow(tableID
    {
                var 
    table document.getElementById(tableID);
                var 
    rowCount table.rows.length;
                if(
    rowCount<3)
                    {
                    var 
    row table.insertRow(rowCount);
                    var 
    colCount table.rows[0].cells.length;
                    for(var 
    i=0i<colCounti++)
                              {
                            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;
                                }
                            }
                    }

            else 
            {
            
    alert("Maximum Limit Of 3 Rows Reached");
            }
    }
    function 
    deleteRow(tableID)
    {
                try
                     {
                    var 
    table document.getElementById(tableID);
                    var 
    rowCount table.rows.length;

                        for(var 
    i=0i<rowCounti++) 
                            {
                            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>
    <form name="newquotation1" method="post" action="invoice_data.php" onSubmit="return validateForm(this)">
    <tr>
    <td><input type="button" value="Add Row" onClick="addRow('dataTable')" ></td>
    <table align="center" id="dataTable" width="912">
    <tr>
    <td width="68">Quantity:</td>
    <td width="144"><input type="text" name="qty[]" id="qty"></td>
    <td width="77">Description:</td>
    <td width="144"><input type="text" name="description[]" id="description"></td>
    <td width="80">Unit Price:</td>
    <td width="144"><input type="text" name="unit_price[]" id="unit_price"></td>
    <td width="75">Line Total:</td>
    <td width="144"><input type="text" name="line_total[]" id="line_total" onBlur="return line(this)" readonly""></td>
    </tr>
    </table>
    <table align="center" width="913">
    <tr>
    <td width="67">Subtotal:</td>
    <td width="146"><input type="text" name="subtotal" id="subtotal" readonly""></td>
    <td width="75">Taxes:</td>
    <td width="144"><input type="text" name="tax" id="tax"></td>
    <td width="81">Advance:</td>
    <td width="144"><input type="text" name="advance" id="advance"></td>
    <td width="76">Total:</td>
    <td width="144"><input type="text" name="total" id="total" onBlur="return tot(this)" readonly""></td>
    </tr>
    </table>
    <table align="center">
    <tr>
    <td><input name="submit" type="submit" value="Submit"></td>
    </tr>
    </table>
    </form> 
    So far I came up with the function as follows.It works very well on the first row, but not on the other dynamically added rows.
    Similarly, I dont know how I can calculate the sub_total value by adding line_total feilds altogether.Please help me out
    PHP Code:
    <script type="text/javascript">
    function 
    line(elem) {
    var 
    a=document.getElementById("qty").value;
    var 
    qt=Number(a); 
    var 
    b=document.getElementById("unit_price").value;
    var 
    up=Number(b); 
    var 
    c=qt*up;
    document.getElementById("line_total").value c;
    }

    function 
    tot(elem) {
    var 
    d=document.getElementById("subtotal").value;
    var 
    st=Number(d); 
    var 
    e=document.getElementById("tax").value;
    var 
    tx=Number(e); 
    var 
    f=document.getElementById("advance").value;
    var 
    ad=Number(f); 
    var 
    g=(st+tx)-ad;
    document.getElementById("total").value g;
    }
    </script> 
    It's easy once you know how...

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Thread moved to JS forum
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •