Move Javascript Var to PHP

[microtribe]

Hi,

I have a Javascript total calculation function within a php form that uses onBlur to show the client a running total of the dollar amount of items added: http://www.microtribe.com/dev4Tony/order881x2.php

And I have a linked external PHP file/script to email the results of the form to me. All works fine but I can't figure out how to grab the total dollar amount ("sub_total") created by the Javascript with this line:
document.getElementById('sub_total').innerHTML = '$ ' + runningTotal.toFixed(2);

Is there a way to have the Javascript send this variable to my php script?

Here is the full Javascript Function:

/Addition Function
/
var elements = new Array();

function calculatePrice(price,me,id) {
var newValue = 0;
if (me.value == 0) {
document.getElementById('total' + id).innerHTML = '';
} else if (me.value > 0) {
newValue = price * me.value;
document.getElementById('total' + id).innerHTML = newValue.toFixed(2);
}

elements['total' + id] = newValue.toFixed(2);

calculateTotal();

}

function calculateTotal() {
var runningTotal = 0;
for (var strCurrentKey in elements) {
runningTotal += parseFloat(elements[strCurrentKey]);
}

var sub = runningTotal.toFixed(2);
var tax = sub * 0.00;
var total = sub * 1.08375;

document.getElementById('sub_total').innerHTML = '$ ' + runningTotal.toFixed(2);
document.getElementById('tax').innerHTML = '$ ' + tax.toFixed(2);
document.getElementById('grand_total').innerHTML = '$ ' + total.toFixed(2);

document.getElementById('field_subtotal').value = runningTotal.toFixed(2);
document.getElementById('field_tax').value = tax.toFixed(2);
document.getElementById('field_total').value = total.toFixed(2);

}

/Parse number to currency format:
By Website Abstraction (www.wsabstract.com)
and Java-scripts.net (www.java-scripts.net)
/

//Remove the $ sign if you wish the parse number to NOT include it
var wd;
function parseelement(tempnum){
wd="w";
for (i=0;i<tempnum.length;i++){
if (tempnum.charAt(i)=="."){
wd="d";
break;
}
}
if (wd=="w") {
return tempnum+".00";
} else {
if (tempnum.charAt(tempnum.length-2)==".") {
return tempnum+"0";
} else {
tempnum=Math.round(tempnum*100)/100;
return tempnum;
}
}
}

Thanks!
Tony

[rsmith]

What if you stored the value of your calculation in question into a hidden form variable and then use $POST or $GET to pull it down into your php script?

[microtribe]

That's sounds like a great idea. I just don't know how to do it...I tried executing it myself and didn't get it quite right...

[rsmith]

I'm not great with JS but try this:

<input type="hidden" name="sub_total" value="javascript:document.getElementById('sub_total').innerHTML = '$ ' + runningTotal.toFixed(2);">

Then for the PHP just do

$sub_total = $_POST['sub_total'];

Hope this helps.

[microtribe]

