...

View Full Version : Update Price on Selection



Sloth_Boy
02-10-2007, 01:38 AM
I'm currently making an online shop using php. I don't know any javascript but I'm not bad with php so I can analyze a script and probably work out what it does (javascript). Here's what I want to do. When a user selects a different weight, I want it to update the displayed price. However, there will be multiple products on a page so the script has to work for many products and not just one. I suggest you copy the below table into something like dreamweaver.


<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td width="23%" valign="middle">Weight:</td>
<td width="39%" align="left" valign="middle">
<form method="post" action="">
<select id="weight1" name="weight" style="width:108px;">
<option value="1kg">1kg ($15.00)</option>
<option value="500g">500g ($10.00)</option>
<option value="250g">250g ($7.00)</option>
</select>
</form>
</td>
<td id='price1' width="38%">$15.00</td>
</tr>
</table>
<br />
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td width="23%" valign="middle">Weight:</td>
<td width="39%" align="left" valign="middle">
<form method="post" action="">
<select id="weight2" name="weight" style="width:108px;">
<option value="1kg">1kg ($15.00)</option>
<option value="500g">500g ($10.00)</option>
<option value="250g">250g ($7.00)</option>
</select>
</form>
</td>
<td id='price2' width="38%">$15.00</td>
</tr>
</table>

How hard would it be to change the displayed price when the user selects a different weight? It will be cosmetic only. I understand that javascript uses element ID's for things like this. You'll notice in the above tables that I've set the weight and price id's differently between the price id's and the weight id's. If someone could write me a little script to do this for the above html, then that would be really awesome and much appreciated.

Cheers!

neomaximus2k
02-10-2007, 10:23 AM
The way i do this is through AJAX on mysite, but for your script you would need to add the price to the value on the select field, then just call a function on change like changevalue("1", this.value)

then the script would be like

function changevalue(ID, NEWAMOUNT){
document.getElementById("price"+ID).value = NEWAMOUNT;
}

that should help you

Mr J
02-10-2007, 12:31 PM
Here's another possibility


<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td width="23%" valign="middle">Weight:</td>
<td width="39%" align="left" valign="middle">
<form method="post" action="">
<select id="weight1" name="weight" style="width:108px;" onchange="document.getElementById('price1').innerHTML=this.value.split(',')[1]">
<option value="1kg,$14.00">1kg ($15.00)</option>
<option value="500g,$10.00">500g ($10.00)</option>
<option value="250g,$7.00">250g ($7.00)</option>
</select>
</form>
</td>
<td id='price1' width="38%">$15.00</td>
</tr>
</table>
<br />
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td width="23%" valign="middle">Weight:</td>
<td width="39%" align="left" valign="middle">
<form method="post" action="">
<select id="weight2" name="weight" style="width:108px;" onchange="document.getElementById('price2').innerHTML=this.value.split(',')[1]">
<option value="1kg,$14.00">1kg ($15.00)</option>
<option value="500g,$10.00">500g ($10.00)</option>
<option value="250g,$7.00">250g ($7.00)</option>
</select>
</form>
</td>
<td id='price2' width="38%">$15.00</td>
</tr>
</table>

Sloth_Boy
02-10-2007, 12:41 PM
That seems pretty could Mr J. I like the simplicity. It will be fairly easy to work with too. I was thinking that the only downside is that the price is in the value (so when I process it I'll have to get php to do a little extra work to isolate the weight), but that also has it's advantages as when I insert the weight value from the database, I can also insert the price in the same spot meaning the code will be a bit cleaner.

Thankyou very much mate! :)

neomaximus2k
02-10-2007, 01:17 PM
just get php to explode the variable with the , and there you go, 2 lines of code max

Sloth_Boy
02-10-2007, 01:26 PM
just get php to explode the variable with the , and there you go, 2 lines of code max

Yeah exactly :) - Thanks again.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum