Member Avatar for zeplin

Hello,

I have grabbed this html code off the internet. It looks like it will work for what i am looking for except it does not add a grand total.

The inputs multiply numbers without having to click a button. I wanted the grantotal to add up the inputs without having to click a button also.

Thanks for anyone who can help. :)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
.itemcount {
    width: 50px;
    background-color: #ABB6C9;
}
.price {
    width: 35px;
    background-color: #FFFF66;
}
.totalprice {
    width: 65px;    
    background-color: #FB99AC;
}
.grandtotal {
    width: 100px;
    background-color: #CCCCCC;
}
input {
    height: 18px;
    margin-bottom: 2px;
}
-->
</style>

<script type="text/javascript">
window.onload = function()
{
    var inputs = document.getElementsByTagName('input');
    for(var i = 0; i < inputs.length; i++)
    {
        if(/^item\d+$/i.test(inputs[i].id))
        {
            inputs[i].onkeyup = function()
            {
                var multiply = document.getElementById(this.id + 'multiply');
                multiply = multiply.value ? multiply.value : multiply.firstChild.nodeValue;
                document.getElementById(this.id + 'total').value = Math.max(0, parseInt(this.value)) * Math.max(0, parseInt(multiply));
            }
        }
        else if(/^item\d+multiply$/i.test(inputs[i].id))
        {
            inputs[i].onkeyup = function()
            {
                var count = document.getElementById(this.id.replace('multiply', '')).value
                document.getElementById(this.id.replace('multiply', 'total')).value = Math.max(0, parseInt(this.value)) * Math.max(0, parseInt(count));
            }
        }
    }
}



</script>


</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <label>Item 1</label>
  <input type="text" name="item1" id="item1" class="itemcount" /> x <span id="item1multiply">5</span> = <input type="text" name="item1total" id="item1total" class="totalprice" />

  <br />
  <label>Item 2</label>
    <input type="text" name="item2" id="item2" class="itemcount" /> x <span id="item2multiply">2</span> = <input type="text" name="item2total" id="item2total" class="totalprice"/>
  <br />
  <label>Item 3</label>
    <input type="text" name="item3" id="item3" class="itemcount" /> x <input type="text" name="item3multiply" id="item3multiply" class="price" /> = <input type="text" name="item3total" id="item3total" class="totalprice"/>

  <br />
  <label>Item 4</label>
    <input type="text" name="item4" id="item4" class="itemcount" /> x <input type="text" name="item4multiply" id="item4multiply" class="price" /> = <input type="text" name="item4total" id="item4total" class="totalprice"/>
  <br /><br />
   <label><strong>Grand Total:</strong> $
     <input type="text" name="grandtotal" id="grandtotal" class="grandtotal" />

  </label><br />

</form>
</body>
</html>
Edited by Reverend Jim because: Fixed formatting
  • 2 Contributors
  • 3 Replies
  • 117 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by parry_kulk
Member Avatar for parry_kulk

In the code
inputs.onkeyup = function()
{
.................
}

you assign a function for that handles keyup event. It does the multiplication there. You can add your logic to calculate the grand total there.

Member Avatar for zeplin

I am sorry. I am pretty new to java script. How do I create the function to add all total inputs and place in grandtotal input? :)

Member Avatar for parry_kulk

You already have the function assigned to onkeyup events at two locations in the code above as

...
inputs[i].onkeyup = function()
{
var multiply = document.getElementById(this.id + 'multiply');
multiply = multiply.value ? multiply.value : multiply.firstChild.nodeValue;
document.getElementById(this.id + 'total').value = Math.max(0, parseInt(this.value)) * Math.max(0, parseInt(multiply));
}
...

Now you have to place the logic in this code. I am giving you a sample code to elaborate the concept. You will have to to modify it to be error free and handling NaN scenarios.

inputs[i].onkeyup = function()
{
//get the value of the grandtotal textbox. If it is empty make the value 0
var grandtotal = document.getElementById('grandtotal').value=='' ? 0 : document.getElementById('grandtotal').value;
//get the current value in the total column
var currtotal = document.getElementById(this.id + 'total').value=='' ? 0 :  document.getElementById(this.id + 'total').value;

//existing logic for multiplication
var multiply = document.getElementById(this.id + 'multiply');
multiply = multiply.value ? multiply.value : multiply.firstChild.nodeValue;
document.getElementById(this.id + 'total').value = Math.max(0, parseInt(this.value)) * Math.max(0, parseInt(multiply));

//now calculate the new grandtotal and set it to the textbox. Here we take the existing grandtotal, substract the old total from it and add the new total
document.getElementById('grandtotal').value = parseInt(grandtotal) - parseInt(currtotal) + parseInt(document.getElementById(this.id + 'total').value)
}

Similarly handle for the other onkeyup event

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.