0

Hi all,

im looking for some help with some javascript if thats ok.

I am building a system for creating a booklet.
I want the user to be able to select the quantity of booklets they require. (eg 50, 75, 100, 125)

Then also select the number of pages each booklet will require. (eg. 4, 8, 12)

both will be select drop down boxes.

I would like the price to be calculated based on the selections and displayed on the page.

It will be total price not price per booklet.

This is how i have built up the prices in php.
if($b_maxpages == '4' && $b_quantity == '50') { $amount = "95.00"; }
elseif($b_maxpages == '4' && $b_quantity == '75') { $amount = "103.00"; }
elseif($b_maxpages == '4' && $b_quantity == '100') { $amount = "115.00"; }
elseif($b_maxpages == '4' && $b_quantity == '125') { $amount = "132.00"; }
elseif($b_maxpages == '8' && $b_quantity == '50') { $amount = "147.00"; }
elseif($b_maxpages == '8' && $b_quantity == '75') { $amount = "171.00"; }
elseif($b_maxpages == '8' && $b_quantity == '100') { $amount = "194.00"; }
elseif($b_maxpages == '8' && $b_quantity == '125') { $amount = "218.00"; }
elseif($b_maxpages == '12' && $b_quantity == '50') { $amount = "190.00"; }
elseif($b_maxpages == '12' && $b_quantity == '75') { $amount = "222.00"; }
elseif($b_maxpages == '12' && $b_quantity == '100') { $amount = "255.00"; }
elseif($b_maxpages == '12' && $b_quantity == '125') { $amount = "288.00"; }

I will also need the selected data to be posted once the form is submitted.

Cheers
vince

3
Contributors
4
Replies
5
Views
7 Years
Discussion Span
Last Post by Airshow
0

VLowe,

Probably easiest to do this by lookup rather than a series of ifs.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
{}
</style>

<script>
var prices = {
	'4' : {
		'50'  : '95.00',
		'75'  : '103.00',
		'100' : '115.00',
		'125' : '132.00'
	},
	'8' : {
		'50'  : '147.00',
		'75'  : '171.00',
		'100' : '194.00',
		'125' : '218.00'
	},
	'12' : {
		'50'  : '190.00',
		'75'  : '222.00',
		'100' : '255.00',
		'125' : '288.00'
	}
};
onload = function(){
	var f = document.booklets;
	var qtyEl = f.qty;
	var pagesEl = f.pages;
	var priceEl = document.getElementById('price');
	f.qty.onchange = f.pages.onchange = function(){
		var qty   = qtyEl[qtyEl.selectedIndex].value;
		var pages = pagesEl[pagesEl.selectedIndex].value
		priceEl.innerHTML = prices[pages][qty];
	};
	f.qty.onchange();//initialise price field for whatever values are selected on page load
};
</script>
</head>

<body>

<form name="booklets" method="" action="">

<div>
	<select name="qty">
		<option value="50">50</option>
		<option value="75">75</option>
		<option value="100">100</option>
		<option value="125">125</option>
	</select>

	<select name="pages">
		<option value="4">4</option>
		<option value="8">8</option>
		<option value="12">12</option>
	</select>
</div>

<div>Price: $<span id="price"></span></div>

</form>

</body>
</html>

Must rush ..... I'm late for work.

Airshow

0

Airshow, your a legend mate!

Thank you very much for that.

0

airshow seems very clean and eloborative.

Clean :icon_exclaim: You should hear some of my jokes :icon_redface:

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.