Develop Reference

Radio button calculator with nested if Stateme

I am trying to create a pricing calculator that takes all of the checked radio buttons and pushes them into an array where it is added in the end. However, I would like to have one of the radio buttons take the attribute of the first radio button and multiply it by its own value.
I tried nesting an if statement inside of another if statement but it will only seem to add the values of the first if statement and ignore the second.
$(".w-radio").change(function() {
var totalPrice = 0,
values = [];
$("input[type=radio]").each(function() {
if ($(this).is(":checked")) {
if ($(this).is('[name="catering"]')) {
var cateringFunc = (
$(this).val() * $('[name="gastronomy"]').attr("add-value")
).toString();
values.push($(this).val());
}
values.push($(this).val());
totalPrice += parseInt($(this).val());
}
});
$("#priceTotal span").text(totalPrice);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="hack43-radio-group w-radio">
<input type="radio" name="gastronomy" value="0" add-value="10">0<BR>
<input type="radio" name="gastronomy" value="550" add-value="10">550<BR>
<input type="radio" name="gastronomy" value="550" add-value="10">550<BR>
<input type="radio" name="gastronomy" value="550" add-value="10">550<BR>
</label>
<br>
<label class="hack43-radio-group w-radio">
<input type="radio" name="venue" value="0">0<BR>
<input type="radio" name="venue" value="10500">10500<BR>
<input type="radio" name="venue" value="10500">10500<BR>
<input type="radio" name="venue" value="10500">10500<BR>
</label>
<br>
<label class="hack43-radio-group w-radio">
<input type="radio" name="catering" value="0">0<BR>
<input type="radio" name="catering" value="40">40<BR>
<input type="radio" name="catering" value="45">45<BR>
<input type="radio" name="catering" value="60">60<BR>
</label>
<div class="hack42-45-added-value-row">
<div id="priceTotal">
<span>0</span>
</div>
</div>

When the condition is true you should use cateringFunc instead of $(this).val() when pushing into the values array and adding to totalPrice.
I assume you only want to get the added value from the selected radio button, so I added :checked to the selector. Then you also need to provide a default value if none of the gastronomy buttons are checked.
You shouldn't make up new attributes like add-value. If you need custom attributes, use data-XXX. These can be accessed using the jQuery .data() method.
$(".w-radio").change(function() {
var totalPrice = 0,
values = [];
$("input[type=radio]:checked").each(function() {
if ($(this).is('[name="catering"]')) {
var cateringFunc = (
$(this).val() * ($('[name="gastronomy"]:checked').data("add-value") || 0)
);
values.push(cateringFunc.toString());
totalPrice += cateringFunc;
}
values.push($(this).val());
totalPrice += parseInt($(this).val());
});
$("#priceTotal span").text(totalPrice);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="hack43-radio-group w-radio">
<input type="radio" name="gastronomy" value="0" data-add-value="10">0<BR>
<input type="radio" name="gastronomy" value="550" data-add-value="10">550<BR>
<input type="radio" name="gastronomy" value="550" data-add-value="10">550<BR>
<input type="radio" name="gastronomy" value="550" data-add-value="10">550<BR>
</label>
<br>
<label class="hack43-radio-group w-radio">
<input type="radio" name="venue" value="0">0<BR>
<input type="radio" name="venue" value="10500">10500<BR>
<input type="radio" name="venue" value="10500">10500<BR>
<input type="radio" name="venue" value="10500">10500<BR>
</label>
<br>
<label class="hack43-radio-group w-radio">
<input type="radio" name="catering" value="0">0<BR>
<input type="radio" name="catering" value="40">40<BR>
<input type="radio" name="catering" value="45">45<BR>
<input type="radio" name="catering" value="60">60<BR>
</label>
<div class="hack42-45-added-value-row">
<div id="priceTotal">
<span>0</span>
</div>
</div>

Radio button allow multiple selections

Can the radio button be implemented like a checkbox button? I hope radio buttion can multiple selection. Do not use checkbox button!
I want the effect as follows:
[0,1,2]
function clickButton() {
var radios = document.getElementsByName('gender');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
console.log(radios[i].value);
break;
}
}
}
<form id="Selection">
<input type="radio" name="gender" value="0" /> Male<br>
<input type="radio" name="gender" value="1" /> Female<br>
<input type="radio" name="gender" value="2" /> Other<br>
<button onclick="clickButton();return false;">submit</button>
</form>

You can give different names to the radio buttons, then grab the tags by tag name and push the values to an array.
PS: The correct way is to checkboxes because they are designed to do this functionality
Working Demo
function clickButton() {
var radios = document.getElementsByTagName('input');
var checked = [];
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
checked.push(radios[i].value);
}
}
console.log(checked);
}
<form id="Selection">
<input type="radio" name="gender1" value="0" /> Male<br>
<input type="radio" name="gender2" value="1" /> Female<br>
<input type="radio" name="gender3" value="2" /> Other<br>
<button onclick="clickButton();return false;">submit</button>
</form>

