Javascript carry the variable over to next page

I am looking for a way to add up variable on the next page

[ronnieb]

I am building a calorie counter/calculator and I am stuck on carrying the variable over so that it accumulates total value (java/ajax).

So if you click on the letter A you will get a list of foods in the A group and as you modify the form you will increase your caloric value. If you choose a new food group the value is zero'd out.

I need the counter to accumulate all choices from all food options. any ideas?

I am a PHP coder and very very new to java and ajax.

FYI when you click on a letter, it calls (ajax) a .php script that generates the table based on the MySQL database.

[edited by: tedster at 10:53 pm (utc) on Dec 25, 2010]
[edit reason] member request [/edit]

[ronnieb]

FYI here is my code

Here is my <div> for showing the numbers

<div class="calorieNumbers"><!-- Here are the totals from food item choices -->
Calories <span id="calorieTotals">0</span>, 
Protein <span id="proteinTotals">0</span>g <font color="#0033CC">(<span id="proteinPercentage">0</span>%)</font>, 
Carbs <span id="carbsTotals">0</span>g <font color="#0033CC">(<span id="carbsPercentage">0</span>%)</font>, 
Fats <span id="fatsTotals">0</span>g <font color="#0033CC">(<span id="fatsPercentage">0</span>%)</font> - 
Percentages are based on 25% protein, 60% carbs, 15% fats
</div>

Here are the .js scripts

function CalculateTotal(frm) {
 var calorie_total = 0;
 var protein_total= 0;
 var carbs_total= 0;
 var fat_total= 0;

 // Run through all the form fields
 for (var i=0; i < frm.elements.length; ++i) {

 // Get the current field
 form_field = frm.elements[i]

 // Get the field's name
 form_name = form_field.name

 // Is it a "product" field?
 if (form_name.substring(0,4) == "PROD") {

 // If so, extract the totals from the name
 item_ct = parseFloat(form_name.substring(form_name.lastIndexOf("_") + 1));
 item_protein = parseFloat(form_name.substring(form_name.lastIndexOf("|") + 1));
 item_carbs = parseFloat(form_name.substring(form_name.lastIndexOf("+") + 1));
 item_fat = parseFloat(form_name.substring(form_name.lastIndexOf("-") + 1));

 // Get the quantity
 item_quantity = parseFloat(form_field.value);
 protein_quantity = parseFloat(form_field.value);
 carbs_quantity = parseFloat(form_field.value);
 fat_quantity = parseFloat(form_field.value);
 

 // Update the order total
 if (item_quantity >= 0) {
 calorie_total += item_quantity * item_ct;
 protein_total += protein_quantity * item_protein;
 carbs_total += carbs_quantity * item_carbs;
 fat_total += fat_quantity * item_fat;
 }

 }
 }

 // Display the total rounded to two decimal places
 //frm.TOTAL.value = calorie_total;
 //frm.P.value = protein_total;
 //frm.C.value = carbs_total;
 //frm.F.value = fat_total;
 var p=document.getElementById("proteinTotals");
 p.innerHTML=protein_total;
 var p=document.getElementById("proteinPercentage");
 p.innerHTML=Math.round(((protein_total*4)/calorie_total)*100);
 
 var tc=document.getElementById("calorieTotals");
 tc.innerHTML=calorie_total;
 
 var cat=document.getElementById("carbsTotals");
 cat.innerHTML=carbs_total;
 var cat=document.getElementById("carbsPercentage");
 cat.innerHTML=Math.round(((carbs_total*4)/calorie_total)*100);
 
 var ft=document.getElementById("fatsTotals");
 ft.innerHTML=fat_total;
 var ft=document.getElementById("fatsPercentage");
 ft.innerHTML=Math.round(((fat_total*9)/calorie_total)*100);

}

 
 
 function getMessageResponse(str)
{
var xmlHttp;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
 {
 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
 }
 catch (e)
 {
 try
 {
 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 catch (e)
 {
 alert("Your browser does not support AJAX! Try Mozilla FireFox Browser");
 return false;
 }
 }
 }
 xmlHttp.onreadystatechange=function()
 {
 if(xmlHttp.readyState==4)
 {
 document.getElementById('response').innerHTML=xmlHttp.responseText;
 document.myform.message.value = '';
 }
 }
 var url="show_calorie_table.php";
 url=url+"?food="+str;
 url=url+"&sid="+Math.random();
 xmlHttp.open("GET",url,true);
 xmlHttp.send(null);
 }

[edited by: tedster at 10:51 pm (utc) on Dec 25, 2010]
[edit reason] fix formatting problem [/edit]

[daveVk]

The calculator would be more useful if it contained both the selected letter entries plus prior completed (quantity not blank) entries.

You could continue with the current approach and add to the url the currently selected list.

Consider including all (a to z) items in initial page load and using js to hide (blank quantity) items not of the correct letter. Whilst the initial load may be slower, the logic is simpler, and overall speed probably better, run some timing tests if concerned.

[ronnieb]

Good Call. I ended up having AJAX call a .php page that does all the math... only problem was $_SESSION variables. Still have trouble with the page called by ajax bringing over the $_SESSION variable.. I have session_start(); on all pages... any ideas?

[daveVk]

The session is identified by cookie in request. Try some debug like alert(document.cookie) in js, and is it $_COOKIE in PHP ?. I think AJAX sends cookies the same as regular page requests.

[ronnieb]

OK, what I ended up doing was leave in my two AJAX functions that call up a PHP script... I made the PHP scripts store the data in a cookie so that it can be pulled by all other pages without losing the variables. I will have final version up next week some time...

working good on my personal server.

Thanks for the help... AJAX and JavaScript are new to me, but looks like something I want to study!