Results 1 to 2 of 2

Thread: get total sum of different textbox using php and javascript

  1. #1
    Join Date
    Sep 2014

    get total sum of different textbox using php and javascript

    hi, is there anyone who can help me to solve my problem about getting the sum of my textboxes?

    i have 4 textbox in each row, what i want is to get the sum of the last column textboxes?

    here is my code:

    <input type="text" id="txtParticulars" name="txtParticulars" value="'.$Particular.'"><input type="text" id="txtQty'.$RSD_No.'" value ="'.$Quantity.'" readonly>
    <input type="text" id="txtUP" name="txtUP'.$RSD_No.'" /><input type="text" id="txtTotal'.$RSD_No.'" readonly>
    Total:<input type="text" id="txtGrandTotal" class="add" readonly />

    function calc(row)
    var in1=document.getElementById('txtQty'+row).value;
    var in2=document.getElementById('txtUP'+row).value;
    var in3=in1*in2;
    var total = document.getElementById('txtTotal'+row).value=in3.toFixed(2);

    here is my sample screenshot, thanks in advance

  2. #2
    Join Date
    Oct 2013
    Here's one way:

    Step 1: Add class="subTotal" to each row's txtTotal input tag, e.g.:
    <input type="text" id="txtTotal'.$RSD_No.'" class="subTotal" readonly>
    Step 2: Add this line to the end of your existing function:
    Step 3: Add this function in your JavaScript file, or between your <script> tags:
    function sum(){
     var	s = document.getElementsByClassName("subTotal"),
        	g = document.getElementById("txtGrandTotal").value;
     for(var i = 0; i < s.length; i++){
      var a = s[i].value,
          b = 1*a+1*g;
      g = b.toFixed(2);
      document.getElementById("txtGrandTotal").value = g;
    Caveat: this does not work in IE8-

    What's nice is that it doesn't matter if you have 1 row or 100, this will add the values all of the <input class="subTotal"> tags.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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