Member Avatar for vlowe

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
  • 281 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

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

Member Avatar for vlowe

Airshow, your a legend mate!

Thank you very much for that.

Member Avatar for Mohtshm

airshow seems very clean and eloborative.

Member Avatar for Airshow

airshow seems very clean and eloborative.

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.