JavaScript: Calculating inputs (select input) and resulting a number

Question

When I run select something from the drop-down ('room_type_id' and 'bed_type_id') it outputs a "NaN" (Not a Number). If I first select something from multiple select input ('bed_type_id') then the output results are: 52000, 53000, 53500 although the real values are 1000, 2000, 2500 as you can see in the HTML form in the demo above.

I suspect parseInt has something to do with it. parseFloat didn't work either. Any suggestions?

function jungi() {
   var room_type_id=document.getElementById('room_type_id').value;
   var meal_type_id=document.getElementById('meal_type_id').value;
   var bed_type_id=document.getElementById('bed_type_id').value;
   document.getElementById('total_amount').value = parseInt(room_type_id) + parseInt(meal_type_id) + parseInt(bed_type_id);
}

Try this jsfiddle.net/7mbQ4/2

Givi
– Givi

2013-07-05 12:53:38 +00:00
Commented Jul 5, 2013 at 12:53 — Givi
– Givi, Commented Jul 5, 2013 at 12:53

mguimard · Accepted Answer · 2013-07-05 12:47:27Z

4

Your multiple select has no value selected on load, so you're trying to do :

parseInt("")

Which results as Not A Number

Maybe you should add selected on the first option of your multiple select.

<option value="1000" selected>Breakfast</option>

You can also check for an empty string before calling parseInt

answered Jul 5, 2013 at 12:47

mguimard

1,89913 silver badges14 bronze badges

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

Comments

stepanVich · Accepted Answer · 2013-07-05 13:24:36Z

1

You must use selectedIndex and options values:

Javascript:

var room = document.getElementById("room_type_id");
var meal = document.getElementById("meal_type_id");
var bed = document.getElementById("bed_type_id");
document.getElementById("form1").onchange = jungi;
function jungi() {
 document.getElementById("total_amount").value = parseInt(room.options[room.selectedIndex].value) + parseInt(meal.options[meal.selectedIndex].value) + parseInt(bed.options[bed.selectedIndex].value);       
}

Moreover you must wrap selection tags into <form id = "form1">...</form> tag.

answered Jul 5, 2013 at 13:24

stepanVich

3384 silver badges12 bronze badges

Collectives™ on Stack Overflow

JavaScript: Calculating inputs (select input) and resulting a number

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related