The only way to allow this would be to have unique names. The radio button is specifically meant for single select. If you want multi-select ability, then that is what checkboxes would be for.
<form id="Selection">
<input type="radio" name="gender_male" value="0" /> Male<br>
<input type="radio" name="gender_female" value="1" /> Female<br>
<input type="radio" name="gender_other" value="2" /> Other<br>
<button onclick="clickButton();return false;">submit</button>
</form>

Just use different names for your radio buttons -
function clickButton() {
var radios = document.getElementsByClassName('gender');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
console.log(radios[i].value);
}
}
}
<form id="Selection">
<input type="radio" class="gender" name="genderMale" value="0" /> Male<br>
<input type="radio" class="gender" name="genderFemale" value="1" /> Female<br>
<input type="radio" class="gender" name="genderOther" value="2" /> Other<br>
<button onclick="clickButton();return false;">submit</button>
</form>

input box disable enabled using checkbox

I have a form in that there is a input field and checkbox
<input type="text" name="t_c[]" />
<input type="checkbox" name="rele_cent[]" checked="checked" value="0_23" onchange="handleChange(this);">
<input type="text" name="t_c[]" />
<input type="checkbox" name="rele_cent[]" checked="checked" value="1_78" onchange="handleChange(this);">
<input type="text" name="t_c[]" />
<input type="checkbox" name="rele_cent[]" checked="checked" value="2_89" onchange="handleChange(this);">
Now i have a function
function handleChange(chk){
var arr=chk.value.split('_');
if(chk.checked == true){
document.getElementsByName("t_c[arr[0]]").disabled = false;
}else{
document.getElementsByName("t_c[arr[0]]").disabled = true;
}
}
I want to disable corresponding input field on uncheck and enable when checked. but i am confuse how to use proper javascript syntax for getElementsByName("t_c[arr[0]]")

You can get the value of arr[0] after split to determine which input box needs to be enable or disable based on the value of the checkbox:
function handleChange(chk){
var arr = chk.value.split('_');
if(chk.checked){
document.getElementsByName("t_c[]")[arr[0]].disabled = false;
}else{
document.getElementsByName("t_c[]")[arr[0]].disabled = true;
}
}
<input type="text" name="t_c[]" />
<input type="checkbox" name="rele_cent[]" checked="checked" value="0_23" onchange="handleChange(this);">
<input type="text" name="t_c[]" />
<input type="checkbox" name="rele_cent[]" checked="checked" value="1_78" onchange="handleChange(this);">
<input type="text" name="t_c[]" />
<input type="checkbox" name="rele_cent[]" checked="checked" value="2_89" onchange="handleChange(this);">

The only problem with your code was that you need to get the element which is at the arr[0]th index of the result, which was given by getElementsByName.
Correcting that, your code works fine:
function handleChange(chk) {
var arr = chk.value.split('_');
if (chk.checked == true) {
document.getElementsByName("t_c[]")[arr[0]].disabled = false;
} else {
document.getElementsByName("t_c[]")[arr[0]].disabled = true;
}
}
<input type="text" name="t_c[]" />
<input type="checkbox" name="rele_cent[]" checked="checked" value="0_23" onchange="handleChange(this);">
<input type="text" name="t_c[]" />
<input type="checkbox" name="rele_cent[]" checked="checked" value="1_78" onchange="handleChange(this);">
<input type="text" name="t_c[]" />
<input type="checkbox" name="rele_cent[]" checked="checked" value="2_89" onchange="handleChange(this);">

Try this as it works fine and solves your problem, and if not yet then let me know.
function handleChange(chk) {
var inputbox = document.getElementsByClassName("inputbox");
var check = document.getElementsByClassName("check");
for(i = 0; i < inputbox.length; i++) {
if(check[i].checked == false) {
inputbox[i].disabled = true;
}
else {
inputbox[i].disabled = false;
}
}
}
<input type="text" name="t_c[]" class="inputbox"/>
<input class="check" type="checkbox" name="rele_cent[]" checked="checked" value="0_23" onchange="handleChange(this);">
<input type="text" name="t_c[]" class="inputbox" />
<input class="check" type="checkbox" name="rele_cent[]" checked="checked" value="1_78" onchange="handleChange(this);">
<input type="text" name="t_c[]" class="inputbox" />
<input class="check" type="checkbox" name="rele_cent[]" checked="checked" value="2_89" onchange="handleChange(this);">

