"document.getElementById ('total').value = Total;" Not Submitted In Form Post?

I have a issue with a javascript code that I wrote. This script is a simply for calculating the summation of 2 text input boxes and printing it in another text input box within the form. The entire form is then sent using Form post.The total is written back to the form's total text input box using the code below:

document.getElementById ('total').value = total

This code works perfectly for displaying the values on screen. However, when I send the form (PHP Post), the " total " field is empty. I have searched all over for possible solutions. But no solution yet.

1. document.getElementById ('total').INNERHTML = total .This does not even work on screen and total field is not updated on screen. Needless to say, the PHP Post variable was also empty.