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, Mar 23 '17 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, Mar 23 '17 at 21:03
You should never manually create SQL. Your code really is an SQL injection attack waiting to happen! http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php — Jeremy J Starcher, Mar 23 '17 at 21:47

kind user · Answer 1 · 2017-03-23T21:07:44.123

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 '17 at 21:07

answered Mar 23 '17 at 21:03

kind user

40,029
7
67
77

`Uncaught ReferenceError: findTotal is not defined` – RomanPerekhrest Mar 23 '17 at 21:04
Make sure you include the script in the `` tag, rather than in the ``; that is likely why your variable is undefined :) – Obsidian Age Mar 23 '17 at 21:11
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? – Ravindu Theekshana Mar 23 '17 at 21:13
1

@RavinduTheekshana Button? There's no any buttons in your snippet (: – kind user Mar 23 '17 at 21:14
@RavinduTheekshana What action do you want when clicking the button? – kind user Mar 23 '17 at 21:30
the max value is 20. I want the total of 3 input as 20. If less than 20 I want to display an error in html or javascript, How to validate? – Ravindu Theekshana Mar 23 '17 at 21:30
@ Kind user I updated the code with action page "question.php" – Ravindu Theekshana Mar 23 '17 at 21:37
The total question value is 20. I doesn't change, So I want to add input fields numbers that total is getting 20 – Ravindu Theekshana Mar 23 '17 at 21:41
@RavinduTheekshana It's much more complex than it was at start. I suggest you to make a new question, drop whole code and tag every used language. – kind user Mar 23 '17 at 21:49

Mirza Brunjadze · Answer 2 · 2017-03-24T04:52:10.170

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

score 0 · Answer 3 · answered Mar 23 '17 at 21:08

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>

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

3 Answers3