Sum of table's column input

Question

I've a table as given below:

       <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<table class="productList" width="600">
    <tr>
        <th colspan="9" align="left"> Select your product list</th>
    </tr>
    <tr class="head">
        <td width="25" align="right"></td>
        <td width="270" align="center">Product Name</td>
        <td width="80" align="center">Quantity</td>
        <td width="80" align="center">Unit Price</td>
        <td width="80" align="center">Line Total</td>
    </tr>
    <tr>
        <td align="center"><label class="arow" data-icon="&#x45;"></label></td>
        <td><select name="productname" class="datagridInput" disabled required>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select></td>
        <td><input name="quantity" type="text" class="datagridInput" ></td>
        <td><input name="purchase_price"type="text" class="datagridInput"></td>
        <td><input name="linetotal"  type="text" class="datagridInput" readonly></td>
    </tr>
    <tr>
        <td align="center"><label class="arow" data-icon="&#x45;"></label></td>
        <td><select name="productname" class="datagridInput" disabled required>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select></td>
        <td><input name="quantity" type="text" class="datagridInput" ></td>
        <td><input name="purchase_price"type="text" class="datagridInput"></td>
        <td><input name="linetotal"  type="text" class="datagridInput" readonly></td>
    </tr>
    <tr>
        <td align="center"><label class="arow" data-icon="&#x45;"></label></td>
        <td><select name="productname" class="datagridInput" disabled required>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select></td>
        <td><input name="quantity" type="text" class="datagridInput" ></td>
        <td><input name="purchase_price"type="text" class="datagridInput"></td>
        <td><input name="linetotal"  type="text" class="datagridInput" readonly></td>
    </tr>
    <tr>
        <td align="center"><label class="arow" data-icon="&#x45;"></label></td>
        <td><select name="productname" class="datagridInput" disabled required>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select></td>
        <td><input name="quantity" type="text" class="datagridInput" ></td>
        <td><input name="purchase_price"type="text" class="datagridInput"></td>
        <td><input name="linetotal"  type="text" class="datagridInput" readonly></td>
    </tr>
    <tr>
        <td align="center"><label class="arow" data-icon="&#x45;"></label></td>
        <td><select name="productname" class="datagridInput" disabled required>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select></td>
        <td><input name="quantity" type="text" class="datagridInput" ></td>
        <td><input name="purchase_price"type="text" class="datagridInput"></td>
        <td><input name="linetotal"  type="text" class="datagridInput" readonly></td>
    </tr>
</table>
<label for="net_ammount">Net Ammount:</label>
<input type="text" name="net_ammount" class="summary" disabled>
</body>
</html>

Please help me to find sum of each "Line Total" column input value and show in "Net Amount" input element. every input has same id actually I found them with it's row and column index value..........

data are coming from the server. when user change the product code all field get enable and when user select product total line value showing in "Total Line" column. Please check at http://www.lpgbookkeeping.in/

username: blueflame2014 password: Blueflame@2014

I want when user select product code in datagrid . Sum of all "Line Total" show in Net Amount.

Please somebody help me........

Here is jsfiddle demo of my table

ID can never be same ,Id is unique,classes can be same (multiple) in HTML — Pratik Joshi, Mar 07 '14 at 04:56
@Neha actually i want to sum of "Line Total" column value in Net Ammount Input element. — Satendra Mishra, Mar 07 '14 at 04:58
@PratikJoshi thanks for telling me my mistake. I'had coded the input values by their row index — Satendra Mishra, Mar 07 '14 at 05:01

score 0 · Answer 1 · answered Mar 07 '14 at 05:03

0

ID can never be same ,Id is unique,classes can be same (multiple) in HTML I by mistake put it in comment instead of answer box :)

answered Mar 07 '14 at 05:03

Pratik Joshi

11,485
7
41
73

Ok I will correct my mistake, but it does not solve the problem. – Satendra Mishra Mar 07 '14 at 05:05
Then Edit the Question,Make unique ID so I can solve problem – Pratik Joshi Mar 07 '14 at 05:11
Okay question has been edited..... – Satendra Mishra Mar 07 '14 at 05:15

score 0 · Answer 2 · answered Mar 07 '14 at 05:14

0

Assuming you make the id of your "Net Amount" input element, "summary_net_amount", the answer is something like this:

function calculateLineTotals(){
    var $linetotals = $("input[name=\"linetotal\"]");
    var sum = 0;
    $linetotals.each(function() {
        sum += parseInt($(this).val());
    });
    $("#summary_net_amount").val(sum);
}

answered Mar 07 '14 at 05:14

user3352495

374
3
11

I have already tried this type logic in my script but this is not work. you can see my actual page in http://www.lpgbookkeeping.in/ userid: blueflame2014 pwd: Blueflame@2014 – Satendra Mishra Mar 07 '14 at 05:18
How do I get to the table view? – user3352495 Mar 07 '14 at 05:24
please visit my site lpgbookkeeping.in www.lpgbookkeeping.in after login go to new purchase order entry sub menu under the supplier menu – Satendra Mishra Mar 07 '14 at 05:28
What kind of error/problem are you getting when you do this? – user3352495 Mar 07 '14 at 05:34
Assuming you have understood my problem. Actually I want whn user change product code in datagrid every time related line total value compute in net ammount value. – Satendra Mishra Mar 07 '14 at 05:37
Which page is this on Your web site.? – Pratik Joshi Mar 07 '14 at 05:43
@PratikJoshi after login go to new purchase order entry sub menu under the supplier menu – Satendra Mishra Mar 07 '14 at 05:50

