Jquery Add (SUM) Multiple value from multiple Form element

Question

Here is the form I have...

<form>
  <label>Fisrt:</label>
  <select class="first">
    <option value="0">United</option>
    <option value="1">Indi</option>
    <option value="2">Kingdom</option>
  </select>
  <label>Second:</label>
  <select class="second">
    <option value="0">States</option>
    <option value="1">orange</option>
    <option value="2">apple</option>
  </select>

  <input type="text" class="form-control trScr" id="temp" name="temp">
  <input type="text" class="form-control trScr" id="bc" name="bc">

</form>

<div id="total">Total: </div>

As you see above, I want to add the numeric value for the dropdown selected with the inserted value for the inputbox. how do i calculate and show the result on div id=total?

Example ..If I select from the dropdown united (0 value) and orange(1 value), And if I insert first and second inputbox respectively(4,2)! I want the result to be 0 + 1 + 4 + 2 = 7. How do i calculate using Jquery? if not Js?

My try... function calculateSum() {

    var sum = 0;
    //iterate through each textboxes and add the values
    $(".trScr").each(function() {
        //add only if the value is number
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
      console.log(sum);
        }
    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    return sum.toFixed(0);
  }

the above show the sum of textbox perfectly, My real problem is how the select can be added with the above code?

you can do it by trying some stuff at your end and add that effort in your question if you stuck at any point of time. But the main thing is at-least try something — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Dec 31, 2017 at 8:35
I was working the whole night with no real progress...let me post some of my code.... — MR.Internet
– MR.Internet, Commented Dec 31, 2017 at 8:38
There is no reason to downvote. We have all been there and struggled and this is an honest question. — simon
– simon, Commented Dec 31, 2017 at 9:03

simon · Accepted Answer · 2017-12-31 08:50:54Z

1

Here was my solution:

$('#fm').on('input', function(e){
    let total = Number($('.first').val()) + 
                Number($('.second').val()) + 
                Number($('#temp').val()) + 
                Number($('#bc').val());
    $('#total').text(total);
});

fiddle:- https://jsfiddle.net/wr6ympos/3/

edited Dec 31, 2017 at 8:50

answered Dec 31, 2017 at 8:44

simon

9642 gold badges10 silver badges24 bronze badges

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

9 Comments

MR.Internet Over a year ago

why i get Nan Error? have any idea?

simon Over a year ago

i added id #fm to your <form>

simon Over a year ago

if a user enters a character instead of a number into the input fields, Number function will fail and give you NaN.

MR.Internet Over a year ago

please add the following option to the select ...<select class="second"> <option value="selected">select oen</option> <option value="0">States</option> <option value="1">orange</option> <option value="2">apple</option> </select> you will see the Error NaN.. how do you solve it?

MR.Internet Over a year ago

we are near please help

|

brk · Accepted Answer · 2017-12-31 08:41:28Z

1

You will need a form button if not want to calculate the total based on change event

// adding event to button
document.getElementById('calculate').addEventListener('click', function() {
  // getting value from the two select
  var getFirstSelectVal = document.getElementsByClassName('first')[0].value;
  var getSecondSelectVal = document.getElementsByClassName('second')[0].value
  // getting value from two input box
  var getTempValue = document.getElementById('temp').value;
  var getBCValue = document.getElementById('bc').value;
  // the + sign before the variable is unary operator to convert value to number
  // + +variableName. The first sign s use to sum 
  // using innerHTML to show the value
  document.getElementById('total').innerHTML = +getFirstSelectVal + +getSecondSelectVal + +getTempValue + +getBCValue;
  //console.log(getFirstSelectVal)

})

<form>
  <label>Fisrt:</label>
  <select class="first">
    <option value="0">United</option>
    <option value="1">Indi</option>
    <option value="2">Kingdom</option>
  </select>
  <label>Second:</label>
  <select class="second">
    <option value="0">States</option>
    <option value="1">orange</option>
    <option value="2">apple</option>
  </select>

  <input type="text" class="form-control" id="temp" name="temp">
  <input type="text" class="form-control" id="bc" name="bc">
  <input type="button" value="Calculate" id="calculate">
</form>

<div id="total">Total: </div>

answered Dec 31, 2017 at 8:41

brk

50.3k10 gold badges59 silver badges85 bronze badges

3 Comments

simon Over a year ago

Wrong. Instead of using change event, use input event.

brk Over a year ago

@simon i mean change for the select elements

simon Over a year ago

Yes and I'm saying you dont need a button to track the event of the select elements changing.

Collectives™ on Stack Overflow

Jquery Add (SUM) Multiple value from multiple Form element

2 Answers 2

9 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related