AUTO SUM textboxt with value in html using javascript

Question

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.

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.

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

Don't post pictures of code, post the actual code, ideally in a runnable snippet in your question — CertainPerformance
– CertainPerformance, Commented Aug 8, 2018 at 3:23

Adriano · Accepted Answer · 2018-08-08 05:30:54Z

1

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.

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

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"/>

edited Aug 8, 2018 at 5:30

Adriano

3,9845 gold badges36 silver badges58 bronze badges

answered Aug 8, 2018 at 3:44

Akhil Aravind

6,0451 gold badge18 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amruth Pillai · Accepted Answer · 2018-08-08 03:52:54Z

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>

Ahmed Abuzeid · Accepted Answer · 2021-02-18 14:13:15Z

0

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"/>

answered Feb 18, 2021 at 14:13

Ahmed Abuzeid

114 bronze badges

Collectives™ on Stack Overflow

AUTO SUM textboxt with value in html using javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related