Member Avatar for abim usman 
    <html>

    <body>
    <form action="#" method="post">
            Addition 1:

        <input type="text" id="add1" name="add1" onkeyup="AutoCalc(this)" />      
        Subtraction 1:
        <input type="text" id="sub1" name="sub1" onkeyup="AutoCalc(this)" />  
        Addition 2:
        <input type="text" id="add2"  name="add1" onkeyup="AutoCalc(this)" />
        Subtraction 2:
        <input type="text" id="sub2" name="sub1" onkeyup="AutoCalc(this)" />      
        <label>
            Total</label>
        <input type="text" id="total" name="total" disabled="disabled" />
    </div>

    </body>
    </html>
<script>
    function AutoCalc(obj) {
           var total = 0;

           if (isNaN(obj.value)) {
               alert("Please enter a number :(");
               obj.value = '';
               return false;
           }
           else {

               var textBox = new Array();
               textBox = document.getElementsByTagName('input')

               for (i = 0; i < textBox.length; i++) {
                   if (textBox[i].type == 'text') {
                       var inputVal = textBox[i].value;
                       if (inputVal == '')
                           inputVal = 0;
                       if ((textBox[i].id == 'add1') || (textBox[i].id == 'add2')) {
                           total = total + parseInt(inputVal);
                       }

                       if ((textBox[i].id == 'sub1') || (textBox[i].id == 'sub2')) {
                           total = total - parseInt(inputVal);
                       }
                   }
               }
               document.getElementById('total').value = total;
           }
       }

       </script>
  • 2 Contributors
  • 1 Reply
  • 209 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by rubberman

Dani AI

Generated

Quick summary and a safe, working fix.

The snippet posted by computes one running total by adding the "add" fields and subtracting the "sub" fields. If you instead want two pair results (for example: result1 = add1 - sub1, result2 = add2 - sub2) and then the product of those two results, do the math explicitly for each pair and update the three outputs. is right that you can do this server-side, but for instant feedback client-side JavaScript is simpler and avoids a round trip.

Key points to fix from the original code

  • Use unique name/id attributes and modern input types (type="number" with step="any") so mobile/desktop show numeric keyboards and decimals work.
  • Parse values with Number() or parseFloat(), and validate with Number.isFinite rather than relying on isNaN on the raw string.
  • Use input events (or addEventListener) instead of inline onkeyup handlers.
  • If you need the computed fields submitted to the server, use readonly (disabled fields are not submitted).

Example (client-side) — computes (add1 - sub1), (add2 - sub2), and their product:

Addition 1: <input id="add1" type="number" step="any">
Subtraction 1: <input id="sub1" type="number" step="any">
Addition 2: <input id="add2" type="number" step="any">
Subtraction 2: <input id="sub2" type="number" step="any">

Result 1: <input id="res1" readonly>
Result 2: <input id="res2" readonly>
Product:  <input id="product" readonly>

<script>
(function(){
  const ids = ['add1','sub1','add2','sub2'];
  ids.forEach(id => document.getElementById(id).addEventListener('input', update));
  function num(id){ const v = document.getElementById(id).value.trim(); return v === '' ? 0 : Number(v); }
  function update(){
    const a1 = num('add1'), s1 = num('sub1'), a2 = num('add2'), s2 = num('sub2');
    if (![a1,s1,a2,s2].every(Number.isFinite)) { document.getElementById('res1').value = document.getElementById('res2').value = document.getElementById('product').value = ''; return; }
    const r1 = a1 - s1, r2 = a2 - s2;
    document.getElementById('res1').value = r1;
    document.getElementById('res2').value = r2;
    document.getElementById('product').value = r1 * r2;
  }
})();
</script>

Troubleshooting notes: switch r1 = a1 - s1 to r1 = a1 + s1 if you actually meant "add1 plus sub1". Use readonly instead of disabled if you need the values to be posted to the server.

Member Avatar for rubberman

You should specify another php or HTML page for the action= component. In that page you can get the post variables and do the math... :-) If you construct your page properly, you can recursively call the same page. That said, just leaving the action out, the form will post to the same page, but you need to determine if you got post variables set, and then pass that data to the java script.

Edited by rubberman
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.