Calculate total on checkbox checked

HTML
<div id="catlist">
<input type="checkbox" id="cat_1" value="cat_1" price="1.5" /><label for="cat_1">cat_1</label><br/>
<input type="checkbox" id="cat_2" value="cat_2" price="2" /><label for="cat_2">cat_2</label><br/>
<input type="checkbox" id="cat_3" value="cat_3" price="3.5" /><label for="cat_3">cat_3</label><br/>
<input type="checkbox" id="cat_4" value="cat_4" price="4" /><label for="cat_4">cat_4</label><br/>
<input type="checkbox" id="cat_5" value="cat_5" price="5" /><label for="cat_5">cat_5</label><br/>
<input type="checkbox" id="cat_6" value="cat_6" price="6.5" /><label for="cat_6">cat_6</label><br/>
<input type="checkbox" id="cat_7" value="cat_7" price="7" /><label for="cat_7">cat_7</label><br/>
<input type="checkbox" id="cat_8" value="cat_8" price="8" /><label for="cat_8">cat_8</label><br/>
<input type="checkbox" id="cat_9" value="cat_9" price="9.5" /><label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0" />
Javascript
function calcAndShowTotal(){
var total = 0;
$('#catlist :checkbox[checked]').each(function(){
total =+ parseFloat($(this).attr('price')) || 0;
});
$('#total').val(total);
}
$('#pricelist :checkbox').click(function(){
calcAndShowTotal();
});
calcAndShowTotal();
I am getting particular value. WHY? I tried sum of total, i tried jquery but no success..

Use $('#catlist :checkbox:checked') selector to select checked check-boxes
[] is used as attribute selector and it could be used as '[type="checkbox"]' but it will not filter checked check-boxes
+ operator is not needed before parseFloat, it has to be total =+
Instead of calling handler, just invoke change handler using .change()
function calcAndShowTotal() {
var total = 0;
$('#catlist :checkbox:checked').each(function() {
total += parseFloat($(this).attr('price')) || 0;
});
$('#total').val(total);
}
$('#catlist :checkbox').change(calcAndShowTotal).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="catlist">
<input type="checkbox" id="cat_1" value="cat_1" price="1.5" />
<label for="cat_1">cat_1</label>
<br/>
<input type="checkbox" id="cat_2" value="cat_2" price="2" />
<label for="cat_2">cat_2</label>
<br/>
<input type="checkbox" id="cat_3" value="cat_3" price="3.5" />
<label for="cat_3">cat_3</label>
<br/>
<input type="checkbox" id="cat_4" value="cat_4" price="4" />
<label for="cat_4">cat_4</label>
<br/>
<input type="checkbox" id="cat_5" value="cat_5" price="5" />
<label for="cat_5">cat_5</label>
<br/>
<input type="checkbox" id="cat_6" value="cat_6" price="6.5" />
<label for="cat_6">cat_6</label>
<br/>
<input type="checkbox" id="cat_7" value="cat_7" price="7" />
<label for="cat_7">cat_7</label>
<br/>
<input type="checkbox" id="cat_8" value="cat_8" price="8" />
<label for="cat_8">cat_8</label>
<br/>
<input type="checkbox" id="cat_9" value="cat_9" price="9.5" />
<label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0" />
Using Array#reduce
function calcAndShowTotal() {
var total = [].reduce.call($('#catlist :checkbox:checked'), function(a, b) {
return a + +$(b).attr('price') || 0;
}, 0);
$('#total').val(total);
}
$('#catlist :checkbox').change(calcAndShowTotal).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="catlist">
<input type="checkbox" id="cat_1" value="cat_1" price="1.5" />
<label for="cat_1">cat_1</label>
<br/>
<input type="checkbox" id="cat_2" value="cat_2" price="2" />
<label for="cat_2">cat_2</label>
<br/>
<input type="checkbox" id="cat_3" value="cat_3" price="3.5" />
<label for="cat_3">cat_3</label>
<br/>
<input type="checkbox" id="cat_4" value="cat_4" price="4" />
<label for="cat_4">cat_4</label>
<br/>
<input type="checkbox" id="cat_5" value="cat_5" price="5" />
<label for="cat_5">cat_5</label>
<br/>
<input type="checkbox" id="cat_6" value="cat_6" price="6.5" />
<label for="cat_6">cat_6</label>
<br/>
<input type="checkbox" id="cat_7" value="cat_7" price="7" />
<label for="cat_7">cat_7</label>
<br/>
<input type="checkbox" id="cat_8" value="cat_8" price="8" />
<label for="cat_8">cat_8</label>
<br/>
<input type="checkbox" id="cat_9" value="cat_9" price="9.5" />
<label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0" />

