javascript dynamic multiplication with textbox

Question

I trying to do a dynamic multiplication in a textbox. Right now I only figure out to do add. please take a look at my js code. I want to multiply the 2 values.

Here's my code:

<form name="submitform">
    <table>
        <tr id="service">
            <td>
                <span>Amount:</span>
            </td>
            <td>
                <input type="text" name="amount" class="amount" onkeyup="onkeyupsum()" autocomplete="off" />
            </td>
            <td>
                <span>Width: </span>
            </td>
            <td>
                <input type="text" name="amount" class="amount" onkeyup="onkeyupsum()" autocomplete="off" />
            </td>
        </tr>

        <tr>
            <td>
                <h4>Total Amount</h4>
            </td>
            <td>
                <input type="text" name="tamt" id="tamt" />
            </td>
        </tr>
    </table>
</form>

JavaScript code (in HTML):

function onkeyupsum() { // calculate sum and show in textbox
    var sum = 0,
    amount = document.querySelectorAll('.amount'), i;
    for (i = 0; i < amount.length; i++) {
        sum += parseFloat(amount[i].value || 0);
    }
    document.submitform.tamt.value = sum;
}

Ankit Agarwal · Accepted Answer · 2018-05-11 10:10:25Z

Set multiply = 1 in your variable initialisation, and use multiply *= parseFloat(amount[i].value || 1); for calculating the multiplication value:

function onkeyupsum() { // calculate sum and show in textbox
var multiply = 1,
    amount = document.querySelectorAll('.amount'), i;
for (i = 0; i < amount.length; i++) {
    multiply *= parseFloat(amount[i].value || 1);
}
document.submitform.tamt.value = multiply;
}

<form name="submitform">
<table>
    <tr id="service">
        <td> <span>Amount:</span>
        </td>
        <td>
        <input type="text" name="amount" class="amount" onkeyup="onkeyupsum()" autocomplete="off" />
        </td>

        <td> <span>Width: </span>
        </td>
        <td>
        <input type="text" name="amount" class="amount" onkeyup="onkeyupsum()" autocomplete="off" />
        </td>
    </tr>

    <tr><td>
    <h4>Total Amount</h4>
    </td><td>

    <input type="text" name="tamt" id="tamt" />
    </td></tr>

</table>
</form>

matiit · Accepted Answer · 2018-05-11 10:10:52Z

1

<script>
function onkeyupsum() { // calculate sum and show in textbox
var result = 1,
    amount = document.querySelectorAll('.amount'), i;
for (i = 0; i < amount.length; i++) {
    result = result * parseFLoat(amount[i].value || 1);
}
document.submitform.tamt.value = result;
}
</script>

It's by no means the best approach but it's similar enough to your code so it should be the easiest for you to follow.

answered May 11, 2018 at 10:10

matiit

8,0175 gold badges44 silver badges65 bronze badges

Comments

Islam ElHakmi · Accepted Answer · 2018-05-11 10:13:51Z

function onkeyupsum() { // calculate sum and show in textbox
var sum = document.querySelectorAll('.amount')[0].value,
    amount = document.querySelectorAll('.amount'), i;
for (i = 1; i < amount.length; i++) {
    sum *= parseFloat(amount[i].value || 0);
}
document.submitform.tamt.value = sum;
}

<form name="submitform">
<table>
    <tr id="service">
        <td> <span>Amount:</span>
        </td>
        <td>
        <input type="text" name="amount" class="amount" onkeyup="onkeyupsum()" autocomplete="off" />
        </td>

        <td> <span>Width: </span>
        </td>
        <td>
        <input type="text" name="amount" class="amount" onkeyup="onkeyupsum()" autocomplete="off" />
        </td>
    </tr>

    <tr><td>
    <h4>Total Amount</h4>
    </td><td>

    <input type="text" name="tamt" id="tamt" />
    </td></tr>

</table>
</form>

try that it's about selecting the value of the first element and ignoring it in the loop

Harsh Jaswal · Accepted Answer · 2018-05-16 10:10:03Z

1

Just change your JavaScript code like this:

<script>
function onkeyupsum() { // calculate sum and show in textbox
var mul = 1,
amount = document.querySelectorAll('.amount'), i;
for (i = 0; i < amount.length; i++) {
mul *= parseFloat(amount[i].value || 1);
}
document.submitform.tamt.value = mul;
}
</script>

edited May 16, 2018 at 10:10

answered May 11, 2018 at 10:13

Harsh Jaswal

4473 silver badges15 bronze badges

1 Comment

matiit Over a year ago

This will fail when there's no value. It'll default to 0 and one 0 will make whole result be 0 :)

Takit Isy · Accepted Answer · 2018-05-23 10:24:43Z

I suggest you to use the below snippet, where I tried to enhance things in your code, and making it work with the multiplication you wanted:

I removed the call of the function in HTML, as it's better not to use inline scripts ; then moved its code inside the .onkeyup event handler
I used Unary operator to make it easier. (+ operator vs parseFloat)

Here is a working snippet:
(See comments in my code for details)

// TAKIT: Launch the function when there's a change in ".amount" elements
var amounts = document.querySelectorAll('.amount');
amounts.forEach(function(elm, index) {
  this.onkeyup = function(){
    var sum = 1, i; // Changed sum = 0 to 1
    for (i = 0; i < amounts.length; i++) {
      sum *= +amounts[i].value || 0; // TAKIT: I propose Unary operator instead of parseFloat
    }
    document.submitform.tamt.value = sum;
  }
});

<form name="submitform">
  <table>
    <tr id="service">
      <td>
        <span>Amount:</span>
      </td>
      <td>
        <input type="text" name="amount" class="amount" autocomplete="off" />
      </td>
      <td>
        <span>Width: </span>
      </td>
      <td>
        <input type="text" name="amount" class="amount" autocomplete="off" />
      </td>
    </tr>
    <tr>
      <td>
        <h4>Total Amount</h4>
      </td>
      <td>
        <input type="text" name="tamt" id="tamt" />
      </td>
    </tr>
  </table>
</form>

Hope it helps.

Collectives™ on Stack Overflow

javascript dynamic multiplication with textbox

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related