Transferring a value between html 'input' tags?

Messiah Khan · 16 Sep 2008 at 14:58

Im trying to sort out the sales section of my website, and want to be able to select a size of print from a dropdown box (sorted that), but then depending on the size selected, I want the price to change accordingly. How do I do that? At the moment my code is;

Code:

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
	<table>
		<tr>
			<td>
				<input type="hidden" name="on0" value="Size" />
			</td>
			<td>
				<select name="os0">
					<option value="A4">A4</option>
					<option value="A3">A3</option>
					<option value="A2">A2</option>
					<option value="20&quot;x16&quot;">20&quot;x16&quot;</option>
					<option value="30&quot;x20&quot;">30&quot;x20&quot;</option>
				</select>
			</td>
		</tr>
	</table>

	<input type="image" src="https://www.paypal.com/en_GB/i/btn/x-click-but10.gif" name="submit" alt="PayPal - The safer, easier way to pay online." />
	<img alt="" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1" />
	<input type="hidden" name="add" value="1" />
	<input type="hidden" name="cmd" value="_cart" />
	<input type="hidden" name="business" value="[email protected]" />
	<input type="hidden" name="item_name" value="Print of <IMAGE_TITLE>" />
	<input type="hidden" name="amount" value="25.00" />
	<input type="hidden" name="shipping" value="5.00" />
	<input type="hidden" name="no_shipping" value="2" />
	<input type="hidden" name="return" value="http://www.afowler.co.uk/gallery/thankyou.html" />
	<input type="hidden" name="currency_code" value="GBP" />
	<input type="hidden" name="lc" value="GB" />
	<input type="hidden" name="bn" value="PP-ShopCartBF" />

</form>

Edit; Oh and why is the paypal button not XHTML strict valid!?! It seems to need the 'target' attribute which is no longer valid. Boo Paypal, boo!

ChrisB · 16 Sep 2008 at 15:28

Add an onchange event to the selection, so that when it's altered some javascript chances the value in the other input box, based on the selected option.

Edit: I'd give you some code, but it'd be in jquery...

on the selection call a javascript function:

Code:

function update_price(){
 if(selected=='A4'){
  //change update DOM input tags value with x.xx
 }else{
  //something else.. Or use a switch statment
 }
}

GeForce · 16 Sep 2008 at 15:32

I have a similar system on my site. The prices are loaded from a MySQL db by PHP into JS variables. jQuery does most of the client side event handling.

You can look at the source code to discover the rest

http://www.control-p.co.uk/pricing.php

Jon

Durzel · 16 Sep 2008 at 15:36

Bear in mind that client-side validation of prices is not a great idea. Paypal has a system whereby you can send an encrypted string to their checkout system which contains the price, etc.

If you don't do this make sure you double-check how much they actually paid when you handle the Paypal callback - otherwise it would be trivial for someone to pay you what they want (e.g. 50p) instead of what you expect.

Messiah Khan · 17 Sep 2008 at 10:55

Right, ive managed to get that working with the following code;

Code:

<script type="text/javascript">
function calculateordersize(form) {
if (form.item_size.value == "1_A4") {
form.amount.value="25.00";	}
if (form.item_size.value == "2_A3")	{
form.amount.value="35.00";	} 
if (form.item_size.value == "3_2016")	{
form.amount.value="45.00";	}
if (form.item_size.value == "4_3020")	{
form.amount.value="75.00";	}
} 
</script>

Code:

<p>Select a size:</p> 
<select name="item_size">
<option value="1_A4">A4 (£25)
<option value="2_A3">A3 (£35)
<option value="3_2016">20"x16" (£45)
<option value="4_3020">30"x20" (£75)
</select>

But now I would like to go one step further and me able to say; A4 image £25 + £15 for framing. So I would have a dropdown menu for the sizes AND a dropdown menu for framing (with the options of unframed/mounted/framed) with it automatically adding the price depending on the size of the print (ie, a 30"x20" frame is more expensive than a A4 frame.) Ive added another dropdown menu called 'item_framing' and tried to use the code;

Code:

<script type="text/javascript">
function calculateordersize(form) {

if (form.item_size.value == "1_A4") && (form.item_framing.value == "1_UF") {
form.amount.value="25.00";	}

if (form.item_size.value == "1_A4") && (form.item_framing.value == "2_MN") {
form.amount.value="35.00";	}

if (form.item_size.value == "1_A4") && (form.item_framing.value == "1_FR") {
form.amount.value="45.00";	}
} 
</script>

But as I have no idea of Java script, I might be using completely the wrong sytax or even going about it in the wrong way. Any ideas?

Durzel said:
Bear in mind that client-side validation of prices is not a great idea. Paypal has a system whereby you can send an encrypted string to their checkout system which contains the price, etc.

If you don't do this make sure you double-check how much they actually paid when you handle the Paypal callback - otherwise it would be trivial for someone to pay you what they want (e.g. 50p) instead of what you expect.

How would I do this? Bear in mind im a coding noob.

Messiah Khan · 17 Sep 2008 at 11:22

Sorted it!

Some characters in the wrong place. Oh how I love syntax!