Hi,

Im trying to make the price appear in a text box in a form when the user selects the quantity from a drop down box. The price is fixed at 38.50. Any help is highly appreciated, here is the code in my form (I havent attempted any javascript yet - and Im sure my code for the form is bad too!) :

<code>

<form action="" method="post">

<tr align="left">
<td width="118"><span class="style3">Quantity</span>
<select name="Product 1" size="1">
<option selected="selected">0 </option>
<option>1 </option>
<option>2 </option>
<option>3 </option>
<option>4 </option>
<option>5 </option>
<option>6 </option>
<option>7 </option>
<option>8 </option>
<option>9</option>
</select>
<input type="hidden" name="Product 1" value="38.50" />
<input name="hidden" type="text" value="Price" size="1" /></td>
</tr>
</form>
</code>

Hi.

You can set the onchange event to trigger a function to calculate the new price.

<select name="MySelect" onchange="javascript: SetPrice(this);">
  <option selected="selected">1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>
<p id="Price">$3.50</p>

Which could look something like this:

function SetPrice(box) {
  elem = document.getElementById('Price');
  newPrice = 3.5 * parseInt(box.value);
  elem.innerHTML = "$" + newPrice;
}

Shouldn't be hard to adapt this into your code.

Here you go! Please don't forget to marked your thread solve, if it does solved the issue! Thanks!

<html>
<head>
<title><!--Sample--></title>
<script type="text/javascript">
<!-- BEGIN HIDING

document.onchange = function( e )
{ e = e ? e : window.event;
  t = e.target ? e.target : e.srcElement;
if (( t.name ) && ( t.name == 'product1' )) 
{ var thisPrice = product.price;
  var thisTotal = product.total;
  thisTotal.value = '$' +  t.selectedIndex * parseFloat (thisPrice.value); }
}

// DONE HIDING --> 
</script>
</head>
<body>

<br />

<form name="product" action="#" onsubmit="return false;"> 
<tr align="left">    
<td width="118">
<span class="style3">Quantity</span>     
<select name="product1" size="1">     
<option>0</option>     <option>1 </option>    <option>2 </option>     <option>3 </option>     <option>4</option>     <option>5 </option>    <option>6 </option>     <option>7 </option>     <option>8</option>     <option>9</option>    
</select>     
<input type="hidden" name="price" value="38.50" />&nbsp;<input name="total" type="text" value="0" size="5" style="text-align: center;" />
</td> 
</tr> 
</form>
</body>
</html>

Hi Essential,

Thanks for the post. What parts of the Javascript do I have to fill in myself? It doesnt seem to work by itself...

Hi there, patrick!
Actually It depends on your idea on how you want things to work!
Just keep those bright ideas with u, and am sure things wil be just fine.

Please, If you find any problem on my code!
Let me know so i can work things out. Good day to you...

This article has been dead for over six months. Start a new discussion instead.