Post variable from JavaScript to PHP with form

Question

I'm very new to scripting and programming and I need some help at this moment.

I have a form with some dropdown boxes for selecting several options. I've written a javascript that calculates a total price based on the selected options from the dropdown boxes. The total value is returned correctly, but i'm having a hard time posting this value with the form. I've tried a hidden input type, but that does not work either. The post goes to a php file, that in the end must insert the value in de database.

HTML

<form id="vmPrice" class="form-horizontal" method="post" 
action="create_xml.php">
<div class="control-group">
<label class="control-label" for="formattedTotalPrice">Costs:</label>
<div class="controls">
<input type="hidden" name="postPrice" id="postPrice" value="">
&euro; <span id="formattedTotalPrice" name="formattedTotalPrice" >...</span> 
/month <br/>
<span style="font-size: 10px;"> By clicking on Create VM a subscription with 
the above costs will be automaticly added to your account </span>
</form>

JavaScript

function calculateTotal()
{
 var unformattedTotalPrice = getVcpuPrice() + getOsPrice() + getHddPrice() + 
 getMemoryPrice() + getHAPrice();
 var formattedTotalPrice = unformattedTotalPrice;
 document.getElementById('formattedTotalPrice').innerHTML = 
 formattedTotalPrice;
 document.getElementById('postPrice').innerHTML = formattedTotalPrice;
}

The formattedTotalPrice is displayed correctly on the screen with use of the span id. Now I would like to post this with the form, but is does not work.

PHP code (create_xml.php)

$price = (int)$_POST['formattedTotalPrice'];
// or
$price = (int)$_POST['postPrice'];
print $price;

The printed value at this moment is 0.

• Rotimi: span wont get posted to the php side. It just cannot work like that. Use input
• miepperd: But what about the <input type="hidden" name="postPrice" id="postPrice" value=""> ? That does not work either.
• Rotimi: That won't work as you are also passing span as well. <span id="formattedTotalPrice" name="formattedTotalPrice" >...</span> Wrong.. Just use input and then pass value to value attribute. Use span to display to the user not to send to php
• IncredibleHat: Is it intentional to turn a price into an INT? Are they always whole numbers, with no cents etc?
• James: Wait wait. You should calculate the total price again on the server in PHP code, based on the id of the item they are purchasing and the quantity - the unit price and the total price should be calculated in PHP. Otherwise, someone could spoof the "total" and send it to your server and who knows what happens then, they pay 1ドル for a 1000ドル item.

Answer 1

You're setting the innerHTML attribute. Use value instead to change the value of an input element.

document.getElementById('postPrice').value = formattedTotalPrice;

While innerHTML can be used to change the page's HTML content, it's the value of HTML input elements that gets sent to PHP from the form.

• miepperd: This is a great answer, it works. Now I just have to figer out if it will work with decimal number as well. Thankyou so much.
• andrewgu: @miepperd I didn't correct that issue because it wasn't asked in your question. Your PHP casts everything to ints, you can change them to floats instead if you want to accept decimals. To get more general help with other problems in your code, check out StackExhange CodeReview