Ok I tried it and I get this in my response email in the place where the total should appear: javascript:document.getElementById(\'sub_total\').innerHTML = \'$ \' + runningTotal.toFixed(2);

So it looks like we just need to change that piece...any ideas?

[rsmith]

Okay it didn't compute the value it literally just sent you the code. What if you tried:

<script language="javascript">
   document.write('<input type="hidden" name="sub_total" value="document.getElementById(\'sub_total\')innerHTML = \'$ \' + runningTotal.toFixed(2);"');
</script>

This will cause JS to write the hidden form tag at the end of the form and should pass the variable as the value of sub_total. Again I'm not good at JS so I'm trying my best.

[stijnm]

Can't you just change the value of your hidden field at the end of your calculation function?

document.getElementById('hidden_sub_total').value = '$ ' + runningTotal.toFixed(2);

btw: wouldn't call both the hidden field and the display box 'sub_total', never know what your browser is gonna do with them.

[microtribe]

stijnm: thanks but your suggestion isn't working - maybe because of something I don't quite understand yet about the way to get the javascript calculation to the php script.

rsmith: thanks for trying, but still not there yet.

t.

[stijnm]

Can't you change the element where you show your total into a readonly formfield? Set the value property of it, instead of using innerHTML. That way, your total would be sent to your PHP script along with all the other fields as POST or GET.

Another small flaw: You will have to empty the total on the onReset event of your form. Right now the numbers just keep on adding up, even after the form was reset.

[microtribe]

Thanks. That didn't work either.

Re: the onReset comment - I don't know how to fix that. The total is created using a Javascript function.

This line from the Javascript:
document.getElementById('sub_total').innerHTML = '$ ' + runningTotal.toFixed(2);

fills in this div tag:
<div class="price" id="sub_total" name="sub_total"> $0.00</div>

Thanks,

t.

[microtribe]

Just tried:

In js script:
document.getElementById('subtotal').value = '$ ' + runningTotal.toFixed(2);
On HTML form:
<input type="hidden" name="subtotal" value="">
In php script:
$sub_total = $_POST['subtotal'];

Didn't work...

[stijnm]

Hi,

Is your hidden field inside the form you're sending? Normally it should work the same way all the other fields work.

You do get the elements by id, but your field hasn't got an id, just a name. Maybe there's a problem with your browser there. Try and set identical name and id , but I don't think hat's the problem.

As for the reset event: just add 'onReset="myFunction();"' to the form tag; where myFunction should set the total to 0 and empty the div or field displaying it.

document.getElementById('sub_total').innerHTML = '';

[microtribe]

So it won't work to move the Javascript total into a hidden field - as below (which I tried):

In js script:
document.getElementById('subtotal').value = '$ ' + runningTotal.toFixed(2);
On HTML form:
<input type="hidden" id="subtotal" name="subtotal" value="">
In php script:
$sub_total = $_POST['subtotal'];

I am guessing it isn't possible, although I don't understand why I can get that total into a div tag, and not into a hidden field that I can then $_POST to my php form.

This part works:

js script:
document.getElementById('sub_total').innerHTML = '$ ' + runningTotal.toFixed(2);

HTML form:
<div class="price" id="sub_total" name="sub_total"> $0.00</div>

And using onBlur to call the js function, the total is updated everytime someone tabs out of a qty field.

So why can that total make it to the div tag and not the hidden field? If I could just get it to the hidden field, I could pass it to the php script...right?

Also - I'm confused by the naming of the js code getElementById. It seems like this code is "putting" my subtotal (the runningTotal.toFixed(2) piece?) into the div tag - correct? So I don't understand why it is call "getElement". I'm assuming that I don't really understand what's happening. Can someone explain?

Thanks for your help.

P.S. At this point I've spent a million hours on this project, just trying to figure out this last piece, so if someone has a better suggestion for how to have implemented this, I'd appreciate learning to do it the "right" way...

I have an order form that needs to calculate a running total of items ordered, and show the totals as they go (all on one page) and then send all the info by email once the order is complete. (no payment function needed).

[stijnm]

Puzzles me as well.

Have you tried checking if the value of your hidden field was actually updated? Something like

<a href="javascript:window.alert(document.getElementById('subtotal').value);">click</a>

If your alert has the right value, Your mistake is not in the javaScript.

I would triplecheck if the hidden field is actually inside the form you're submitting. Also sure there are no other elements on the page with the 'subtotal' id?

[microtribe]

hidden field is between the form tags...

js definitely is the issue - I did the test you recommended and it's returning nothing. Also, if I enter a static value in the hidden field, like value="12", that value WILL $_POST to the php script, so I know that piece is working...

[stijnm]

Sorry,

I don't see it either.

As for :

It seems like this code is "putting" my subtotal (the runningTotal.toFixed(2) piece?) into the div tag - correct? So I don't understand why it is call "getElement".

The getElementById() method doesn't do a thing but returning the element you're looking for. From there on, you can set this element's properties. Maybe this is more graphical :

myElement = document.getElementById('myDiv');
myElement.innerHTML = 'some text';
myElement.style.backgroundColor = '#FF0000';

So the method does actually get something.

Sorry I can't be more helpful.