CODEWITHSUNDEEP
javascript
azzaxp
azzaxp

Reputation: 717

Calculate the Price automatically in invoice

I am making an invoice system, I want to get the price textbox to be automatically calculated. I am having a table of random rows, in the invoice. How do I do it via a JS function on price text box.

var rowCount = 0;

function addRow(tableID) {

  var table = document.getElementById(tableID);

  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);

  var cell1 = row.insertCell(0);
  var element1 = document.createElement("input");
  element1.type = "checkbox";
  element1.name = "chk[]";
  cell1.appendChild(element1);

  var cell2 = row.insertCell(1);
  cell2.innerHTML = rowCount;

  var cell3 = row.insertCell(2);
  var element2 = document.createElement("input");
  element2.type = "text";
  element2.name = "item[]";
  element2.required = "required";
  cell3.appendChild(element2);

  var cell4 = row.insertCell(3);
  var element3 = document.createElement("input");
  element3.type = "text";
  element3.name = "qty[]";
  cell4.appendChild(element3);

  var cell5 = row.insertCell(4);
  var element4 = document.createElement("input");
  element4.type = "text";
  element4.name = "cost[]";
  cell5.appendChild(element4);

  var cell5 = row.insertCell(4);
  var element4 = document.createElement("input");
  element4.type = "text";
  element4.name = "price[]";
  cell5.appendChild(element4);



}

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) {
        table.deleteRow(i);
        rowCount--;
        i--;
      }


    }
  } catch (e) {
    alert(e);
  }
}
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<form action="" method="post" enctype="multipart/form-data">
  invoice:
  <INPUT type="text" name="invoice id" />

  <TABLE id="dataTable" width="350px" border="1" style="border-collapse:collapse;">
    <TR>
      <TH>Select</TH>
      <TH>Sr. No.</TH>
      <TH>Item</TH>
      <TH>Cost</TH>
      <TH>Qty</TH>
      <TH formula="cost*qty" summary="sum">Price</TH>
    </TR>
    <TR>
      <TD>
        <INPUT type="checkbox" name="chk[]" />
      </TD>
      <TD> 1 </TD>
      <TD>
        <INPUT type="text" name="item[] " /> </TD>
      <TD>
        <INPUT type="text" name="qty[]" /> </TD>
      <TD>
        <INPUT type="text" name="cost[]" /> </TD>
      <TD>
        <INPUT type="text" name="price[]" /> </TD>
    </TR>

  </TABLE>
  <input type="submit" />
</form>

Upvotes: 0

Views: 10651

Answers (5)

mplungjan
mplungjan

Reputation: 177685

Update anno 2022

const container = document.getElementById("container")
const table = document.querySelector("#dataTable tbody");
const totalField = document.getElementById("total");
const addRow = () => {
  const newRow = table.firstElementChild.cloneNode(true);
  newRow.querySelectorAll("input").forEach(inp => inp.type === "checkbox" ? inp.checked = false : inp.value = "")
  table.appendChild(newRow)
  newRow.querySelectorAll("td")[1].textContent = table.querySelectorAll("tr").length;
};
const removeRow = () => {
  table.querySelectorAll("[type=checkbox]:checked").forEach(chk => chk.closest("tr").remove())
  table.querySelectorAll("tr td:nth-child(2)").forEach((cell, i) => cell.textContent = i + 1);
  totalIt();
};

const totalIt = (e) => {
  if (e && e.target.matches("[type=checkbox]")) return;
  const qtyFields = [...document.getElementsByName("qty[]")];
  let total = qtyFields.map(qtyField => {
    const parent = qtyField.closest("tr");
    const qty = +qtyField.value;
    const cost = +parent.querySelector(".cost").value;
    const priceField = parent.querySelector(".price");
    let price = cost * qty;
    if (isNaN(price)) price = 0;
    priceField.value = price.toFixed(2);
    return price;
  }).reduce((a, b) => a + b)
  totalField.value = total ? total.toFixed(2) : "0.00";
};


container.addEventListener("click", function(e) {
  const tgt = e.target;
  if (!tgt.id) return;
  if (tgt.id === "add") addRow();
  else if (tgt.id === "remove") removeRow();
})
container.addEventListener("input", totalIt);
#dataTable {
  width: 350px;
  margin: 5px;
}

