HTML variable causing error in CGI file

I am having problem printing a particular variable from my cgi file. I receive this variable, called totalCost from my webpage and then try to print it, but nothing happens. All the othe开发者_运维技巧r variables can be received successfully from the webpage and printed out on another webpage via my cgi file, except for this one..i've checked for case sensitivity but that didnt help

The code in html...

<tr>  <td colspan=3 padding=2><b> Total =  $ </b> <input type= "text" id="totalCost" disabled= true name= "totalCost" size ="5" maxlength="5" value= 0.00 /> <td> <tr>

the computeCost function

<script type= "text/javascript">

function computeCost(){

var apples= document.getElementById("appleQty").value;
var oranges=document.getElementById("orangeQty").value;
var bananas=document.getElementById("bananaQty").value;

var totCostTemp=0.69*apples + 0.59*oranges + 0.39*bananas;

document.getElementById("totalCost").value= totCostTemp; 

}
</script>

In cgi file, which I write using Perl, I receive my variable in this manner:

my ($appleQty, $orangeQty, $bananaQty, $user, $cardType, $c) = (param("appleQty"), param("orangeQty"), param("bananaQty"), param("user"), param("cardType"), param("totalCost"));

then try to print out in this manner..

print header;
print start_html("Receipt"),
print h3("Fruit Store: Order Summary"),
table({-border => 2} ,caption("Your Receipt"), 
Tr([th("Name:").td($user),th("Payment Method:").td($cardType),th("Fruit Type").td("Quantity"), th("Apple").td($appleQty), th("Oranges").td($orangeQty), th("Bananas").td($bananaQty), th("Total Cost:").td($c)]));
print end_html;

Please note...all variables except totalCost get printed correctly. totalCost is not printed at all in my resultant webpage...I think this has to do with the fact that I did some computation and perhaps did not store it properly in the id. But I dont know how to resolve that..

thank you for advising!

---

Disabled fields don't get posted. So you simply need to modify the field to make it readonly. Like :

<input type="text" id="totalCost" readonly="true" name="totalCost" size ="5" value="0.00" />

If you don't like the color of the readonly field, you can use a CSS to modify it like :

<style>
    input[readonly=true] {
     color:silver;
    }
</style>

---

Or for better CSS compatibility :

<style>
    .disabled {
      color:silver;
    }
</style>

<input type="text" id="totalCost" readonly="true" name="totalCost" size ="5" value="0.00" class="disabled" />

You may also use hidden fields, but you don't have to change your current code.

---

If the <input> element is never enabled, then it will not be sent to the server when the form is posted.

If you don't want the user to be able to update the field, then don't use an ordinary "text" <input>. Put a <span> there to hold the value, and update an enabled "hidden" <input> instead.

function computeCost(){

  var apples= document.getElementById("appleQty").value;
  var oranges=document.getElementById("orangeQty").value;
  var bananas=document.getElementById("bananaQty").value;

  var totCostTemp=0.69*apples + 0.59*oranges + 0.39*bananas;

  document.getElementById("totalCost").value= totCostTemp;
  document.getElementById('totalCostView').innerHTML = '$' + totCostTemp;

}

and the page would look like:

<td>
  <span id='totalCostView'>$0.00</span>
  <input type='hidden' id='totalCost' name='totalCost' value='0.00'>
</td>