innerHTML price calculation problems, with post..

jakoblindahl · 07-16-2012, 03:32 PM

Hi,

I'm quite new on programming. I have a webshop that I want to edit to fit a new PSP.

The webshop is using a function for calculating the price for a product. The problem is that it is possible to select different options which increase or decrease the price. This is calculated with a javascript function.

Code:

            
			<script type="text/javascript">
            
			function onKomplett(){
				var komplett = document.getElementById("komplett").checked;
				
				if (komplett){
					onOptionChange();
					document.getElementById("truckar").disabled = false;
					document.getElementById("hjul").disabled = false;
					document.getElementById("kullager").disabled = false;
				}
				else {
					var price = parseInt(document.getElementById('boardprice').value);
					document.getElementById('price').innerHTML = price ;
					document.getElementById("truckar").disabled = true;
					document.getElementById("hjul").disabled = true;
					document.getElementById("kullager").disabled = true;
				}
			}
			
			function onOptionChange()
			{
				var price = parseInt(document.getElementById('boardprice').value);
				truckar = document.getElementById('truckar');
				price += parseInt(truckar.options[truckar.selectedIndex].title);
				hjul = document.getElementById('hjul');
				price += parseInt(hjul.options[hjul.selectedIndex].title);
				kullager = document.getElementById('kullager');
				price += parseInt(kullager.options[kullager.selectedIndex].title);
				document.getElementById('price').innerHTML = price ;
			}
 
</script>

The total price for the options is shown by:

Code:

Totalt:<input id="boardprice" type="hidden" value="1999"/>
							<span style="font-size: 10; color: #FFF;" id="price" name="price">
				1999
			
			</span>
			kr
			
			<script type="text/javascript">
				onOptionChange();
			
			</script>

It is no problem to have the price shown on the main-page but as soon I want to use the total price and insert in for example a input-tag I don't know what I should do.

Can someone please help me to get a php variable or in some way get it able to post the total price to a php-form? I feel a bit dumb, but I hope there are some nice buddy that will help me.

The full code for the page is:

Code:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 

<link rel="Stylesheet" type="text/css" href="styles.css">
<title>Dr Longboard Webshop Netaxept</title>
</head>
<?php

	$Odin = "199900";
	$Skull = "89900";
	$Tribal = "129900";
	$Odinpris = $Odin/100;
	$Skullpris = $Skull/100;
	$Tribalpris = $Tribal/100;
	$Currency = "SEK";
	$modellbild = "http://www.drlongboard.se/thumbs/phppMiGKcdrlongboardfreeride.jpg";
?>

<body bgcolor="#FFF">

<script type="text/javascript">
            
			function onKomplett(){
				var komplett = document.getElementById("komplett").checked;
				
				if (komplett){
					onOptionChange();
					document.getElementById("truckar").disabled = false;
					document.getElementById("hjul").disabled = false;
					document.getElementById("kullager").disabled = false;
				}
				else {
					var price = parseInt(document.getElementById('boardprice').value);
					document.getElementById('price').innerHTML = price ;
					document.getElementById("truckar").disabled = true;
					document.getElementById("hjul").disabled = true;
					document.getElementById("kullager").disabled = true;
				}
			}
			
			function onOptionChange()
			{
				var price = parseInt(document.getElementById('boardprice').value);
				truckar = document.getElementById('truckar');
				price += parseInt(truckar.options[truckar.selectedIndex].title);
				hjul = document.getElementById('hjul');
				price += parseInt(hjul.options[hjul.selectedIndex].title);
				kullager = document.getElementById('kullager');
				price += parseInt(kullager.options[kullager.selectedIndex].title);
				document.getElementById('price').innerHTML = price ;
			}
 
</script> 

