Clash Royale CLAN TAG#URR8PPP

AUTO SUM textboxt with value in html using javascript

I need your help.

I have two textbox with random numbers and 1 textbox to show the total.

The total textbox will run a sum function if I click or fill the Qty1 or Qty2 textbox.

sum

I would like to change it to: if I reload the page, the Total textbox will auto sum the Qty1 and Qty2 textbox and show the value.

Total

function findTotal()
var arr = document.getElementsByName('qty');
var tot=0;
for(var i=0;i<arr.length;i++)
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);

document.getElementById('total').value = tot;


Qty1 : <input onblur="findTotal()" type="text" name="qty" id="qty1" value="<?php $digits = 3; echo rand(pow(10, $digits-1), pow(10, $digits)-1);?>"/><br>
Qty2 : <input onblur="findTotal()" type="text" name="qty" id="qty2" value="<?php $digits = 3; echo rand(pow(10, $digits-1), pow(10, $digits)-1);?>"/><br>
<br><br>
Total : <input type="text" name="total" id="total"/>

Thanks before . . .

2 Answers
2

You are triggering the function on the onblur event so it will only trigger once you focus out the input element.
You should call the function on page load, check the snippet.

onblur

input

You can also achieve it with a keyup event once after the page is loaded:

keyup

function findTotal()
var arr = document.getElementsByName('qty');
var tot=0;
for(var i=0;i<arr.length;i++)
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);

document.getElementById('total').value = tot;
;
document.addEventListener("DOMContentLoaded", function(event)
findTotal();
);

Qty1 : <input onkeyup="findTotal()" type="text" name="qty" id="qty1" value="2"/><br>
Qty2 : <input onkeyup="findTotal()" type="text" name="qty" id="qty2" value="3"/><br>
<br><br>
Total : <input type="text" name="total" id="total"/>

You could try this using jQuery as well, it would look a lot more elegant :)

var qty1 = $('input[name="qty1"]');
var qty2 = $('input[name="qty2"]');
var total = $('input[name="total"]');

$(document).ready(function()
$(qty1).val(Math.floor((Math.random() * 100) + 1));
$(qty2).val(Math.floor((Math.random() * 100) + 1));

$(total).val(Number($(qty1).val()) + Number($(qty2).val()));
);

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="container mt-5">
<div class="row">
<div class="col-6 mx-auto">
<form id="calcForm" class="border p-4">

<div class="form-group">
<label for="qty1">Quantity 1</label>
<input name="qty1" type="number" class="form-control">
</div>

<div class="form-group">
<label for="qty2">Quantity 2</label>
<input name="qty2" type="number" class="form-control">
</div>

<hr class="py-4">

<div class="form-group">
<label for="total">Total</label>
<input name="total" type="number" class="form-control">
</div>

</form>
</div>
</div>
</div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.