#dataTable tr,
td,
th {
  border: 1px solid black;
  border-collapse: collapse;
}
<div id="container">
  <input type="button" value="Add Row" id="add" />
  <input type="button" value="Delete checked Rows" id="remove" />
  <form action="" method="post" enctype="multipart/form-data">
    invoice:<input type="text" name="invoice id" />

    <table id="dataTable">
      <thead>
        <tr>
          <th>Select</th>
          <th>Sr. No.</th>
          <th>Item</th>
          <th>Qty</th>
          <th>Cost</th>
          <th formula="cost*qty" summary="sum">Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="checkbox" name="chk[]" /></td>
          <td>1</td>
          <td><input type="text" name="item[] " /></td>
          <td><input type="text" class="qty" name="qty[]" /></td>
          <td><input type="text" class="cost" name="cost[]" /></td>
          <td><input type="text" class="price" name="price[]" /></td>
        </tr>
      </tbody>
    </table>
    total: <input type="text" readonly="readonly" id="total" /><br />
    <input type="submit" />
  </form>

Old answer

DEMO

You had cost and QTY in the wrong cells according to the header cell!!!

 <TD> <INPUT type="text" id="qty1" name="qty[]"/> </TD>
 <TD> <INPUT type="text" id="cost1" name="cost[]" /> </TD>
 <TD> <INPUT type="text" id="price1" name="price[]" /> </TD>

New code:

function calc(idx) {
    
  var price = parseFloat(document.getElementById("cost"+idx).value)*
              parseFloat(document.getElementById("qty"+idx).value);
  //  alert(idx+":"+price);  
  document.getElementById("price"+idx).value= isNaN(price)?"0.00":price.toFixed(2)
}

window.onload=function() {
  document.getElementsByName("qty[]")[0].onkeyup=function() {calc(1)};
  document.getElementsByName("cost[]")[0].onkeyup=function() {calc(1)};
}

var rowCount =0;
function addRow(tableID) {
        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";
        element1.name = "chk[]";
        cell1.appendChild(element1);

        var cell2 = row.insertCell(1);
        cell2.innerHTML = rowCount;

        var cell3 = row.insertCell(2);
        var element3 = document.createElement("input");
        element3.type = "text";
        element3.name = "item[]";
        element3.required = "required";
        cell3.appendChild(element3);

        var cell4 = row.insertCell(3);
        var element4 = document.createElement("input");
        element4.type = "text";
        element4.name = "qty[]";
        element4.id = "qty"+rowCount;
        element4.onkeyup=function() {calc(rowCount);}
        cell4.appendChild(element4);

        var cell5 = row.insertCell(4);
        var element5 = document.createElement("input");
        element5.type = "text";
        element5.name = "cost[]";
        element5.id = "cost"+rowCount;
        element5.onkeyup=function() {calc(rowCount);}
        cell5.appendChild(element5);

        var cell6 = row.insertCell(5);
        var element6 = document.createElement("input");
        element6.type = "text";
        element6.name = "price[]";
        element6.id = "price"+rowCount
        cell6.appendChild(element6);



    }

    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) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }


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

Here is a total - you can actually replace calc with this if you cut and paste calc into where I do calc(i)

function totalIt() {
  var qtys = document.getElementsByName("qty[]");
  var total=0;
  for (var i=1;i<=qtys.length;i++) {
    calc(i);  
    var price = parseFloat(document.getElementById("price"+i).value);
    total += isNaN(price)?0:price;
  }
  document.getElementById("total").value=isNaN(total)?"0.00":total.toFixed(2);                        
}

Upvotes: 3

Masresha yayeh
Masresha yayeh

Reputation: 1

<script type="text/javascript">

    $(function(){


        //add new row 
        $('.add').click(function(){




                    var tr = '<tr>'+
                           '<td><input type="text" name="product_name[]" class="form-control product_name"></td>'+
                           '<td><input type="text" name="quantity[]" class="form-control quantity"></td>'+
                           '<td><input type="text" name="price[]" class="form-control price"></td>'+
                           '<td><input type="text" name="amount[]" class="form-control amount"></td>'+
                           '<td><input type="button"  class="btn btn-danger remove" value="Remove"></td>'+
                      '</tr>';
          $('.details').append(tr);
        });
        // end 



        // total amount 
        $('.details').delegate('.quantity,.price','keyup',function(){
            var tr = $(this).parent().parent();
            var price = tr.find('.price').val();
            var qty   = tr.find('.quantity').val();
            var amount = price * qty;
            tr.find('.amount').val(amount);
            total();
        });

        // end 


        // delete row 
        $('.details').delegate('.remove','click',function(){
                var con = confirm("Do you want to remove it ?");
                if(con)
                {
                    $(this).parent().parent().remove();
                    total();
                }

        });
        // end 



        //get pay
        $('.pay').change(function(){
            var subtotal = $('.subtotal').val()-0;
            var get      = $(this).val()-0;
            $('.return').val(get - subtotal);
        });
        // end 
    });