Instead of looping you can use change which will respond to and change event on the checkbox. Also you need add or subtract value like this += for addition on -= for subtraction
var _total = 0;
$('input[type="checkbox"]').change(function() {
if($(this).is(':checked')){
_total += parseFloat($(this).attr('price')) || 0;
}
else{
_total -= parseFloat($(this).attr('price')) || 0;
}
$('#total').val(_total);
})
JSFIDDLE

$('input:checkbox').change(function(){
var totalprice=0;
$('input:checkbox:checked').each(function(){
totalprice+= parseFloat($(this).attr('price'));
});
$('#total').val(totalprice)
});

Traverse object and return matching key / values

I have a series of objects containing product information that I need to use to filter the available product options. (i.e. Customer selects radio button with value option id 25, I need to filter the other two options based on what's available for id 25 and then get the value for that three part combination from configurations (25 / 1 / 13) and find that combination in siblings to return the sku value (25 / 1/ 13 = 1761).
I've been successful at getting the keys and values but not matching. I'm a total n00b with javascript (most of my experience is just animating things with jQuery) so I'm not sure that I have written anything worthwhile so far.
Here's what I get from the encoded JSON (trimmed b/c data is massive so formatting might not be exact). I don't have any control over formatting and structure of the JSON.
var configurations = {
"lens_types":{
"25":{
"1":1,
"2":2,
"4":4,
"3":3}},
"lenses":{
"25":{
"1":{
"2":2,
"4":4,
"5":5,
"6":6,
"9":9,
"13":13},
"2":{
"4":4,
"5":5,
"6":6,
"13":13}}}
var siblings = {
"25":{
"1":{
"2":1744,
"4":1745,
"5":1747},
"6":1749,
"9":1752,
"13":1761},
"2":{
"4":1746,
"5":1748,
"6":1750,
"13":1762},
"4":{
"1":1753,
"3":1756,
"8":1759},
"3":{
"2":1754,
"3":1755,
"8":1757,
"9":1758,
"12":1760}}}
This is the generic structure of the product form:
<form method="post" action="" name="product_details">
<div id="frame_style">
<input type="radio" name="frame_style" value="1" />
<input type="radio" name="frame_style" value="3" />
<input type="radio" name="frame_style" value="11" />
<input type="radio" name="frame_style" value="24" />
<input type="radio" name="frame_style" value="25" />
<input type="radio" name="frame_style" value="27" />
<input type="radio" name="frame_style" value="2" />
<input type="radio" name="frame_style" value="8" />
<input type="radio" name="frame_style" value="45" />
<input type="radio" name="frame_style" value="77" />
<input type="radio" name="frame_style" value="89" />
<input type="radio" name="frame_style" value="13" />
</div>
<div id="lens_type">
<input type="radio" name="lens_type" value="1" />
<input type="radio" name="lens_type" value="2" />
<input type="radio" name="lens_type" value="3" />
<input type="radio" name="lens_type" value="4" />
</div>
<div id="lens_style">
<input type="radio" name="lens_style" value="1" />
<input type="radio" name="lens_style" value="2" />
<input type="radio" name="lens_style" value="3" />
<input type="radio" name="lens_style" value="4" />
<input type="radio" name="lens_style" value="5" />
<input type="radio" name="lens_style" value="8" />
<input type="radio" name="lens_style" value="9" />
<input type="radio" name="lens_style" value="12" />
</div>
</form>
Any ideas? Thanks!!
Edit
Here's the full object for both:
var configurations = {"lens_types":{"25":{"1":1,"2":2,"4":4,"3":3},"1":{"1":1,"2":2,"4":4,"3":3},"15":{"1":1,"2":2,"3":3},"26":{"1":1,"2":2,"3":3},"24":{"1":1,"2":2,"4":4,"3":3},"27":{"1":1,"2":2,"4":4,"3":3},"11":{"1":1,"2":2,"4":4,"3":3},"3":{"1":1,"2":2,"4":4,"3":3}}, "lenses":{"25":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"4":{"1":1,"3":3,"8":8},"3":{"2":2,"3":3,"8":8,"9":9,"12":12}},"1":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"4":{"1":1,"3":3,"8":8},"3":{"2":2,"3":3,"8":8,"9":9,"12":12}},"15":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"3":{"2":2,"3":3,"8":8,"9":9}},"26":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"3":{"2":2,"3":3,"8":8,"9":9}},"24":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"4":{"1":1,"3":3,"8":8},"3":{"2":2,"3":3,"8":8,"9":9,"12":12}},"27":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"4":{"1":1,"3":3,"8":8},"3":{"2":2,"3":3,"8":8,"9":9,"12":12}},"11":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"4":{"1":1,"3":3,"8":8},"3":{"2":2,"3":3,"8":8,"9":9,"12":12}},"3":{"1":{"2":2,"4":4,"5":5,"9":9},"2":{"4":4,"5":5,"6":6},"4":{"1":1,"3":3,"8":8},"3":{"2":2,"3":3,"8":8,"9":9,"12":12}}}}
var siblings = {"25":{"1":{"2":1744,"4":1745,"5":1747,"6":1749,"9":1752,"13":1761},"2":{"4":1746,"5":1748,"6":1750,"13":1762},"4":{"1":1753,"3":1756,"8":1759},"3":{"2":1754,"3":1755,"8":1757,"9":1758,"12":1760}},"1":{"1":{"2":1769,"4":1770,"5":1772,"6":1774,"9":1777,"13":1786},"2":{"4":1771,"5":1773,"6":1775,"13":1787},"4":{"1":1778,"3":1781,"8":1784},"3":{"2":1779,"3":1780,"8":1782,"9":1783,"12":1785}},"15":{"1":{"2":1794,"4":1795,"5":1797,"6":1799,"9":1802,"13":1807},"2":{"4":1796,"5":1798,"6":1800,"13":1808},"3":{"2":1803,"3":1804,"8":1805,"9":1806}},"26":{"1":{"2":1809,"4":1810,"5":1812,"6":1814,"9":1817,"13":1822},"2":{"4":1811,"5":1813,"6":1815,"13":1823},"3":{"2":1818,"3":1819,"8":1820,"9":1821}},"24":{"1":{"2":1824,"4":1825,"5":1827,"6":1829,"9":1832,"13":1841},"2":{"4":1826,"5":1828,"6":1830,"13":1842},"4":{"1":1833,"3":1836,"8":1839},"3":{"2":1834,"3":1835,"8":1837,"9":1838,"12":1840}},"27":{"1":{"2":1843,"4":1844,"5":1846,"6":1848,"9":1851,"13":1860},"2":{"4":1845,"5":1847,"6":1849,"13":1861},"4":{"1":1852,"3":1855,"8":1858},"3":{"2":1853,"3":1854,"8":1856,"9":1857,"12":1859}},"11":{"1":{"2":1862,"4":1863,"5":1865,"6":1867,"9":1870,"13":1879},"2":{"4":1864,"5":1866,"6":1868,"13":1880},"4":{"1":1871,"3":1874,"8":1877},"3":{"2":1872,"3":1873,"8":1875,"9":1876,"12":1878}},"3":{"1":{"2":1881,"4":1882,"5":1884,"9":1888},"2":{"4":1883,"5":1885,"6":1886},"4":{"1":1889,"3":1892,"8":1895},"3":{"2":1890,"3":1891,"8":1893,"9":1894,"12":1896}}}

You could do something like:
$('#frame_style input:radio').click(function(){
var val = $(this).val();
for ( var ind in configurations['lenses'][val]){
var input = '<input type="radio" name="lens_type" value="'+ind+'" >'+ind;
$('#lens_type').append(input);
}
});
$('#lens_type input:radio').live('click', function(){
var frame = $('#frame_style input:radio:checked').val();
var val = $(this).val();
for ( var ind in configurations['lenses'][frame][val]){
var input = '<input type="radio" name="lens_style" value="'+ind+'" >'+ind;
$('#lens_style').append(input);
}
});
$('#lens_style input:radio').live('click', function(){
var frame = $('#frame_style input:radio:checked').val();
var type = $('#lens_type input:radio:checked').val();
var style = $(this).val()
alert('Sku is:'+siblings[frame][type][style]);
});
the idea is to create the radios after the user select the first level. Of course this is very basic, you can try this fiddle: http://jsfiddle.net/LL3SM/ and choos 25, 1, 2 you will get an alert with the sku