How get total sum of 3 input box values using Javascript?

Question

I want to show total sum of values entered in 'txtCal' input boxes in next input box named 'totCal' without refreshing page.

paper.php

<label>No of Questions - Easy level</label>
<input type="number" class="txtCal" id="input_item" name="level1_no_of_questions" placeholder="No of Questions - Easy level"  onblur="findTotal()" Required/><br />

<label>No of Questions - Intermediate level</label>
 <input type="number" name="level2_no_of_questions" class="txtCal" id="input_item" placeholder="No of Questions - Intermediate level" onblur="findTotal()" Required/><br />

<label>No of Questions - Difficult level</label>
<input type="number" name="level3_no_of_questions" class="txtCal" id="input_item" placeholder="No of Questions - Difficult level" onblur="findTotal()" Required/><br/>

<label>Total No of Questions</label>
<input type="number" name="total_no_of_questions" class="totCal" value="20"  readonly="readonly" id="input_item" placeholder="Total No of Questions max="20"/><br />

<input type="submit" value="Add Exam Paper" name="submit" id="submit"/>

<form/>

Action page
question.php

<?php
if(isset($_POST['submit'])){
    $level1_no_of_questions=$_POST['level1_no_of_questions'];
    $level2_no_of_questions=$_POST['level2_no_of_questions'];
    $level3_no_of_questions=$_POST['level3_no_of_questions'];
    $total_no_of_questions=$_POST['total_no_of_questions'];

$sql2= "INSERT INTO exam_paper (level1_no_of_questions,level2_no_of_questions,level3_no_of_questions,total_no_of_questions) VALUES ('$level1_no_of_questions','$level2_no_of_questions','$level3_no_of_questions','$total_no_of_questions');





         if (mysqli_query($dbcon,$sql2)){

            //Redirection to the this page


            header("Location:paper.php");

            exit();
         }else{ 
            $error=mysqli_error($dbcon);
         }
}   

}  
?>

    <script type="text/javascript">
function findTotal(){
    var arr = document.getElementsByClassName('txtCal');
    var tot=0;
    for(var i=0;i<arr.length;i++){
        if(parseInt(arr[i].value))
            tot += parseInt(arr[i].value);
    }
    document.getElementByClassName('totCal').value = tot;
}

    </script>

This is not working..What was the error? I cant use the input id or and name.names goes to sql and id goes to design..

when I put the values into 3 inputs, it doesn't give the total in totalinput field — Ravindu Theekshana
– Ravindu Theekshana, Commented Mar 23, 2017 at 21:01
It doesn't matter where the fields get their data from; you are only calling the JavaScript through onblur(). Do your fields already have data in them when you attempt to run the onblur()? You could find the error with a simple console.log() in that case. — Obsidian Age
– Obsidian Age, Commented Mar 23, 2017 at 21:03
You should never manually create SQL. Your code really is an SQL injection attack waiting to happen! stackoverflow.com/questions/60174/… — Jeremy J Starcher
– Jeremy J Starcher, Commented Mar 23, 2017 at 21:47

kind user · Accepted Answer · 2017-03-23 21:07:44Z

3

To get the result dynamically, you have to bind eventListener to the each input.

If you want to display the result inside the .totCal element, you have to use it with the index (specify the element), since getElementsByClassName returns an array-like object.

var arr = document.getElementsByClassName('txtCal');

function findTotal() {
  var tot = 0;
  for (var i = 0; i < arr.length; i++) {
     tot += parseInt(arr[i].value);
  }
  document.getElementsByClassName('totCal')[0].value = tot;
}

for (var i = 0; i < arr.length; i++) {
  arr[i].addEventListener('keyup', findTotal);
}

<label>No of Questions - Easy level</label>
<input type="number" class="txtCal" id="input_item" name="level1_no_of_questions" placeholder="No of Questions - Easy level" onblur="findTotal()" Required/><br />

<label>No of Questions - Intermediate level</label>
<input type="number" name="level2_no_of_questions" class="txtCal" id="input_item" placeholder="No of Questions - Intermediate level" onblur="findTotal()" Required/><br />

