Member Avatar for pietpiraat

Hi everyone,

i'm having a hard time achieving this:

i have a table inside a form, with input fields ( price, qty, desc, total ( to be updated ), this works as it should with the following javascript:

<script type="text/javascript"><!--
function updatesum() {
document.forms['hours'].elements['onktotal[]'].value = (document.forms['hours'].elements['onkqty[]'].value.replace(",", ".") -0) * (document.forms['hours'].elements['onkprice[]'].value.replace(",", ".") -0);
}
//-->
</script>

now the problem occurs when i put more rows there then the javascript function does not work anymore, my ultimate goal is to create a function to add tablerows with javascript, but i'm trying to create the update function with a static situation first.

any help is greatly appreciated

  • 2 Contributors
  • 2 Replies
  • 1K Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by pietpiraat

Recommended Answers

All 2 Replies

Member Avatar for Taywin

I think it depends on how you add table rows. I am not sure why you need 'input' tag inside the form for? You are preparing to add new table row with each submission of values in input tags? Anyway, a sample code dynamically add table row with adding sum is below. You may need to adjust it because I do not use DOM access here. You could, however, convert it to use DOM instead.

<html>
<head>
<script type="text/javascript">
  function updateSum(formID, qtyID, priceID) {
    var f = document.getElementById(formID)
    var qty = document.getElementById(qtyID)
    var price = document.getElementById(priceID)
    if (f && qty && price) {
      var tab = f.getElementsByTagName("table")[0]  // expect a table
      var row = tab.insertRow(tab.rows.length - 1)
      var qtyVal = parseFloat(qty.value)
      var priceVal = parseFloat(price.value)
      if (!qtyVal) { qtyVal = 0 }
      if (!priceVal) { priceVal = 0 }
      qtyVal = parseInt(Math.round(qtyVal*100),10)/100      // force 2 decimal
      priceVal = parseInt(Math.round(priceVal*100),10)/100  // force 2 decimal
      var totVal = qtyVal * priceVal
      totVal = parseInt(Math.round(totVal*100),10)/100      // force 2 decimal
      // quality cell
      var qtyCell = row.insertCell(0)
      qtyCell.style.border = "1px solid gray"
      qtyCell.style.textAlign = "center"
      var qtyTxtNode = document.createTextNode(qtyVal+"")
      qtyCell.appendChild(qtyTxtNode)
      // price cell
      var priceCell = row.insertCell(1)
      priceCell.style.border = "1px solid gray"
      priceCell.style.textAlign = "right"
      var priceTxtNode = document.createTextNode(priceVal+"")
      priceCell.appendChild(priceTxtNode)
      // total cell
      var totCell = row.insertCell(2)
      totCell.style.border = "1px solid gray"
      totCell.style.textAlign = "right"
      var totTxtNode = document.createTextNode(totVal+"")
      totCell.appendChild(totTxtNode)
      // add to grand total
      var sum = parseFloat(tab.rows[tab.rows.length-1].cells[2].innerHTML)
      tab.rows[tab.rows.length-1].cells[2].innerHTML = sum+totVal
    }
  }
</script>
</head>

<body>
<form id="hours">
  Quantity: <input type="text" id="onkqty">
  <br />
  Price: <input type="text" id="onkprice">
  <br />
  <input type="button" value="Add" onclick="updateSum('hours', 'onkqty', 'onkprice')">
  <br /><br />
  <table style="width:80%;empty-cells:show;border-collapse:collapse">
  <tr>
    <th style="border:1px solid gray">Quantity</th>
    <th style="border:1px solid gray">Price</th>
    <th style="border:1px solid gray">Total</th>
  </tr><tr>
    <td></td>
    <td style="text-align:right;font-weight:bold">Grand Total&nbsp;</td>
    <td name="allTotal" style="text-align:right;border:1px solid gray">0</td>
  </tr>
  </table>
</form>
</body>
</html>
Member Avatar for pietpiraat

Wauw thanks alot, i'll try this out. Your help is very welcome

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.