CODEWITHSUNDEEP
javascriptjquery
nethken
nethken

Reputation: 1092

How to get the value of input and sum the total

This i'm trying to do, I want to get all the data in input fields using javascript and put the sum of all the fields in another input. But im getting an error, the value of total is null or blank. Can someone help me about this? Or give me clue what's causing the error.

Here my html code for the inputs i will not include all of the fields to lessen the code.

  var ma = +(document.getElementById('majore').textContent);
			  var qu = +(document.getElementById('quize').textContent);
			  var hss = +(document.getElementById('hs').textContent);
			  var attt = +(document.getElementById('att').textContent);
			  var laboo = +(document.getElementById('labo').textContent);
 			  var acttt = +(document.getElementById('act').textContent);
 			  var recitss = +(document.getElementById('recits').textContent);

 			  var total = ma + qu + hss + attt + laboo + acttt + recitss;

			  document.getElementById('totals').innerHTML = total;
<div class="well me">
				 <label for="majore">Major Exam</label>
		            <div class="input-group">
					  <input type="text" class="form-control majore" id="majore"/>
					   <span class="input-group-addon">
			           <i class="fa fa-percent"></i>
				       </span>
				</div>
			</div>

            <div class="well quize">
				 <label for="quize">Quizzes</label>
		            <div class="input-group">
					  <input type="text" class="form-control quize" id="quize"/>
					   <span class="input-group-addon">
			           <i class="fa fa-percent"></i>
				       </span>
				</div>
			</div>

            <div class="well hos">
				 <label for="hs">Homework/Seatwork</label>
		            <div class="input-group">
					  <input type="text" class="form-control hs" id="hs"/>
					   <span class="input-group-addon">
			           <i class="fa fa-percent"></i>
				       </span>
				</div>
			</div>


              <div class="well total">
				 <label for="total">Total/label>
		            <div class="input-group">
					  <input type="text" class="form-control total" id="totals"/>
					   <span class="input-group-addon">
			           <i class="fa fa-percent"></i>
				       </span>
				</div>
			</div>


here's my js. this code is inside in the `success function` of `ajax`.

Upvotes: 0

Views: 1252

Answers (4)

Anwarul Islam Abir
Anwarul Islam Abir

Reputation: 23

You may try this code

function sum() {
  var ma = parseInt(document.getElementById('majore').value);
  var qu = parseInt(document.getElementById('quize').value);
  var hss = parseInt(document.getElementById('hs').value);
  var totals = ma + qu + hss;
  document.getElementById('totals').innerHTML = totals;
}
<div class="well me">
  <label for="majore">Major Exam</label>
  <div class="input-group">
    <input type="text" class="form-control majore" id="majore" onchange="sum()" />
    <span class="input-group-addon">
      <i class="fa fa-percent"></i>
    </span>
  </div>
</div>

<div class="well quize">
  <label for="quize">Quizzes</label>
  <div class="input-group">
    <input type="text" class="form-control quize" id="quize" onchange="sum()" />
    <span class="input-group-addon">
      <i class="fa fa-percent"></i>
    </span>
  </div>
</div>

<div class="well hos">
  <label for="hs">Homework/Seatwork</label>
  <div class="input-group">
    <input type="text" class="form-control hs" id="hs" onchange="sum()" />
    <span class="input-group-addon">
      <i class="fa fa-percent"></i>
    </span>
  </div>
</div>

<div class="well total">
  <label for="total">Total</label>
  <div class="input-group" id="totals">
    <input type="text" class="form-control total" id="totals" />
    <span class="input-group-addon">
      <i class="fa fa-percent"></i>
    </span>
  </div>
</div>

Upvotes: 1

prathap
prathap

Reputation: 31

function numberSum(N) {
 var total = 0;
  for(var i = 1; i <= N; i++){
  total += i;
  }
  return total;

}

function run(){
val = document.getElementById("val").value;
document.getElementById("results").innerHTML=val+": "+numberSum(val)
}
<input id="val">
<input type="Submit" onclick="run();">
 <p id="results"></p>

Your showing only your body part ...kindly do the script like this way

Upvotes: 1

Jeni
Jeni

Reputation: 430

You can get or set the value for the input element using val property.

  • Get the value from the input element and sum the values
  • Set the value for the total input field

Here is the Code :

var total = +($('#majore').val()) + +($('#quize').val()) + +($('#hs').val()); 
$('#totals').val(total);

Check your output in Jsfiddle

This is simple and optimized way. Read more about val property here

Upvotes: 1

Rayon
Rayon

Reputation: 36609

Use value property, not textContent/innerHTML to get the value from Input-Element

Also note that you are accessing few elements which are not in the DOM, I have removed those statements from Demo

var ma = +(document.getElementById('majore').value);
var qu = +(document.getElementById('quize').value);
var hss = +(document.getElementById('hs').value);
var total = ma + qu + hss;
document.getElementById('totals').value = total;
<div class="well me">
  <label for="majore">Major Exam</label>
  <div class="input-group">
    <input type="text" class="form-control majore" id="majore" value="10" />
    <span class="input-group-addon">
                   <i class="fa fa-percent"></i>
                   </span> 
  </div>
</div>
<div class="well quize">
  <label for="quize">Quizzes</label>
  <div class="input-group">
    <input type="text" class="form-control quize" id="quize" value="10" />
    <span class="input-group-addon">
                   <i class="fa fa-percent"></i>
                   </span> 
  </div>
</div>
<div class="well hos">
  <label for="hs">Homework/Seatwork</label>
  <div class="input-group">
    <input type="text" class="form-control hs" id="hs" value="10" />
    <span class="input-group-addon">
                   <i class="fa fa-percent"></i>
                   </span>
  </div>
</div>
<div class="well total">
  <label for="total">Total/label>
    <div class="input-group">
      <input type="text" class="form-control total" id="totals" />
      <span class="input-group-addon">
                   <i class="fa fa-percent"></i>
                   </span>
    </div>
</div>

Upvotes: 2

Related Questions