SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with an instant quote script

    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/applica...uoteScript.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:

    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&#37;;
    }
    .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

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    You will need to use Ajax to post the information to a php script and receive a response.
    With that response you can then use javascript to update the page accordingly.

    The recommended resource is Bulletproof Ajax which makes its code examples available, or to use a library to perform the heavy lifting such as jQuery's Ajax
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    You will need to use Ajax to post the information to a php script and receive a response.
    With that response you can then use javascript to update the page accordingly.

    The recommended resource is Bulletproof Ajax which makes its code examples available, or to use a library to perform the heavy lifting such as jQuery's Ajax

    Thanks for your help! Appreciate the response.


    IC


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •