Develop Reference

JS script to calculates sum of amount calculates wrong

I have prepared this jsfiddle that ilustrates how my script calculate twice the sum of each selected option attribute price. Please help me to solve this issue.
optionsamount is wrong, I mean is calculated twice.. Why is that? Thanks
function update_amounts(){
var sum = 0.0;
var optionsamount = 0.0;
$('#basketorder > tbody > .product').each(function() {
$('.selectedoptionselect option:selected').each(function(){
optprice = $(this).attr('price');
optionsamount+= parseFloat(optprice);
})
var qty = $(this).find('.qty option:selected').val();
var price = $(this).find('.price').val();
var amount = (qty*price);
sum+= (amount + optionsamount);
$(this).find('.amount').text(''+ amount.toFixed(2));
});
$('.total').text(sum);
}

Try this,
function update_amounts(){
var sum = 0.0;
$('#basketorder > tbody > .product').each(function() {
var optionsamount = 0.0;
$(this).find('.selectedoptionselect option:selected').each(function(){
optprice = $(this).attr('price');
optionsamount+= parseFloat(optprice);
})
var qty = $(this).find('.qty option:selected').val();
var price = $(this).find('.price').val();
var amount = (qty*price);
sum+= (amount + optionsamount);
$(this).find('.amount').text(''+ amount.toFixed(2));
});
$('.total').text(sum);

try this
function update_amounts(){
var sum = 0.0;
$('#basketorder > tbody > .product').each(function() {
var optionsamount = 0.0;
$('.selectedoptionselect option:selected').each(function(){
optprice = $(this).attr('price');
optionsamount+= parseFloat(optprice);
})
var qty = $(this).find('.qty option:selected').val();
var price = $(this).find('.price').val();
var amount = (qty*price);
sum+= (amount + optionsamount);
$(this).find('.amount').text(''+ amount.toFixed(2));
});
$('.total').text(sum);
}

Get average from input radio button

I want to get the average by input radio button value.
I have a form with 3x 10 radio fields counting from 1 to 10.
Now I want to calculate the average, so you get a final score.
I get it working with a text field, but I don't know how to do it with radio buttons checked.
This is my javascript:
$('.beoordeling').keyup(function () {
var total = 0,
valid_labels = 0,
average;
$('.beoordeling').each(function () {
var val = parseInt($(this).val(), 10);
if (!isNaN(val)) {
valid_labels += 1;
total += val;
}
});
console.log(total)
average = total / valid_labels;
$('.eindstand').val(average);
});
I have created a jsfiddle with how I have it now.
http://jsfiddle.net/Q2MEq/

Demo Fiddle
Check this code.
$('.beoordeling').change(function () {
var total = 0,
valid_labels = 0,
average;
$('.beoordeling:checked').each(function () {
var val = parseInt($(this).val(), 10);
if (!isNaN(val)) {
valid_labels += 1;
total += val;
}
});
console.log(total)
average = total / valid_labels;
$('.eindstand').val(average);
});
Use change events in case of inputs like radio and not keyup.
use :checked selector to get selected radio buttons only.

See for this you need to have radio buttons with different name attributes or without it, and then you can change to this:
$(':radio').change(function () {
var total = 0,
valid_labels = 0,
average;
$(':checked').each(function () {
var val = parseInt($(this).val(), 10);
if (!isNaN(val)) {
valid_labels += 1;
total += val;
}
});
console.log(total)
average = total / valid_labels;
$('.eindstand').val(average);
});
Demo

Please check this
$('.beoordeling').keyup(function () {
var total = 0,
valid_labels = 0,
average;
$('.beoordeling').each(function () {
var val = parseInt($(this).val(), 10);
if (!isNaN(val)) {
valid_labels += 1;
total += val;
}
});
console.log(total)
average = total / valid_labels;
$('.eindstand').val(average);
});
Demo: JSFiddle

You can determine whether or not a radio button is checked with ".checked"
document.getElementById("radio_1").checked
... will return true if the button is checked, false otherwise.

Caculatiing form values by class

I am trying to calculate all fields in the form which have the same class (shown below in the code), I have managed to get this to work, I think I may be setting the wrong value types in javascript as its not adding them together correctly. Its adding them on top of each other and not to each other. so instead of 4.00 + 5.50 equalling to 9.50 it would read 04.0005.50.
function calculate() {
var total = 0;
$('input.calc').each(function() {
var num = this.value;
//Number(this.value, 10);
if (!isNaN(num)) {
total += num.toFixed(2);
}
});
$("#total").val(total);
}
Any help its appreciated, Thanks

<script language="javascript">
function calculate() {
var total = 0;
$('input.calc').each(function() {
var num = this.value;
//Number(this.value, 10);
if (!isNaN(num)) {
total += num.parseFloat(num);
}
});
$("#total").val(total);
}
</script>

function calculate() {
var total = 0;
$('input.calc').each(function() {
var num = parseFloat(this.value);
//Number(this.value, 10);
if (!isNaN(num)) {
total += num;
}
});
$("#total").val(total);
}

How disable wrong options in selects depend on selected option?

I'd like to create a simple math practising js script.
For example:
The sum is given (=10) and there are four select with numbers from 0 to 10.
And if I choose a number I should disable the wrong options. I mean, the sum of selected options can not bigger then 10.
I tried this way: click here
$(document).on("change", "select.number", function(){
var sum = 10;
var number = $(this).children("option:selected").val();
var sum_number = 0;
$("select.number option:selected").each(function(){
sum_number = parseInt($(this).val(),10) + parseInt(sum_number,10);
});
$("select.number option").attr("disabled", false);
if(sum_number>0){
var act_person = act_max_person = 0;
$("select.number").each(function(){
$(this).children("option:not(:first)").each(function(){ // first is 0
if(parseInt($(this).val(),10) + parseInt(sum_number,10) > sum) $(this).attr("disabled", true);
});
});
}
});
But it's vary far from the perfect...

Try
$(document).on("change", "select.number", function () {
var sum = 10;
var number = $(this).children("option:selected").val();
var sum_number = 0;
$("select.number option:selected").each(function () {
sum_number += parseInt($(this).val(), 10);
});
$('select.number option').prop('disabled', false);
if (sum_number > 0) {
var diff = sum - sum_number;
$('select.number').each(function () {
var idx = parseInt($(this).val(), 10) + diff + 1;
$(this).find('option').slice(idx).prop('disabled', true)
})
}
});
Demo: Fiddle

How to assign radio buttons a value in javascript

What I need to do is turn the 4 different values (when clicked) on the page into a number that I can use to calculate the output in the chart.
http://jsfiddle.net/nlem33/eyGMu/7/
var min_value = 0,
max_value = 10,
units = 0,
price = 0;
var sliderHandler = function (event, ui) {
var newdata = [],
newdata2 = []
data = [],
sum = 0;
if(this.id === 'slider1') {
$('#slider1_value').html(ui.value);
units = ui.value;
} else {
$('#slider2_value').html('$' + ui.value);
price = ui.value;
}
for(var i = 0; i < 12; i++) {
data.push(units * price);
for(var j = 0; j < i; j++)
sum += data[j];
newdata.push(229 * units * i);
newdata2.push(sum);
}
console.log(newdata);
chart.series[0].setData(newdata2);
chart.series[1].setData(newdata);
}

Add a variable called selected and use this event handler:
var selected = 1;
$(document).ready(function() {
$(".product").click(function(){
selected = this.id.replace("product", "");
alert(selected);
});
});
See the updated fiddle. Then you can use the selected variable anywhere.
In order to use the value of a radio button rather than the number in its id, use the following code instead:
var selected = 1;
$(document).ready(function() {
$("input[name=chooseProduct]").change(function(){
selected = $(this).val();
alert(selected);
});
});
See next updated fiddle for that example as well.