Good afternoon everyone,
I have an application, well, it’s a quote script, part of my learning projects with PHP. I was told this have to be done with Javascript, so I am posting it in here.
Here is the link: http://www.patrickjudson.com/applications/QuoteSystem/QuoteScript.php
The user selects Items and click on the get quote tab and a quote is provided.
Now I’m trying to learn PHP before going on a date with Javascript.
However, I am wondering how can I make the quotes occur and calculate on click. Lets say the user adds an item by clicking on a radio button or check box and the price instantly changes rather then submitting the form every time.
Here is the complete code:
<?php
//Because web browsers don't automatically re-select the previous option after the form is submitted, we have to do it ourselves
function getSelected($inputName, $val) {
//$error is not a global variable, and therefore not accessable from our function. We have to declare it a global.
global $error;
//If there were no errors with this input, the input is set, and it equals the correct value
if(empty($error[$inputName]) && !empty($_POST[$inputName]) && $_POST[$inputName] == $val) {
echo' selected="selected"';
}
}
//A similar function for checkboxes
function getChecked($inputName) {
global $error;
if(empty($error[$inputName]) && !empty($_POST[$inputName])) {
echo' checked="checked"';
}
}
//Another similar function for radios
function getCheckedR($inputName, $val) {
global $error;
if(empty($error[$inputName]) && !empty($_POST[$inputName]) && $_POST[$inputName] == $val) {
echo' checked="checked"';
}
}
//Database variables
$host = '';
$user = '';
$pass = '';
$database = '';
//Connect to database -- you might want to look at the mysql_connect and mysql_select_db functions in the php manual. The "or die(mysql_error())" part will throw an error if it has trouble connecting. mysql_error is another useful function -- you should look it up.
$conn = mysql_connect($host, $user, $pass)
or die (mysql_error());
mysql_select_db($database,$conn)
or die(mysql_error());
//Create an SQL statement to grab all the priceName's and priceAmnt's from the database.
$priceSQL = '
SELECT priceName, priceAmnt
FROM prices';
//Put it in to a query
$priceQuery = mysql_query($priceSQL);
//Loop through all of the rows and create an associative array with all the prices
while($price = mysql_fetch_assoc($priceQuery)) {
$prices[$price['priceName']] = $price['priceAmnt'];
//The final result will be something like $prices['clubSandwich'] = 10.00
}
//Set our quote variable so we can add to it later
$quote = 0000.00;
//Check if the submit button was sent. There is an _x at the end because when using images as inputs, the form sends the x and y coordinates of the point the user clicked the image
if(isset($_POST['submitQuote_x'])) {
//If it was set, the form was submitted, so we can begin validation
//First we'll make sure they selected a sandwich
//So, if the variable containing the sandwich is empty...
if(empty($_POST['sandwich'])) {
//Store it in an error array. We'll get back to this later
$error['sandwich'] = 'Please select a sandwich.';
//Otherwise, check to see if any invalid values were sent
} elseif($_POST['sandwich'] != 'clubSandwich' && $_POST['sandwich'] != 'tunaSandwich' && $_POST['sandwich'] != 'chickenSandwich') {
//If so, we'll set another error
$error['sandwich'] = 'Invalid value passed for sandwich';
//Otherwise, all else checks out
} else {
//So we add to the quote with the prices stored in the array
$quote += $prices[$_POST['sandwich']];
}
//Next we'll add to the quote based on what the person wants on the sandwich
//If all of the checkboxes are empty..
if(empty($_POST['onions']) && empty($_POST['olives']) && empty($_POST['pickles']) && empty($_POST['peppers']) && empty($_POST['noCond'])) {
//Throw an error
$error['condiments'] = 'Please select a condiment.';
//If any of the condiments are checked off and none is as well...
} elseif((!empty($_POST['onions']) || !empty($_POST['olives']) || !empty($_POST['pickles']) || !empty($_POST['peppers'])) && !empty($_POST['noCond'])) {
//Throw an error
$error['condiments'] = 'Please select a condiment.';
//Otherwise add the prices to the quote
} else {
//If the checkbox for the onions was checked (meaning, not empty)
if(!empty($_POST['onions'])) {
//Add to the quote the price of the onions
$quote += $prices['onions'];
}
//Same thing, only with olives
if(!empty($_POST['olives'])) {
//Add to the quote the price of the olives
$quote += $prices['olives'];
}
//Now with pickles
if(!empty($_POST['pickles'])) {
//Add to the quote the price of the pickles
$quote += $prices['pickles'];
}
//And finally peppers
if(!empty($_POST['peppers'])) {
//Add to the quote the price of the peppers
$quote += $prices['peppers'];
}
}
//Now we'll check if the person wants a drink with their order
//First we make sure they entered something
if(empty($_POST['drinks'])) {
//If it was empty, set an error
$error['drinks'] = 'Please select if you want a drink or not.';
//If it isn't empty, then check to see if they want a drink (1 == yes in this case)
} elseif($_POST['drinks'] == '1') {
//Now make sure they selected a drink
//If all three are emtpy
if(empty($_POST['dietCoke']) && empty($_POST['sprite']) && empty($_POST['drPepper'])) {
//We throw an error
$error['selectDrink'] = 'Please select your drinks.';
//Otherwise, we'll start adding all the selections to the quote
} else {
//If the checkbox for Diet Coke was checked...
if(!empty($_POST['dietCoke'])) {
//Add it to the quote
$quote += $prices['dietCoke'];
}
//Same with sprite...
if(!empty($_POST['sprite'])) {
//Add it to the quote
$quote += $prices['sprite'];
}
//And Dr. Pepper...
if(!empty($_POST['drPepper'])) {
//Add it to the quote
$quote += $prices['drPepper'];
}
}
}
//Finally, we'll make sure they checked if they wanted it delivered or not
//So if the radio was empty
if(empty($_POST['delivery'])) {
//Throw an error
$error['delivery'] = 'Please select if you will be picking up your order or not.';
//If the user says they want their food delivered..
} elseif($_POST['delivery'] == '2') {
//We add the additional price to the quote
$quote += $prices['delivery'];
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Template - Quote Form</title>
<script type="text/javascript">
function checkCondiment(elem) {
var none = document.getElementById('condiment_4');
if (elem != none) {
none.checked = false;
} else {
for (var i = 0; i < 4; i++) {
document.getElementById('condiment_' + i).checked = false;
}
}
}
</script>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
#form_wrapper {/*The form it self is floated left, floating the form left enables it to expand horizontally to contained all it's contents. The wrapper is used to position the form in the middle of the page since the form it self is floated left.*/
padding: 30px;
margin-top: 60px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 760px;
border: 1px solid #FF8F00;
}
.gforce {/*This style forces the form wrapper to expand horizontally to contained the form it self. Remove this style will cause the form wrapper to retract. The wrapper does not have a fixed height.*/
margin: 0px;
padding: 0px;
clear: both;
}
.form_control{/*The style controls the form position, padding and font.*/
font-family: "Century Gothic", "Trebuchet MS", Verdana, Tahoma;
color: #2D2D2D;
font-size: 18px;
margin: 0px;
padding: 0px;
float: left;
width: 100%;
}
.add_top_margin {/*Removes margin from the top of the form it self*/
}
.sel_products{/*This applies the width to the drop down list*/
width: 300px;
}
label{/*Controls all form labels and positioning*/
float: left;
padding: 0px;
margin-top: 16px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
clear: left;
width: 760px;
}
.alt_labels{/*This makes the actual value of the form bold - making the value bold helps create a better visual difference from the form lable and the value*/
color: #333333;
font-weight: bold;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
float: none;
}
.quote_total{/*This is the label for the quote total text - this adds the font size and color.*/
font-size: 18px;
}
p { /*This styles the area the holds the quote and gives the actual number a different text size.*/
display: block;
text-align: right;
font-weight: bold;
color: #FFFFFF;
font-size: 36px;
width: 710px;
padding-right: 50px;
margin: 0px;
background-color: #FFC100;
background-image: url(images/quote_label_bgi.jpg);
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #FFC100;
line-height: 50px;
height: 50px;
}
.error {
font-size:15px;
font-weight:bold;
color:#CC0000;
margin: 0px;
padding: 0px;
}
.submit_button {/*Controls the position of the submit button*/
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.reset_button {
margin-right: 5px;
}
.button_wrapper {
height: 50px;
float: left;
padding: 0px;
width: 500px;
clear: left;
margin-top: 26px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
</style>
</head>
<body>
<div id="form_wrapper">
<form class="form_control" id="master_form" name="quote_form" method="post" action="">
<p><span class="quote_total">This is your quote.</span> $
<?php
//If the form was not submitted or there were errors
if(!isset($_POST['submitQuote_x']) || !empty($error)) {
echo '0000.00';
//Otherwise...
} else {
//Echo out the quote using the number_format function to display the zeros after the decimal point
echo number_format($quote, 2);
}
?></p>
<label class="add_top_margin" for="1">What sandwich would you like?
<br />
<select class="sel_products" name="sandwich" id="products">
<option <?php if(empty($_POST['sandwich']) || !empty($error['sandwich'])) echo 'selected="selected"'; ?> value="0">Please make a selection</option>
<option<?php getSelected('sandwich', 'clubSandwich'); ?> value="clubSandwich">Club Sandwich</option>
<option<?php getSelected('sandwich', 'tunaSandwich'); ?> value="tunaSandwich">Tuna Sandwich</option>
<option<?php getSelected('sandwich', 'chickenSandwich'); ?> value="chickenSandwich">Chicken Sandwich</option>
</select>
<?php
//Check for an error caused by this form
if(!empty($error['sandwich'])) {
//If there is one, echo it out.
echo '<span class="error">'.$error['sandwich'].'</span>';
}
?>
</label>
<label for="1">What would you like on your sandwich?
<span class="alt_labels"><br />Onions</span>
<input<?php getChecked('onions'); ?> type="checkbox" name="onions" value="Onions" id="condiment_0" onclick="checkCondiment(this)" />
<span class="alt_labels">Olives</span>
<input<?php getChecked('olives'); ?> type="checkbox" name="olives" value="Olives" id="condiment_1" onclick="checkCondiment(this)" />
<span class="alt_labels">Pickles</span>
<input<?php getChecked('pickles'); ?> type="checkbox" name="pickles" value="Pickles" id="condiment_2" onclick="checkCondiment(this)" />
<span class="alt_labels">Peppers</span>
<input<?php getChecked('peppers'); ?> type="checkbox" name="peppers" value="Peppers" id="condiment_3" onclick="checkCondiment(this)" />
<span class="alt_labels">None</span>
<input<?php getChecked('noCond'); ?> type="checkbox" name="noCond" value="None" id="condiment_4" onclick="checkCondiment(this)" />
<?php
//Check for an error caused by this form
if(!empty($error['condiments'])) {
//If there is one, echo it out.
echo '<span class="error">'.$error['condiments'].'</span>';
}
?>
</label>
<label for="1">Would you like a drink with your order?
<span class="alt_labels"><br />Yes</span>
<input<?php getCheckedR('drinks', '1'); ?> type="radio" name="drinks" id="drink1" value="1" />
<span class="alt_labels">No thanks</span>
<input<?php getCheckedR('drinks', '2'); ?> type="radio" name="drinks" id="drink2" value="2" />
<?php
//Check for an error caused by this form
if(!empty($error['drinks'])) {
//If there is one, echo it out.
echo '<span class="error">'.$error['drinks'].'</span>';
}
?>
</label>
<label for="1">What drink would you like?
<span class="alt_labels"><br />Diet Coke</span>
<input<?php getChecked('dietCoke'); ?> type="checkbox" name="dietCoke" id="beverage0" value="Diet Coke" />
<span class="alt_labels">Sprite</span>
<input<?php getChecked('sprite'); ?> type="checkbox" name="sprite" id="beverage1" value="Sprite" />
<span class="alt_labels">Dr. Pepper</span>
<input<?php getChecked('drPepper'); ?> type="checkbox" name="drPepper" id="beverage2" value="Dr. Pepper" />
<?php
//Check for an error caused by this form
if(!empty($error['selectDrink'])) {
//If there is one, echo it out.
echo '<span class="error">'.$error['selectDrink'].'</span>';
}
?>
</label>
<label for="1">Will you be picking up your order?
<span class="alt_labels"><br />Yes</span>
<input<?php getCheckedR('delivery', '1'); ?> name="delivery" type="radio" class="radio_position" id="yes_pickup" value="1" />
<span class="alt_labels">No, I want it delivered</span>
<input<?php getCheckedR('delivery', '2'); ?> type="radio" name="delivery" id="no_pickup" value="2" />
<?php
//Check for an error caused by this form
if(!empty($error['delivery'])) {
//If there is one, echo it out.
echo '<span class="error">'.$error['delivery'].'</span>';
}
?>
</label>
<div class="button_wrapper"><input name="submitQuote" type="image" src="images/quote_button.jpg" class="submit_button" />
<input name="reset" type="image" src="images/reset_button.jpg" class="reset_button" />
</div>
</form>
<br class="gforce" />
</div>
</body>
</html>
I will deeply appreciate any help or directions.
IC