Select Menu to change Price on select

Select Menu to change Price on select - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: Select Menu to change Price on select (/showthread.php?tid=4173)

Pages: 1 2

Select Menu to change Price on select - El Forum - 11-11-2007

[eluser]Brad Haynes[/eluser]
I have a product detail page with a select menu where you can choose different tire sizes. There are 12 different tires and 12 (maybe more) different tire sizes. Each tire has available different sizes that you can choose from a drop down menu.

http://stonetire.dreamhosters.com/store/xch4/

I need, when a size is selected, for the price to change. NO IDEA how to go about doing this.

I'm thinking of probably using category variable to add metadata to each category, but that would make EACH SIZE be a different price, which isn't necessarily the case, since different tires might have the same size in stock.

I'm suspecting some serverside php scripting or clientside javascript, perhaps even some ajax. This is a little over my head, so I was hoping some kind soul might help me out.

Thanks in advance,
Brad

Select Menu to change Price on select - El Forum - 11-11-2007

[eluser]gtech[/eluser]
I think what you want to do is update the form information without having to submit the form. in which case you may want to use javascript.. be careful though you need to check it will work on most browsers.

I searched google "javascript forms update value" and this site has a good demo of what you need, you would place the javascript in your view code.

[url ="http://tc2tc.mojolingo.xuite.net/m2m-0000/javascript.internet.com/forms/update-order-form-no-page-refresh.html"](click here for exaple)[/url]

dont get too confused with the term AJAX. it stands for (Asynchronous JavaScript and XML) meaning your web browser runs javascript without having to make constant calls to the webserver. Its more a concept than a programming language.

Select Menu to change Price on select - El Forum - 11-11-2007

[eluser]Brad Haynes[/eluser]
I'm going to look into that now. I'll post my results (or lack thereof) here soon.

thanks for your help!
-b

Select Menu to change Price on select - El Forum - 11-11-2007

[eluser]Brad Haynes[/eluser]
Man, I'm not too experienced with writing javascript. I can usually hack it, but it has to be pretty much exactly what I need for me to understand it. Two questions:

1. I don't want to use radiobuttons, but a select menu instead. I don't exactly know how to modify that out in the javascript below.

// Calculate the total for items in the form which are selected.
function calculateTotal(inputItem) {
with (inputItem.form) {
// Process each of the different input types in the form.
if (inputItem.type == "radio") { // Process radio buttons.
// Subtract the previously selected radio button value from the total.
calculatedTotal.value = eval(calculatedTotal.value) - eval(previouslySelectedRadioButton.value);
// Save the current radio selection value.
previouslySelectedRadioButton.value = eval(inputItem.value);
// Add the current radio button selection value to the total.
calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value);
} else { // Process check boxes.
if (inputItem.onchange == false) { // Item was uncheck. Subtract item value from total.
calculatedTotal.value = eval(calculatedTotal.value) - eval(inputItem.value);
} else { // Item was checked. Add the item value to the total.
calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value);
}
}

2. I don't want the final price to be in a text field. I want it to look just like this:

http://stonetire.dreamhosters.com/store/extra_grip/

Here is the code they have provided for the final price:

<strong>Your total is:</strong>
<input type="text" name="total" readonly onfocus="this.blur();">
</form>

And here is how my code is written:

<span class="detailPrice">$50.00</span>
<input name="" type="image" src="/images/_products/btn.buyNowDETAIL.gif"
alt="Buy Now" width="177" height="35" border="0" />
</form>

Thanks again for all your help!
-brad

Select Menu to change Price on select - El Forum - 11-11-2007

[eluser]gtech[/eluser]
I might be able to take a look later on today (im covered in wallpaper paste and gloss at the mo Smile

), if anyone else wants to help in the mean time

Select Menu to change Price on select - El Forum - 11-11-2007

[eluser]Brad Haynes[/eluser]
haha, no, PLEASE finish what you're doing. we wouldn't want wallpaper paste dripping into your keyboard!

Select Menu to change Price on select - El Forum - 11-11-2007

[eluser]Rick Jolly[/eluser]
There are 3 ways to update the tire size select menu that I know of. All require javascript, specifically an onChange() event handler.
1. gtech's method that uses ajax to update the tire size menu using ajax when the tire type menu changes (onChange())
2. instead of using ajax, you can refresh the entire page by submitting the form when the tire type menu changes.
3. initially load the tire sizes in an associative array indexed by tire type: array(tire1=>array(size1,size2), tire2=>array(size1,size3), etc.). This doesn't require an update from the server when the tire type changes. If you don't have a lot of data, this might be the simplest, most responsive method.

Select Menu to change Price on select - El Forum - 11-11-2007

[eluser]Brad Haynes[/eluser]
simple sounds good to me right now. and while I want the form to be incredibly dynamic and all that, I'm not sure it's entirely necessary with a product list of this size. so option 3 sounds great.

but how would that work to change the price of a given tire size. i already have site generating different tire sizes for each tire. but I need those sizes, upon (onChange()) to activate a price change, which I will then pass off to my payment processor. ugh. i so don't know what I'm doing.

thanks,
-b

Select Menu to change Price on select - El Forum - 11-11-2007

[eluser]Rick Jolly[/eluser]
Sorry, I didn't read your entire question so I misunderstood a bit. Anyway, the principal is the same:

Load a javascript associative array with prices for each tire size for that particular tire type. It would look something like this:

Code:
var sizes = new Array();

sizes ["one"] = "50.00";

sizes ["two"] = "80.00";

The onChange() could call a javascript function passing the name/id of the select form field:

Code:
function updatePrice(select_field_name_or_id) 

{

  // get selected option

  // get price from the associative array for the selected option

  // update the price by referencing the <span> that holds the price by its id

}

The <span> holding the price should have an id so that it can be referenced and updated in the updatePrice() function.

There are many ways to code the javascript. You might want to use a js library like jquery.

Of course you'd want to validate that the price is correct after the form is submitted before calling the payment gateway.

Select Menu to change Price on select - El Forum - 11-11-2007

[eluser]Brad Haynes[/eluser]
I'm gonna play around with that a bit. I think I might run into some trouble though, as the tire sizes don't have a set price. tire A and tire B may both have size "2," but the price would be different for each.

Thanks a lot for all your help,
-brad