CODEWITHSUNDEEP
javascripthtml
NoobProgrammer
NoobProgrammer

Reputation: 484

javascript dynamic multiplication with textbox

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

Upvotes: 1

Views: 821

Answers (5)

Takit Isy
Takit Isy

Reputation: 10081

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:

  1. 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
  2. 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.

Upvotes: 0

Harsh Jaswal
Harsh Jaswal

Reputation: 447

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>

Upvotes: 1

Islam ElHakmi
Islam ElHakmi

Reputation: 274

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

Upvotes: 1

matiit
matiit

Reputation: 8017

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

Upvotes: 1

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

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>

Upvotes: 1

Related Questions