</script>



          <script type="text/javascript">

             // for updating the tax while writing the price .

               function changeTax(){

                  var price = document.getElementById("price").value;
                  var q = document.getElementById("quantity").value;

                  var np = Number(price);

                 var tax =  (0.15 * np)*q;



                  <!-- how to diferenciate  concatinate anad plus sign-->
                    document.getElementById("amount").value = q * np;

                  var amount = document.getElementById("amount").value;
                  document.getElementById("tax").value = tax;
                  document.getElementById("subtotal").value = Number(tax) + Number(amount);
               }
          </script>
                     <script>
    $(function() {

     });
     </script>

Upvotes: -1

diewie
diewie

Reputation: 764

Just bind the calculation to, for example, a key event. You should create the first invoice row also via JS.

function addRow(tableID) {

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "checkbox";
    element1.name = "chk[]";
    cell1.appendChild(element1);

    var cell2 = row.insertCell(1);
    cell2.innerHTML = rowCount;

    var cell3 = row.insertCell(2);
    var element2 = document.createElement("input");
    element2.type = "text";
    element2.name = "item[]";
    element2.required = "required";
    cell3.appendChild(element2);

    var cell4 = row.insertCell(3);
    var element3 = document.createElement("input");
    element3.type = "text";
    element3.name = "qty[]";
    cell4.appendChild(element3);

    var cell5 = row.insertCell(4);
    var element4 = document.createElement("input");
    element4.type = "text";
    element4.name = "cost[]";
    cell5.appendChild(element4);

    var cell5 = row.insertCell(5);
    var element5 = document.createElement("input");
    element5.type = "text";
    element5.name = "price[]";
    cell5.appendChild(element5);

    var calcPrice = function() {
        try {
            element5.value = element3.value * element4.value;
        } catch(e) {

        }
    }

    element3.onkeyup = calcPrice;
    element4.onkeyup = calcPrice;
}

Upvotes: 1

yannisgu
yannisgu

Reputation: 493

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

        <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
    <form action="" method="post" enctype="multipart/form-data">
    invoice:<INPUT type="text" name="invoice id"/>

        <TABLE id="dataTable" width="350px" border="1" style="border-collapse:collapse;">
    <TR>
    <TH>Select</TH>
    <TH>Sr. No.</TH>
    <TH>Item</TH>
    <TH>Cost</TH>
    <TH>Qty</TH>
    <TH formula="cost*qty"summary="sum">Price</TH>
    </TR>

        </TABLE>
    <input type="submit" />

And script:

 <SCRIPT language="javascript">
 var rowCount =0;
function calculatePrice(qtyElement, costElement, priceElement) {
        priceElement.value = qtyElement.value * costElement.value;
}

function addRow(tableID) {

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "checkbox";
    element1.name = "chk[]";
    cell1.appendChild(element1);

    var cell2 = row.insertCell(1);
    cell2.innerHTML = rowCount;

    var cell3 = row.insertCell(2);
    var element2 = document.createElement("input");
    element2.type = "text";
    element2.name = "item[]";
    element2.required = "required";
    cell3.appendChild(element2);

    var cell4 = row.insertCell(3);
    var element3 = document.createElement("input");
    element3.type = "text";
    element3.name = "qty[]";
    element3.onchange = function(){
         calculatePrice(this, this.parentElement.parentElement.childNodes[4].childNodes[0], this.parentElement.parentElement.childNodes[5].childNodes[0]);
    };
    cell4.appendChild(element3);

    var cell5 = row.insertCell(4);
    var element4 = document.createElement("input");
    element4.type = "text";
    element4.name = "cost[]";
    element4.onchange = function(){
            calculatePrice(this.parentElement.parentElement.childNodes[3].childNodes[0], this, this.parentElement.parentElement.childNodes[5].childNodes[0]);
    };
    cell5.appendChild(element4);

    var cell6 = row.insertCell(5);
    var element5 = document.createElement("input");
    element5.type = "text";
    element5.name = "price[]";
    cell6.appendChild(element5);



}

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) {
            table.deleteRow(i);
            rowCount--;
            i--;
        }


    }
    }catch(e) {
        alert(e);
    }
}
addRow('dataTable');
</SCRIPT>

Upvotes: 1

danielrozo
danielrozo

Reputation: 1442

You may implement the calculations inside a function that is called when the onchange event is fired in some of the input fields (the last of a row or the first of the next row calculates the previuos row price).

Upvotes: -1

Related Questions