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.
Related
I'm trying to make a form that contains several different products with different options to calculate and I need to get the total price.
Scenario:
(a+b) * c = price
(a+b) * c = price
(a+b) * c = price
price + price + price = toltal
This is my script, but it doesn't work
$(document).ready(function () {
$("#form").on("keyup", ".form-calc", function () {
var parent = $(this).closest(".items");
var sum = parent.find(".form-line").val((parent.find(".form-cost").val() + parent.find(".form-cost-skift").val()).toFixed(2));
parent.find(".form-line").val((parent.find(".form-qty").val() * sum).toFixed(2));
var total = 0;
$(".form-line").each(function () {
total += parseFloat($(this).val() || 0);
});
$("#total").val(total.toFixed(2));
});
});
JSFiddle
What I'm missing?
Maybe something like this? https://jsfiddle.net/tnzcz8a3/3/
$(document).ready(function () {
$("#form").on("keyup", ".form-calc", function () {
var parent = $(this).closest(".items");
var sum = 0;
var total = 0;
if (!isNaN(parent.find(".form-cost").val())) sum += +parent.find(".form-cost").val();
if (!isNaN(parent.find(".form-cost-skift").val())) sum += +parent.find(".form-cost-skift").val();
if (!isNaN(parent.find(".form-qty").val())) sum *= +parent.find(".form-qty").val();
parent.find(".form-line").val(sum.toFixed(2));
$(".form-line").each(function () {
total += parseFloat($(this).val() || 0);
});
$("#total").val(total.toFixed(2));
});
});
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);
}
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
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.
im a noob at javascript and was wondering how it is possible to display an alert message when the total value goes below 0. The page in question is here (http://cashmoneypaid.com/order-form-phones-work) and the script i have tried is below. Thanks so much for the help.
function checkTotal() {
document.listForm.total.value = '';
var sum = 20;
for (i = 0; i < document.listForm.choice.length; i++) {
if (document.listForm.choice[i].checked) {
sum = sum + parseInt(document.listForm.choice[i].value);
}
}
document.listForm.total.value = sum;
}
$("#total").ready(function() {
if (sum > 0) {
alert("We are sorry, but at this time we can not offer you any money for your item");
}
});
Since you use jQuery change it all!!
$(function(){
var sum = 20;
$('form input[type="checkbox"]').change(function(){
if (this.checked)
sum -= parseFloat(this.value);
else
sum += parseFloat(this.value);
if (sum < 0)
alert('bla bla bla');
});
});
Live DEMO
You can also use this trick:
$('form input[type="checkbox"]').change(function(){
var value = parseFloat(this.value) * (this.checked ? -1 : 1);
sum += value
...
Live DEMO