Form Question

[sassafras9]

Hi,

I am doing a booking form and would like to return an instant price after all the selections in the form have been made but before they click the submit button. For example. Lets say the price is effected by three variables, room, length of journey and occupants. Based on their selections they can instantly see the price and if need be go back and try a different combination and then submit the information. How would I give the user a price based on the what they chose for the three selections?

Thanks for any posts.

[scragar]

use javascript.

<script type="text/javascript"><!--
var currencySymbol = "$";

function UpdatePrice(){
var total = parseInt(frm1.transport.options[frm1.transport.selectedIndex].value, "10");
total += parseInt(frm1.rooms.options[frm1.rooms.selectedIndex].value, "10");
total *= parseInt(frm1.NoOfPeople.value, "10");
spn1.innerHTML = currencySymbol + total;
};

window.onload = UpdatePrice;
//-->
</script>
<form name="frm1" action="wherever" method=post>
travel from: <select name="transport" onchange="UpdatePrice()">
<option value="25">down the road</option>
<option value="50">a town away</option>
<option value="100">another continent</option>
<option value="200">mars</option>
</select><br />
room kind: <select name="rooms" onchange="UpdatePrice()">
<option value="25">style 1</option>
<option value="50">style 1</option>
<option value="100">style 1</option>
<option value="200">style 1</option>
</select><br />
number of people: <input type=text onchange="UpdatePrices()" value="0" /><br>
<span id="spn1"></span><br>
<input type="submit" value="send" />
</form>

[sassafras9]

Hi,

Thanks. It's exactly what I was looking for, but I can't get the price to display under the form. <span id="spn1"></span> is not showing the price or the updated price. What could I do? Thanks.

use javascript.

<script type="text/javascript"><!--
var currencySymbol = "$";

function UpdatePrice(){
var total = parseInt(frm1.transport.options[frm1.transport.selectedIndex].value, "10");
total += parseInt(frm1.rooms.options[frm1.rooms.selectedIndex].value, "10");
total *= parseInt(frm1.NoOfPeople.value, "10");
spn1.innerHTML = currencySymbol + total;
};

window.onload = UpdatePrice;
//-->
</script>
<form name="frm1" action="wherever" method=post>
travel from: <select name="transport" onchange="UpdatePrice()">
<option value="25">down the road</option>
<option value="50">a town away</option>
<option value="100">another continent</option>
<option value="200">mars</option>
</select><br />
room kind: <select name="rooms" onchange="UpdatePrice()">
<option value="25">style 1</option>
<option value="50">style 1</option>
<option value="100">style 1</option>
<option value="200">style 1</option>
</select><br />
number of people: <input type=text onchange="UpdatePrices()" value="0" /><br>
<span id="spn1"></span><br>
<input type="submit" value="send" />
</form>

[scragar]

you can always just replace it with a disabled text box.<script type="text/javascript"><!--
var currencySymbol = "$";
function UpdatePrice(){
var total = parseInt(frm1.transport.options[frm1.transport.selectedIndex].value, "10");
total += parseInt(frm1.rooms.options[frm1.rooms.selectedIndex].value, "10");
total *= parseInt(frm1.NoOfPeople.value, "10");
txtTotal.value = currencySymbol + total;
};

window.onload = UpdatePrice;
//-->
</script>
<form name="frm1" action="wherever" method=post>
travel from: <select name="transport" onchange="UpdatePrice()">
<option value="25">down the road</option>
<option value="50">a town away</option>
<option value="100">another continent</option>
<option value="200">mars</option>
</select><br />
room kind: <select name="rooms" onchange="UpdatePrice()">
<option value="25">style 1</option>
<option value="50">style 1</option>
<option value="100">style 1</option>
<option value="200">style 1</option>
</select><br />
number of people: <input type=text onchange="UpdatePrices()" value="0" /><br>
<input type="submit" value="send" /><input type=text disabled
name="txtTotal" value="" />
</form>