Traverse object and return matching key / values - javascript
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
Related
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>
How to set checked radio button using name and attr in jquery?
I am working with some radio input and want to set them checked while edit function. I used ajax response. I have to set them checked. The code sample is following: <form> Group 1: <input type="radio" name="ans1" str="ans_a" value="1" /> <input type="radio" name="ans1" str="ans_b" value="2" /> <input type="radio" name="ans1" str="ans_c" value="3" /> <input type="radio" name="ans1" str="ans_d" value="4" /> Group 2: <input type="radio" name="ans2" str="ans_a" value="1" /> <input type="radio" name="ans2" str="ans_b" value="2" /> <input type="radio" name="ans2" str="ans_c" value="3" /> <input type="radio" name="ans2" str="ans_d" value="4" /> Group 3: <input type="radio" name="ans3" str="ans_a" value="1" /> <input type="radio" name="ans3" str="ans_b" value="2" /> <input type="radio" name="ans3" str="ans_c" value="3" /> <input type="radio" name="ans3" str="ans_d" value="4" /> </form> I get from ajax response the following: var ans_name = ans1,ans2,ans3; var str = ans_c,ans_a,ans_d; That means i have to set checked the 3rd radio input of gruop 1 and so on. How can i set checked the corresponding radio button by jquery?
Select based on attribute equals selector and update the checked property. var ans_name = 'ans1,ans2,ans3'; var str = 'ans_c,ans_a,ans_d'; // split the string into array by , var names = ans_name.split(','), val = str.split(','); // iterate over names array names.forEach(function(v, i) { // generate the selector and get jQuery object using that $('[name="' + v + '"][str="' + val[i] + '"]') // update the property .prop('checked', true); }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> Group 1: <input type="radio" name="ans1" str="ans_a" value="1" /> <input type="radio" name="ans1" str="ans_b" value="2" /> <input type="radio" name="ans1" str="ans_c" value="3" /> <input type="radio" name="ans1" str="ans_d" value="4" /> Group 2: <input type="radio" name="ans2" str="ans_a" value="1" /> <input type="radio" name="ans2" str="ans_b" value="2" /> <input type="radio" name="ans2" str="ans_c" value="3" /> <input type="radio" name="ans2" str="ans_d" value="4" /> Group 3: <input type="radio" name="ans3" str="ans_a" value="1" /> <input type="radio" name="ans3" str="ans_b" value="2" /> <input type="radio" name="ans3" str="ans_c" value="3" /> <input type="radio" name="ans3" str="ans_d" value="4" /> </form> Or generate a single selector using Array#map and Array#join methods. var ans_name = 'ans1,ans2,ans3'; var str = 'ans_c,ans_a,ans_d'; var names = ans_name.split(','), val = str.split(','); $(names.map(function(v, i) { // geneate the selector return '[name="' + v + '"][str="' + val[i] + '"]'; }) // join the selectors .join(',')) // update the property .prop('checked', true) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> Group 1: <input type="radio" name="ans1" str="ans_a" value="1" /> <input type="radio" name="ans1" str="ans_b" value="2" /> <input type="radio" name="ans1" str="ans_c" value="3" /> <input type="radio" name="ans1" str="ans_d" value="4" /> Group 2: <input type="radio" name="ans2" str="ans_a" value="1" /> <input type="radio" name="ans2" str="ans_b" value="2" /> <input type="radio" name="ans2" str="ans_c" value="3" /> <input type="radio" name="ans2" str="ans_d" value="4" /> Group 3: <input type="radio" name="ans3" str="ans_a" value="1" /> <input type="radio" name="ans3" str="ans_b" value="2" /> <input type="radio" name="ans3" str="ans_c" value="3" /> <input type="radio" name="ans3" str="ans_d" value="4" /> </form>
Explode names and value with data what you get from response and check through loop and you will get radio checked with the correct answer. var ans_name = "ans1,ans2,ans3"; var str = "ans_c,ans_a,ans_d"; var checkbox_names = ans_name.split(","); var values = str.split(","); $(checkbox_names).each(function(index, value){ $("[name='"+value+"'][str='"+values[index]+"']").prop("checked",true); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form> Group 1: <input type="radio" name="ans1" str="ans_a" value="1" /> <input type="radio" name="ans1" str="ans_b" value="2" /> <input type="radio" name="ans1" str="ans_c" value="3" /> <input type="radio" name="ans1" str="ans_d" value="4" /> Group 2: <input type="radio" name="ans2" str="ans_a" value="1" /> <input type="radio" name="ans2" str="ans_b" value="2" /> <input type="radio" name="ans2" str="ans_c" value="3" /> <input type="radio" name="ans2" str="ans_d" value="4" /> Group 3: <input type="radio" name="ans3" str="ans_a" value="1" /> <input type="radio" name="ans3" str="ans_b" value="2" /> <input type="radio" name="ans3" str="ans_c" value="3" /> <input type="radio" name="ans3" str="ans_d" value="4" />
PHP pass total value of radio button
How to count the total value of radio button within the same page and pass to another php file? The total will be count at this page and i can get the total from answer.php file. <form action="answer.php" method="POST"> <input type="radio" name="q1" value="1" />Yes <br /> <input type="radio" name="q1" value="0" />No <br /> <input type="radio" name="q2" value="2" />Yes <br /> <input type="radio" name="q2" value="0" />No <br /> <input type="radio" name="q3" value="3" />Yes <br /> <input type="radio" name="q3" value="0" />No <br /> <input type="submit" value="submit" name="submit"/> </form>
I suggest using an array to count your values. <input type="radio" name="q[]" value="2" /> <input type="radio" name="q[]" value="3" /> <input type="radio" name="q[]" value="4" /> <input type="radio" name="q[]" value="5" /> This will result in $_POST['q'] being an array. You can now do: echo "The total amount is ".array_sum($_POST['q']);
Using jQuery- it is easy, just iterate through the inputs and tally up the values. Note that I gave the form an Id so it can be targetted directly if you have other form. The total can be passed to your other page - either via AJAX or using a standard HTML form as a hidden field. Alternatively - since this is a form and you are already passing it to a PHP page - you could simply submit the form and tally up the $_POST variables on the other side. $('#testForm input').on('change', function() { var total=0; $('input[type=radio]:checked', '#testForm').each(function(){ total += parseInt($(this).val()); }) alert(total) }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="testForm" action="answer.php" method="POST"> <input type="radio" name="q1" value="1" />Yes <br /> <input type="radio" name="q1" value="0" />No <br /> <input type="radio" name="q2" value="2" />Yes <br /> <input type="radio" name="q2" value="0" />No <br /> <input type="radio" name="q3" value="3" />Yes <br /> <input type="radio" name="q3" value="0" />No <br /> <input type="submit" value="submit" name="submit"/> </form> Commented version for the OP: $('#testForm input').on('change', function() {//triggers the function on any change in the form var total=0;//initialises the total at 0 so that each round ottallying up resets before the tally $('input[type=radio]:checked', '#testForm').each(function(){//selects each input in the #testForm that is checked total += parseInt($(this).val());//adds the value of each checked radio button to the tally }) alert(total); //alerts the final tally after all iterations });
You don't need jquery for this. Add a class to your radio buttons so we can query them without risking getting other elements in the page, something like "my-radio" This javascript will get you the sum: function getRadioButtonsSum(radioClass) { var radioBtns = document.querySelectorAll(radioClass); var count = 0; var i; for (i = 0; i < radioBtns.length; i += 1) { if (radioBtns[i].checked) { count += +radioBtns[i].value; } } return count; } getRadioButtonsSum('.my-radio');
how do I select a parameter a Javascript selector?
Hi there (I'm a complete JS newbie so please no bullying) I'm trying to pass formID inside my score variable but I don't think I'm getting my selector right, can anyone tell me what I'm doing wrong ? Edit: Sorry everyone, I'm getting tired. My issue: I cannot properly select the value of my score var. JS function addScore(formId) { var show_id = $('#show_id-'+formId).val(); var user_id = $('#user_id-'+formId).val(); var score = $('input[value="tvshowrating' + formID +'"]').val(); HTML <form id="40"> <div class="your-score"> <div class="">Your Score</div> <div id="flash"></div> <input class="hover-star" type="radio" name="tvshowrating40" value="1" title="1" /> <input class="hover-star" type="radio" name="tvshowrating40" value="2" title="2" /> <input class="hover-star" type="radio" name="tvshowrating40" value="3" title="3" /> <input class="hover-star" type="radio" name="tvshowrating40" value="4" title="4" /> <input class="hover-star" type="radio" name="tvshowrating40" value="5" title="5" /> <input class="hover-star" type="radio" name="tvshowrating40" value="6" title="6" /> <input class="hover-star" type="radio" name="tvshowrating40" value="7" title="7" /> <input class="hover-star" type="radio" name="tvshowrating40" value="8" title="8" /> <input class="hover-star" type="radio" name="tvshowrating40" value="9" title="9" /> <input class="hover-star" type="radio" name="tvshowrating40" value="10" title="10" /> <input type="hidden" id="show_id-40" value="40" /> <input type="hidden" id="user_id-40" value="2" /> <span id="hover-test" style="margin:0 0 0 20px;"></span> <input id="submitscore" type="submit" value="Submit scores!" onclick="addScore(40);" /> </div> </form> </div>
You probably want the checked value: $('input[name="tvshowrating' + formID +'"]:checked').val() Here is another question that answers your problem: Get Value of Radio button group or How can I know which radio button is selected via jQuery?
You're selecting <input>s by value. You probably want input[name=....
JavaScript to create a global radio button for all subsequent radio buttons?
I have this set of labels and radio buttons that look like this: Entertainment: <input type="radio" name="entertainment" id="entertainment" value="0" checked/> <input type="radio" name="entertainment" id="entertainment" value="1" /> <input type="radio" name="entertainment" id="entertainment" value="2" /><br /> Radio: <input type="radio" name="radio" id="radio" value="0" checked/> <input type="radio" name="radio" id="radio" value="1" /> <input type="radio" name="radio" id="radio" value="2" /><br /> Dancing: <input type="radio" name="dancing" id="dancing" value="0" checked/> <input type="radio" name="dancing" id="dancing" value="1" /> <input type="radio" name="dancing" id="dancing" value="2" /><br /> Music: <input type="radio" name="music" id="music" value="0" checked/> <input type="radio" name="music" id="music" value="1" /> <input type="radio" name="music" id="music" value="2" /><br /> Television: <input type="radio" name="tv" id="tv" value="0" checked/> <input type="radio" name="tv" id="tv" value="1" /> <input type="radio" name="tv" id="tv" value="2" /><br /> Film: <input type="radio" name="film" id="film" value="0" checked/> <input type="radio" name="film" id="film" value="1" /> <input type="radio" name="film" id="film" value="2" /><br /> Theatre: <input type="radio" name="theatre" id="theatre" value="0" checked/> <input type="radio" name="theatre" id="theatre" value="1" /> <input type="radio" name="theatre" id="theatre" value="2" /> The idea is that the three 'Entertainment' radio buttons at the top control all the radio buttons below. A 'global switch', if you will, to save people time. Does anyone know the necessary JavaScript/jQuery to accomplish this? I can't find a correct example online.
$(':radio[name=entertainment]').change(function() { $(this).nextAll(':radio[value="'+ this.value +'"]').prop('checked', true); $(this).nextAll(':radio[value!="'+ this.value +'"]').prop('checked', false); }); Working sample Note ids should be unique.