Update input field on checkbox selection with Javascript - javascript
I would like two things to happen.
One
when a selection is made the input field updates as the total,
Two
the check boxes are dynamically generated and may sometimes be up to
six and sometimes as low as one product.
This is what I have made, but I can't get it to work :(
<script type="text/javascript">
function updateTotal(){
document.getElementById('total').value =
(document.getElementById('date0').checked?
parseFloat(document.getElementById('date0').price):0) +
(document.getElementById('date1').checked?
parseFloat(document.getElementById('date1').price):0) +
(document.getElementById('date2').checked?
parseFloat(document.getElementById('date2').price):0);
}
</script>
With this as form
<form>
<td id="datecontainer" onchange="Process(this.options[this.selectedIndex].value)">
<input id="date0" type="checkbox" name="form[date]" value="blue" price="10" onChange="javascript:updateTotal();">product 1<br />
<input id="date1" type="checkbox" name="form[date]" value="green" price="30" onChange="javascript:updateTotal();">product 2<br />
<input id="date2" type="checkbox" name="form[date]" value="red" price="50" onChange="javascript:updateTotal();">product 3<br />
</td>
<td>
Total cost is:
<input name="total" id="total" type="text" readonly="readonly" style="border:0px;">
</td>
</form>
Any help will be great!
You can do this by changing your code and markup as follows:
HTML
<td id="datecontainer" onchange="Process(this.options[this.selectedIndex].value)">
<input id="date0" type="checkbox" name="form[date]" value="blue" data-price="10" onChange="updateTotal();">product 1<br />
<input id="date1" type="checkbox" name="form[date]" value="green" data-price="30" onChange="updateTotal();">product 2<br />
<input id="date2" type="checkbox" name="form[date]" value="red" data-price="50" onChange="updateTotal();">product 3<br />
</td>
<td>
Total cost is:
<input name="total" id="total" type="text" readonly="readonly" style="border:0px;">
</td>
JS
function updateTotal(){
var date0 = document.getElementById('date0');
var date1 = document.getElementById('date1');
var date2 = document.getElementById('date2');
var amount = 0;
amount += date0.checked ? parseFloat(date0.getAttribute('data-price')) : 0;
amount += date1.checked ? parseFloat(date1.getAttribute('data-price')) : 0;
amount += date2.checked ? parseFloat(date2.getAttribute('data-price')) : 0;
document.getElementById('total').value = amount;
}
A couple of things to note:
You do not need to include the javascript: before the function in the onchanged attribute.
You should prefix custom attributes with the data-* prefix.
You should surround your td tags with tr and table. The way that you are using them it would make more send to use an ul tag with li children.
DEMO - http://jsfiddle.net/9mxh5/
If the checkboxes are dynamically generated and you don't know how many you may have:
HTML
<td id="datecontainer" onchange="Process(this.options[this.selectedIndex].value)">
<input id="date0" type="checkbox" name="form[date]" value="blue" data-price="10" onChange="updateTotal(this);">product 1<br />
<input id="date1" type="checkbox" name="form[date]" value="green" data-price="30" onChange="updateTotal(this);">product 2<br />
<input id="date2" type="checkbox" name="form[date]" value="red" data-price="50" onChange="updateTotal(this);">product 3<br />
</td>
<td>
JS
var amount = 0;
function updateTotal(element){
var price = parseFloat(element.getAttribute('data-price'));
amount += element.checked ? price : price*(-1);
document.getElementById('total').value = amount;
}
DEMO - http://jsfiddle.net/9mxh5/2/
Related
Use JavaScript checkbox value in HTML
I'd like to be able to use a total amount generated using javascriptand displayed on the page in a <span> field later on in an HTML form. The checkbox additions and subtractions work correctly, I have no issue with that. What I have not been able to figure out is how to use that value later on in an HTML field (shown below as the PayPal code).
I have this in the <head> which handles the javascript:
<head>
<script type="text/javascript">
var total = 0.00;
function test(item) {
if (item.checked) {
total += parseFloat(item.value);
} else {
total -= parseFloat(item.value);
}
//alert(total);
document.getElementById('Totalcost').innerHTML = total.toFixed(2);
}
</script>
</head>
The this adds/subtracts if a check box is checked:
<td class="column-3">
<br>
<label class="container">
<input type="checkbox" name="Shoes" value="2.95" onClick="test(this);">Select<span class="checkmark"></span>
</label>
</td>
<td class="column-3">
<br>
<label class="container">
<input type="checkbox" name="Clothes" value="2.95" onClick="test(this);">Select<span class="checkmark"></span>
</label>
</td>
Then I display the total with this:
Total Amount: $<span id="Totalcost">0.00</span>
All of this works correctly and checking/unchecking reflects on the Total Amount shown at the bottom of the page.
What I'd like to do is use the total amount that is show in the HTML below for the PayPal subscription link so that the amount is added into the
line.
<form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="business" value="myemailaddress.com">
<input type="hidden" name="item_name" value="Shows & Clothes">
<input type="hidden" name="item_description" value="Shows & Clothes">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="no_shipping" value="1">
<input type="image" src="http://www.paypal.com/en_GB/i/btn/x-click-but20.gif" border="0" name="submit" alt="Make payments with PayPal - it\'s fast, free and secure!">
<input type="hidden" name="a3" value="TOTAL_AMOUNT">
<input type="hidden" name="p3" value="1">
<input type="hidden" name="t3" value="M">
<input type="hidden" name="src" value="1">
<input type="hidden" name="sra" value="1">
</form>
Is it possible to capture the 'totalcost' and have it dynamically added to the "a3" field in the PayPal form (where it says TOTAL_AMOUNT) for when the customer clicks the PayPal button it already has the correct value/amount in the form?
Thank you.
You can use document.getElementsByName. By default you'll get a NodeList. For example:
var a3 = document.getElementsByName("a3")[0];
a3.value = total.toFixed(2);
You can easily update its value.
Something like this:
var total = 0.00;
function test(item) {
if (item.checked) {
total += parseFloat(item.value);
} else {
total -= parseFloat(item.value);
}
document.getElementById("Totalcost").innerHTML = total.toFixed(2);
var a3 = document.getElementsByName("a3")[0];
a3.value = total.toFixed(2);
}
<form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="business" value="myemailaddress.com">
<input type="hidden" name="item_name" value="Shows & Clothes">
<input type="hidden" name="item_description" value="Shows & Clothes">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="no_shipping" value="1">
<input type="image" src="http://www.paypal.com/en_GB/i/btn/x-click-but20.gif" border="0" name="submit" alt="Make payments with PayPal - it\'s fast, free and secure!">
<input type="hidden" name="a3" value="TOTAL_AMOUNT">
<input type="hidden" name="p3" value="1">
<input type="hidden" name="t3" value="M">
<input type="hidden" name="src" value="1">
<input type="hidden" name="sra" value="1">
</form>
<table>
<tr>
<td class="column-3">
<br>
<label class="container">
<input type="checkbox" name="Shoes" value="2.95" onClick="test(this);">Select<span class="checkmark"></span>
</label>
</td>
<td class="column-3">
<br>
<label class="container">
<input type="checkbox" name="Clothes" value="2.95" onClick="test(this);">Select<span class="checkmark"></span>
</label>
</td>
</tr>
</table>
<span id="Totalcost">0.00</span>
Check and summed if two or more checkbox is checked
I have an 4 input checkbox tag, and 1 div tag to display a price if one checkbox is checked <input type="checkbox" value="None" id="check1" /> <input type="checkbox" value="None" id="check2" /> <input type="checkbox" value="None" id="check3" /> <input type="checkbox" value="None" id="check4" /> <div id="price"></div> What i want to do if only 1 random checkbox is checked it will display number 1,800 on div#price, but if 2 checkbox is checked it will summed become 3,600 and so on until 4 checkbox. But i really confused how to do that using jQuery. Any idea?
Use :checkbox selector to assign change event on all thre type = checkbox elements, one can add [value="None"] while selecing checkbox elements to be more specific.
Use :checkbox:checked selector to select the checked checkboxes.
var val = 1800;
$(':checkbox[value="None"]').on('change', function() {
var len = $(':checkbox:checked').length;
$('#price').text(len * val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="checkbox" value="None" id="check1" />
<input type="checkbox" value="None" id="check2" />
<input type="checkbox" value="None" id="check3" />
<input type="checkbox" value="None" id="check4" />
<div id="price"></div>
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="checkbox" value="100" id="check1" />
<input type="checkbox" value="21" id="check2" />
<input type="checkbox" value="22" id="check3" />
<input type="checkbox" value="4" id="check4" />
<div id="price"></div>
JAVASCRIPT
var price=0;
$(':checkbox').on('change', function() {
var len = parseInt(this.value);
if($(this).is(':checked')){
price+=len;
}else{
price-=len;
}
console.log(price)
$('#price').text(price);
});
JSBIN
JSBIN-URL
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)
});
How to sum value of radio button and checkbox in jquery
I have a code already working which calculates the sum of the radio buttons. I changed my mind in one of the radio button group and decided to make it a checkbox. When I tick items on the checkbox, the sum returns NaN. What would I add/change in my jquery in order for it to recognize the checkbox value?
Here's my code:
JQuery
< script type = "text/javascript" >
function calcscore() {
$(".calc:checked").each(function() {
score += parseInt($(this).val(), 10);
});
$('#price').text(score.toFixed(2));
$("input[name=sum]").val(score)
}
$().ready(function() {
$(".calc").change(function() {
calcscore()
});
});
< /script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<li>
<label>
<input class="calc" type="radio" name="rad1" id="rad1" />
</label>
<input type="hidden" name="rad1" value="100">
</li>
<li>
<label>
<input class="calc" type="checkbox" name="check1" id="check1" value="200" />
</label>
<input type="hidden" name="check1" value="200">
</li>
<p>Total: PHP <span id="price">0</span>
</p>
Appreciate all the help.
This code code should answer your question:
function calcscore() {
score = 0;
$(".calc:checked").each(function () {
score += Number($(this).val());
});
$("#price").text(score.toFixed(2));
$("#sum").val(score)
}
$().ready(function () {
$(".calc").change(function () {
calcscore()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<li>
<label>
<input class="calc" type="radio" name="rad1" id="rad1" value="100" />
</label>
</li>
<li>
<label>
<input class="calc" type="checkbox" name="check1" id="check1" value="200" />
</label>
</li>
<input type="hidden" name="sum" id="sum" value="0">
<p>Total: PHP <span id="price">0</span>
</p>
for your markup and usecase as it stands now in the question.try this
$('.calc').on('click', function() {
var sum = 0;
$('.calc:checked').each(function() {
sum += Number($(this).parent().next().val())
})
$('#price').text(sum)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<li>
<label>
<input class="calc" type="radio" name="rad1" id="rad1" />
</label>
<input type="hidden" name="rad1" value="100">
</li>
<li>
<label>
<input class="calc" type="checkbox" name="check1" id="check1" value="200" />
</label>
<input type="hidden" name="check1" value="200">
</li>
<p>Total: PHP <span id="price">0</span>
</p>
try this,you dont need hidden fields for values.i removed them and used value property of checkbox.
$('.calc').on('click', function() {
var sum = 0;
$('.calc:checked').each(function() {
sum += Number($(this).val())
})
$('#price').text(sum)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<li>
<label>
<input class="calc" type="checkbox" name="check1" value="100" id="rad1" />
</label>
</li>
<li>
<label>
<input class="calc" type="checkbox" name="check1" value="200" id="check1" value="200" />
</label>
</li>
<p>Total: PHP <span id="price">0</span>
</p>
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