Jquery send result of SUM to div

Question

I want to: Get value from select, sum with other values, and place it inside a span.

Can I send the result of a value to a div/span without having to submit with a button? Is that possible?

please look at my fiddle: https://jsfiddle.net/groseler/3mq1ye1y/

HTML

$(function () {
  $("#field16-1").change(function() {
    var val = $(this).val();
    var comEx = "150";
    var youngDriver = "100"; 
    var resultSum = parseInt(val, 10) + parseInt(comEx, 10) + parseInt(youngDriver, 10);
     
  });
  $("#result").html(resultSum);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="field16-1">
  <option value="">Please select...</option>
  <option value="120">120</option>
  <option value="230">230</option>
  <option value="260">260</option>
 </select>
 <div>
 Result should appear here --->  <span id="result" ></span></div>

Suren Srapyan · Accepted Answer · 2016-08-11 17:21:20Z

1

Your code works after a bit change. You have only some typo. You need to add the $("#result").html(resultSum) into the change callback.

You don't need to submit anything. Submit is for the forms and after submitting the data almost always go to the server side code

$(function () {  
  $("#field16-1").change(function() {
    var val = $(this).val();
    var comEx = "150";
    var youngDriver = "100"; 
    var resultSum = parseInt(val, 10) + parseInt(comEx, 10) + parseInt(youngDriver, 10);
     $("#result").html(resultSum);
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="field16-1">
  <option value="">Please select...</option>
  <option value="120">120</option>
  <option value="230">230</option>
  <option value="260">260</option>
 </select>
 <div>
<span id="result" ></span></div>

answered Aug 11, 2016 at 17:21

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

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

2 Comments

Suren Srapyan Over a year ago

@groseler Be a bit attentive :). Your code is working

grcoder Over a year ago

You right, I have to be. Already too many hours in front the pc... Thank you one more time ;)

brk · Accepted Answer · 2016-08-11 17:23:20Z

1

Put $("#result").html(resultSum); inside the function

$(function () {
  $("#field16-1").change(function() {
    var val = $(this).val();
    var comEx = "150";
    var youngDriver = "100"; 
    var resultSum = parseInt(val, 10) + parseInt(comEx, 10) + parseInt(youngDriver, 10);
      $("#result").html(resultSum);
  });

});

JSFIDDLE

answered Aug 11, 2016 at 17:23

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

Aneesh Sivaraman · Accepted Answer · 2016-08-11 17:25:10Z

1

The mistake you have done is that you put $("#result").html(resultSum); this outside the change event of dropdown.

answered Aug 11, 2016 at 17:25

Aneesh Sivaraman

9311 gold badge5 silver badges9 bronze badges

Comments

PeterKA · Accepted Answer · 2016-08-11 17:26:49Z

0

Move $("#result").html(resultSum); statement to within .change() so the the sum can be changed every time the value of the select element changes.

$(function () {
  $("#field16-1").change(function() {
    var val = $(this).val();
    var comEx = "150";
    var youngDriver = "100"; 
    var resultSum = parseInt(val, 10) + parseInt(comEx, 10) + parseInt(youngDriver, 10);
    $("#result").html(resultSum);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="field16-1">
  <option value="">Please select...</option>
  <option value="120">120</option>
  <option value="230">230</option>
  <option value="260">260</option>
 </select>
 <div>
 Result should appear here --->  <span id="result" ></span></div>

edited Aug 11, 2016 at 17:26

answered Aug 11, 2016 at 17:25

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

1 Comment

grcoder Over a year ago

Thank you for your time! I've already used the @SurenSrapyan answer.

Collectives™ on Stack Overflow

Jquery send result of SUM to div

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related