Member Avatar for patrick1984

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>

  • 3 Contributors
  • 4 Replies
  • 90 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for Atli

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.

Member Avatar for essential

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>
Member Avatar for patrick1984

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...

Member Avatar for essential

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...

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.