azzaxp azzaxp - 3 months ago 19
Javascript Question

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.

<SCRIPT language="javascript">
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);
}
}

</SCRIPT>


Here is the Body

<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>

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);                        
}