Minklet Posted December 28, 2010 Share Posted December 28, 2010 Hi, I'm a bit new to javascript, so Im having a bit of trouble figuring out the theory of this. I am trying to write a educational website for a cooking class (uni assignment). What I want to have happen is that the student selects their ingredients using a series of checkboxes. As they do this, the running total of price, calories, fat, protien, carbs etc (as many values as feasibly possible) will add to their corresponding running total. I can do this with just price, as I just add it to the value part of the html and total it each time there is a state change. What I was thinking for doing this would be to add an array of values to the value of the checkbox, then take use javascript to get each value and add it to the correct part. However, I have no clue how to do that. Anyone know how I can do this? Or can point me in the right direction? Quote Link to comment https://forums.phpfreaks.com/topic/222803-multiple-values-to-one-checkbox/ Share on other sites More sharing options...
Minklet Posted December 28, 2010 Author Share Posted December 28, 2010 Or Im thinking that I would assign all of these values to variables in javascript, then when each selection is made it checks which selection it is, takes the corresponding variables and adds them to a running total. Again, however, I don't really know how I would do this. Would I have an if statement saying if value is (eg) cheese is checked then, variable1= "foo", variable2="bar", if not checked then value is 'NULL' Then add these variables to a running total? Is there a function that adds all variables together? The actual code doesn't have to be to the best standard, as the code is not marked. So Im not worries about it being the best practice. Quote Link to comment https://forums.phpfreaks.com/topic/222803-multiple-values-to-one-checkbox/#findComment-1152068 Share on other sites More sharing options...
Minklet Posted December 28, 2010 Author Share Posted December 28, 2010 No one fancy helping here? I tried what I said, but I cant get javascript to actually know which checkbox is which, it keeps having a paddy. I tried the array value (ie document.selection.selections[0].checked for the first one) but it says it is not defined. Quote Link to comment https://forums.phpfreaks.com/topic/222803-multiple-values-to-one-checkbox/#findComment-1152227 Share on other sites More sharing options...
brianlange Posted December 28, 2010 Share Posted December 28, 2010 I would create an array and just use the value as an index and refer to it accordingly for the various values. <script> var protein = 0; var calories = 0; var foods = []; foods['chocolate'] = {'calories': 100, 'protein': 6}; foods['hamburger'] = {'calories': 400, 'protein': 13}; function goFood(obj) { document.getElementById('protein').innerHTML = foods[obj.value].protein; } </script> <form action="#"> Chocolate <input type="checkbox" name="chocolate" value="chocolate" onclick="goFood(this);" /> Hamburger <input type="checkbox" name="hamburger" value="hamburger" onclick="goFood(this);" /> </form> Here's where I put my code: http://www.realtown.com/test34.php Quote Link to comment https://forums.phpfreaks.com/topic/222803-multiple-values-to-one-checkbox/#findComment-1152254 Share on other sites More sharing options...
brianlange Posted December 28, 2010 Share Posted December 28, 2010 Here's a more robust solution that includes a javascript closure so that the values add up and decrease appropriately when the checkbox is clicked. Working example at http://www.realtown.com/test35.php <html> <head><title>Food</title> <script> var goFood = function(obj) { var protein = 0; var calories = 0; var fat = 0; var foods = []; foods['chocolate'] = {'calories': 100, 'protein': 6, 'fat': 22}; foods['hamburger'] = {'calories': 400, 'protein': 13, 'fat': 14}; foods['pasta'] = {'calories': 200, 'protein': 5, 'fat' : 1}; var setDietaryValues = function(obj) { if (obj.checked) { protein += foods[obj.value].protein; document.getElementById('protein').innerHTML = protein; calories += foods[obj.value].calories; document.getElementById('calories').innerHTML = calories; fat += foods[obj.value].fat; document.getElementById('fat').innerHTML = fat; } else { protein -= foods[obj.value].protein document.getElementById('protein').innerHTML = protein; calories -= foods[obj.value].calories; document.getElementById('calories').innerHTML = calories; fat -= foods[obj.value].fat; document.getElementById('fat').innerHTML = fat; } } return setDietaryValues; }; var myFood = goFood(); </script> </head> <body> <form action="#"> Chocolate <input type="checkbox" name="chocolate" value="chocolate" onclick="myFood(this);" /> Hamburger <input type="checkbox" name="hamburger" value="hamburger" onclick="myFood(this);" /> Pasta <input type="checkbox" name="pasta" value="pasta" onclick="myFood(this);" /> </form> Total Protein <div id="protein" style="height: 40px;"> </div> Total Calories <div id="calories" style="height: 40px;"> </div> Total Fat <div id="fat" style="height: 40px;"> </div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/222803-multiple-values-to-one-checkbox/#findComment-1152268 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.