<div class="content">
<div class="header"></div>
<h2>Dr Longboard Odin</h2>
<table>
<tr><td><img src="<?php echo $modellbild?>"></td></tr>
</table>

			<form method="post" action="customerinformation.php" id="myform">
            			<input type="checkbox" id="komplett" name="komplett" checked="checked" onclick="onKomplett()" /> Komplett bräda
            <br />
            <input type="hidden" name="redirect" value="">
			Truckar: <br />
			<select name="truckar" id="truckar" style="width:90%" onchange="onOptionChange()">
				<option selected="yes" title="550" value="Randal R2 180mm">Randal R2 180 mm - 550 kr</option><option  title="550" value="Randal R2 150mm">Randal R2 150mm - 550 kr</option><option  title="499" value="DRL Trucks 150 mm">DRL Trucks 150 mm - 499 kr</option><option  title="499" value="DRL Trucks 180 mm">DRL Trucks 180 mm - 499 kr</option>			</select>
			<br />
            Hjul: <br />
			<select name="hjul" id="hjul" style="width:90%" onchange="onOptionChange()">
				<option selected="yes" title="530" value="Seismic Bootleg 80a">Seismic Bootleg 80a - 530 kr</option><option  title="530" value="Seismic Bootleg 84a">Seismic Bootleg 84a - 530 kr</option><option  title="550" value="Seismic Landslides 79a">Seismic Landslides 79a - 550 kr</option><option  title="550" value="Seismic Landslide 83a">Seismic Landslide 83a - 550 kr</option><option  title="530" value="Speedvents 73mm Blue">Speedvents 73mm Blue - 530 kr</option><option  title="530" value="Speedvents 73mm Orange">Speedvents 73mm Orange - 530 kr</option><option  title="530" value="Speedvents 73mm Purple">Speedvents 73mm Purple - 530 kr</option><option  title="550" value="zigzags 70mm Red">zigzags 70mm Red - 550 kr</option><option  title="550" value="Zigzags 70mm Green">Zigzags 70mm Green - 550 kr</option><option  title="550" value="Zigzags 70mm Yellow">Zigzags 70mm Yellow - 550 kr</option><option  title="399" value="DRL All around wheels 70mm Red">DRL All around wheels 70mm Red - 399 kr</option><option  title="399" value="DRL All around wheels 70mm  T-red">DRL All around wheels 70mm  T-red  - 399 kr</option><option  title="399" value="DRL All around wheels 70mm Blue">DRL All around wheels 70mm Blue  - 399 kr</option><option  title="399" value="DRL All around wheels 70mm T-blue">DRL All around wheels 70mm T-blue - 399 kr</option><option  title="399" value="DRL All around wheels 70mm T-red Green">DRL All around wheels 70mm T-red Green - 399 kr</option><option  title="319" value="DRL Slide/Cruising wheels 65mm">DRL Slide/Cruising wheels 65mm - 319 kr</option><option  title="319" value="DRL Slide/Cruising wheels 65mm">DRL Slide/Cruising wheels 65mm  - 319 kr</option><option  title="319" value="DRL Slide/Cruising wheels 65mm">DRL Slide/Cruising wheels 65mm  - 319 kr</option><option  title="319" value="DRL Slide/Cruising wheels 65mm">DRL Slide/Cruising wheels 65mm  - 319 kr</option><option  title="319" value="DRL Slide/Cruising wheels 65mm">DRL Slide/Cruising wheels 65mm  - 319 kr</option>			</select>
			<br />
            Kullager: <br />
			<select name="kullager" id="kullager" style="width:90%" onchange="onOptionChange()">
				<option title="199" value="Slipstream Bearings abec 5">Slipstream Bearings abec 5 - 199 kr</option>			</select>
			<br />
			
            <br />
			Totalt:<input id="boardprice" type="hidden" value="1999"/>
							<span style="font-size: 10; color: #FFF;" id="price" name="price">
				1999
			
			</span>
			kr
			
			<script type="text/javascript">
				onOptionChange();
			
			</script>
						<input type="hidden" name="Goods_description" value="Dr Longboard Odin"><br>
			<input type="submit" name="Submit" value="L&auml;gg i varukorgen" onclick="javascript:changeprice()">
            </form>
			
</div>



</body>
</html>

Thank you so much from now!

tom.a · 07-17-2012, 09:36 AM

Hello jakoblindahl,
I think the price is submitted using a hidden input field. You can change the value of the hidden input field by adding the following to the onOptionChange function.

Code:

document.getElementById('boardprice').value = price;

I wouldn't recommend submitting the price in this way, as someone could change the value of the hidden field without using the selection field. Consider calculating the price on the server to prevent form tampering.