score 0 · Accepted Answer · answered Mar 07 '14 at 05:17

0

As you donot have any content on linetotal input so this may give NAN, but this method u have to write and call it on button click or any other event where u wana update the textbox.

function getTotal() {
  var linetotal =0;    
  var line = document.forms[0].elements["linetotal"];

  for (var i = 0, len = line.length; i < len; i++) {  
       linetotal = linetotal  + parseInt(line[i].value) ;
  }
 document.getElementById("summary").value  = linetotal;
}

answered Mar 07 '14 at 05:17

Neha

1,548
2
10
13

I've edited my question and put the some more information about my question. Please read and visit my website to know my problem – Satendra Mishra Mar 07 '14 at 05:22
@SatendraMishra After login where i should go to see your jsfiddle page? – Neha Mar 07 '14 at 05:25
No not jsfiddle page, you should go to www.lpgbookkeeping.in after login go to new purchase order entry sub menu under the supplier menu – Satendra Mishra Mar 07 '14 at 05:27
@SatendraMishra at this method -- $('#productList tr td input[name="linetotal"]').on('change', function(){ var net_value =0; $('#productList tr td input[name="linetotal"]').each(function() { net_value+= +($(this).val()); donot u think this.val() u need to parse with Rs symbol. – Neha Mar 07 '14 at 05:34
did u print these values .. and also u need to set .netamount value after for each loop . – Neha Mar 07 '14 at 05:37
@Neha: "document.forms[0].elements" There are no such type of methods available. – Ishan Jain Mar 07 '14 at 05:39
Actually i was used this script for only testing purpose. actual script is $(document).ready(function(){ $('#productList tr td input[name="linetotal"]').on('change', function(){ var net_value =0; $('#productList tr td input[name="linetotal"]').each(function() { net_value+= +($(this).val().replace( /[^0-9\.]/g, '' )); $('input[name="net_ammount"]').val(net_value); }) }) }) – Satendra Mishra Mar 07 '14 at 05:41
@IshanJain there is elements[] and its not methods its array of all elements in the form. please check http://www.w3schools.com/js/js_htmldom_elements.asp – Neha Mar 07 '14 at 05:43
@SatendraMishra do u able to print on console or alert those values ? andother thing $("input[name="net_amount").. line should be out of each function. – Neha Mar 07 '14 at 05:44
@Neha this is jquery script. I was used the logic when linetotal input value changed the loop is started and compute every value. but it seems when data comes from the server .change() method does not work. – Satendra Mishra Mar 07 '14 at 05:48
@Neha: try this one - http://jsfiddle.net/TrGgq/2/ – Ishan Jain Mar 07 '14 at 05:50
@IshanJain I am not sure how this help? please let me know what u wana point out. – Neha Mar 07 '14 at 05:52
@SatendraMishra why not call this script when server update the input box (when u know server value come..)rather onchange as i notice sometime on change server not update value quickly enough. – Neha Mar 07 '14 at 05:53
@Neha: nono there is no special reason to post this, it's only what i am implement... :) – Ishan Jain Mar 07 '14 at 05:56
@Neha may be, but i dont know about any jquery method which is triggerd when input is updated. did you know ? – Satendra Mishra Mar 07 '14 at 05:56
@Ishan Jain Your effort is praiseworthy. but I can not use it. I want when product is changed value autometically added in net ammount – Satendra Mishra Mar 07 '14 at 05:59
I think this will work - $('input[name=myInput]').change(function() { ... }); but try it out .. meanwhile i will try on fiddle. – Neha Mar 07 '14 at 06:00
may be this will helpful for you - http://stackoverflow.com/questions/1948332/detect-all-changes-to-a-input-type-text-immediately-using-jquery OR http://stackoverflow.com/questions/1072159/detecting-change-in-a-text-input-box-using-jquery-javascript – Ishan Jain Mar 07 '14 at 06:02
$Neha this script i have already tried but it is not work. OnChange event fires when text box loses focus and the value within the text box has changed. but in case value has changed but focus does not loss. because line total does not get any focus before he change. data comes from the server. – Satendra Mishra Mar 07 '14 at 06:13
hmm i also notice its while trying.. but u know line where server setting input values so after that why not call the method to calc netamount. – Neha Mar 07 '14 at 06:19
@Neha I was tried on when product changed but .chenge() event triggered before value comes from server. I am very upset, about this strange challenge. do you know someone who could solve it? – Satendra Mishra Mar 07 '14 at 06:26
ok hows ur server data coming by ajax ?? if ajax then at success call method suppose - calculatet(); which is like function calculate () { var net_value =0; $('#productList tr td input[name="linetotal"]').each(function() { net_value+= +($(this).val().replace( /[^0-9\.]/g, '' )); $('input[name="net_ammount"]').val(net_value); }) }) } – Neha Mar 07 '14 at 06:30
@Neha if you dont mind can we chat in google chat or another places where you can ? – Satendra Mishra Mar 07 '14 at 06:36
My complete ajax code can not pasted in comment box this is large – Satendra Mishra Mar 07 '14 at 06:37
join this - http://chat.stackoverflow.com/rooms/49208/sum-of-total – Neha Mar 07 '14 at 06:40
I'm confused where can i type my reply in chat room ? – Satendra Mishra Mar 07 '14 at 06:44
give ur gmail id i will ping u. – Neha Mar 07 '14 at 06:50
engineersatendra@gmail.com – Satendra Mishra Mar 07 '14 at 06:51

Sum of table's column input

3 Answers3