<label>No of Questions - Difficult level</label>
<input type="number" name="level3_no_of_questions" class="txtCal" id="input_item" placeholder="No of Questions - Difficult level" onblur="findTotal()" Required/><br/>

<label>Total No of Questions</label>
<input type="number" name="total_no_of_questions" class="totCal" value="20" readonly="readonly" id="input_item" placeholder="Total No of Questions max=" 20 "/><br />

edited Mar 23, 2017 at 21:07

answered Mar 23, 2017 at 21:03

kind user

42k8 gold badges69 silver badges78 bronze badges

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

9 Comments

RomanPerekhrest Over a year ago

Uncaught ReferenceError: findTotal is not defined

Obsidian Age Over a year ago

Make sure you include the script in the <head> tag, rather than in the <body>; that is likely why your variable is undefined :)

Ravindu Theekshana Over a year ago

the error is fixed, but I use the max value for the input"totCal" , When Iclick the submit button, the total input<=max value it doesn't validate and not given the error message. why?

kind user Over a year ago

@RavinduTheekshana Button? There's no any buttons in your snippet (:

kind user Over a year ago

@RavinduTheekshana What action do you want when clicking the button?

|

Mirza Brunjadze · Accepted Answer · 2017-03-24 04:52:10Z

I think code explains itself, ask me if you have questions

JSFiddle

<form action="#">
  <label>No of Questions - Easy level</label>
  <input type="number" class="txtCal" id="input_item" name="level1_no_of_questions" placeholder="No of Questions - Easy level" Required/><br />

  <label>No of Questions - Intermediate level</label>
  <input type="number" name="level2_no_of_questions" class="txtCal" id="input_item" placeholder="No of Questions - Intermediate level" Required/><br />

  <label>No of Questions - Difficult level</label>
  <input type="number" name="level3_no_of_questions" class="txtCal" id="input_item" placeholder="No of Questions - Difficult level" Required/><br/>

  <label>Total No of Questions</label>
  <input type="number" name="total_no_of_questions" class="totCal" value="0" id="input_item" placeholder="Total No of Questions" min="20" max="20"/><br />

  <input type="submit">
</form>

JavaScript:

var totalNo = document.querySelector('[name="total_no_of_questions"]');
var inputSources = [
  document.querySelector('[name="level1_no_of_questions"]'),
  document.querySelector('[name="level2_no_of_questions"]'),
  document.querySelector('[name="level3_no_of_questions"]'),
];

// Set event listeners
inputSources.forEach(function (input) {
  input.addEventListener('blur', findTotal);
});

function findTotal() {
  totalNo.value = inputSources.reduce(function (total, curr) {
    var value = Number(curr.value);

    return total + (isNaN(value) ? 0 : value);
  }, 0);
}

Geander · Accepted Answer · 2017-03-23 21:08:24Z

Here it is!
The error was in:
document.getElementsByClassName('total').Value = tot;
the correct is:
document.getElementsByClassName('totCal')[0].value = tot;
thank you

<label>No of Questions - Easy level</label>
<input type="number" class="txtCal" id="input_item"     name="level1_no_of_questions" placeholder="No of Questions - Easy level"  onblur="findTotal()" Required/><br />

<label>No of Questions - Intermediate level</label>
 <input type="number" name="level2_no_of_questions" class="txtCal" id="input_item" placeholder="No of Questions - Intermediate level" onblur="findTotal()" Required/><br />

<label>No of Questions - Difficult level</label>
<input type="number" name="level3_no_of_questions" class="txtCal" id="input_item" placeholder="No of Questions - Difficult level" onblur="findTotal()" Required/><br/>

<label>Total No of Questions</label>
<input type="number" name="total_no_of_questions" class="totCal" value="20"  readonly="readonly" id="input_item" placeholder="Total No of Questions max=20"/><br />


    <script type="text/javascript">
function findTotal(){
    var arr = document.getElementsByClassName('txtCal');
    var tot=0;
    for(var i=0;i<arr.length;i++){
        if(parseInt(arr[i].value))
            tot += parseInt(arr[i].value);
    }
    document.getElementsByClassName('totCal')[0].value = tot;
}

    </script>

Collectives™ on Stack Overflow

How get total sum of 3 input box values using Javascript?

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related