Create a sum of form values using Jquery

Question

I am aiming to create a form to generate a quick quote. The ambition is that theu ser is able to select computer parts with a value assigned to each > .

For instance,

<form id="formsum">
  <select>
  <option value="1">1</option>
  <option value="5">2</option>
  <option value="2">3</option>
  </select>
</form>

<form id="formsum2">
  <select>
  <option value="2">1</option>
  <option value="10">2</option>
  <option value="4">3</option>
  </select>
</form>

So if the user selects option 2 on formsum and then 2 on formsum2 Id like the function to read "15".

I started a codepen but it wasnt working so i deleted it. If someone could point me in the right direction that would be great :) im fairly new to this so im not sure what search terms to use or jquery terms to use. — jbibb917
– jbibb917, Commented Oct 24, 2017 at 10:58

Carsten Løvbo Andersen · Accepted Answer · 2017-10-24 11:02:38Z

3

You can try something like this:

$("[id^=formsum] select").change(function() {
  var sum = 0;
  $("[id^=formsum] select").each(function() {
    sum += Number($(this).val());
  });
  console.log(sum)
})

Demo

$("[id^=formsum] select").change(function() {
  var sum = 0;
  $("[id^=formsum] select").each(function() {
    sum += Number($(this).val());
  });
  console.log(sum)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formsum">
  <select>
  <option value="1">1</option>
  <option value="5">2</option>
  <option value="2">3</option>
  </select>
</form>

<form id="formsum2">
  <select>
  <option value="2">1</option>
  <option value="10">2</option>
  <option value="4">3</option>
  </select>
</form>

edited Oct 24, 2017 at 11:02

answered Oct 24, 2017 at 11:00

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

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

3 Comments

Carsten Løvbo Andersen Over a year ago

@pedram what do you mean, if i select 2 in both it returns 15

Carsten Løvbo Andersen Over a year ago

@Jackowski The OP says ` function to read "15"` when option 2 in both are select, aka mine does that. So why do you think the code is wrong, i have used the same code as the OP

Hedegare Over a year ago

@CarstenLøvboAndersen i know sorry, i missunderstood the question. I deleted my previous comment.

Amit Kumar · Accepted Answer · 2017-10-24 11:09:13Z

2

Get Selected value of select and add it.

Use parseInt to parse selected value into int.

$('#btn').on('click',function(){
   var sum  = parseInt($('#formsum select').val()) + parseInt($('#formsum2 select').val());
   console.log(sum);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formsum">
  <select>
  <option value="1">1</option>
  <option value="5">2</option>
  <option value="2">3</option>
  </select>
</form>

<form id="formsum2">
  <select>
  <option value="2">1</option>
  <option value="10">2</option>
  <option value="4">3</option>
  </select>
</form>

<input type="button" id="btn" value="show"/>

edited Oct 24, 2017 at 11:09

answered Oct 24, 2017 at 11:01

Amit Kumar

5,96012 gold badges49 silver badges88 bronze badges

2 Comments

jbibb917 Over a year ago

Thank you very much, looks like i need to read up on parseint!

Amit Kumar Over a year ago

@jbibb917 : hope it solved your problem. then accept it as answer.

Makarand Patil · Accepted Answer · 2017-10-24 11:08:59Z

1

Try this out on both dropdown change event

$(document).ready(function() {
    $("#formsum,#formsum2").change(function() {
    var sum  = parseInt($('#formsum select').val()) + parseInt($('#formsum2 select').val());
    alert(sum);
    });
});

answered Oct 24, 2017 at 11:08

Makarand Patil

9911 gold badge8 silver badges15 bronze badges

Collectives™ on Stack Overflow

Create a sum of form values using Jquery

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related