I'm trying to make a form that displays the total price on the second page of the form. I have it working in JavaScript. I want to basically do the same thing. Only in PHP. Once the customer hits the "continue" button there will be an overview of their order. So, I would want to display the "Estimated Price" above the second part of the form along with details of their order.
What currently happens is whenever the user selects "Color Front" the string value gets converted to "0" instead of being "Color Front". And it repeats the process for the rest of the form values that need to be replaced with a corresponding price. Then the values just get added together to produce the final total.
Here is the JavaScript of the Order Calculation:
var color = {
"Color Front":0,
"Color Front and Back":20,
"Color Front and Black Back":10
};
var quantity = {
"100":0,
"250":45,
"500":50,
"1,000":60,
"2,500":75,
"5,000":110,
"10,000":200
};
function count() {
var price = document.getElementById("total")
var item1 = Number(quantity[document.bcquote.quantity.value]);
var item2 = Number(color[document.bcquote.color_printing.value]);
if(!item1) {
price.innerHTML = "Free*"; // when 0 is used as a conditional evaluation, javascript convert it to false. but this line convert the boolean to true;
document.getElementById("disclaimer").style.display = 'block';
}
else {
price.innerHTML = "$ " + (item1 + item2).toFixed(2);
document.getElementById("disclaimer").style.display = 'none';
}
}
and the HTML of the form
<form action="" method="post" enctype="multipart/form-data" class="quote-form" name="bcquote">
<table border="0" cellspacing="0" cellpadding="0" class="quote">
<tr>
<td colspan="2" class="quote-ttl">FULL COLOR BUSINESS CARDS</td>
</tr>
<tr>
<td class="td1"><label for="quantity">Quantity:</label></td>
<td class="td2"><select name="quantity" class="field" id="quantity" onChange="setOptions(document.bcquote.quantity.value);count();">
<option value="100">100</option>
<option value="250">250</option>
<option value="500">500</option>
<option value="1,000" selected>1000</option>
<option value="2,500">2,500</option>
<option value="5,000">5,000</option>
<option value="10,000">10,000</option>
</select></td>
</tr>
<tr>
<td class="td1"><label for="papertype">Paper Type:</label></td>
<td class="td2">
<select name="papertype" class="field" id="papertype">
<option value=" "></option>
</select>
</td>
</tr>
<tr>
<td class="td1"><label for="ColorPrinting">Color/Printing:</label></td>
<td class="td2">
<select name="color_printing" class="field" onchange="count();">
<option value="Color Front">Color Front Only</option>
<option value="Color Front and Back">Color Front & Back</option>
<option value="Color Front and Black Back">Color Front & Black Back</option>
</select>
</td>
</tr>
</table>
<div style="padding-top: 10px;">
<span style="float: left; font-size: 1.2em;">Estimated Price: </span><span id="total"> </span></div>
<div style="height: 20px; padding-top: 5px; text-align: center;">
<span id="disclaimer" style="display: none;">*Printing is free with paid design.</span></div>
<div style="text-align: right; margin-top: 5px;">
<input type="image" name="Continue" id="Continue" value="Continue" src="images/continue.gif" width="120px" height="30px">
</div>
</form>
And here is what I have so far.. I am completely lost.. It seems like it was such a simple thing to do in JavaScript.. And it shouldn't be so difficult with PHP.. But.. I have no clue..
$quantity = $_POST['quantity'];
$color = $_POST['color_printing'];
$quantity_replace = array(
"100"=>0,
"250"=>45,
"500"=>50,
"1,000"=>60,
"2,500"=>75,
"5,000"=>110,
"10,000"=>200);
$color_replace = array('Color Front'=> '0',
'Color Front and Back' => '20',
'Color Front and Black Back'=> '10');
$color_num = str_replace(array_keys($color_replace), $color_replace, $color);
$total = $quantity + $color_num;
echo "$total, ";
echo $color_num;
echo $color;
echo $quantity;