Small Dynamic Calculation

[warlockdn]

Hey Guyz,

Need a urgent help.. I am very bad at javascript and I need to do this job done for my client.

Created a quote form.. All is done..

Now I want is

Initial Amount is $220 and the textbox asks for how many rooms ?

If there is one room then the price is $220 bt if more than 1 room it +$150 (per room)

Can you guyz help me with this.. The calculation has to happen without form submission. I tried googling but all are of very long messy code and I wanted in a very intermediate level..

Here the code goes..


<form action="mailer.php" name="calc">
<input type="hidden" value="220" name="price"/>
<label>How many rooms ? </label> <input type="text" name="room" onchange=" ???function() ??? "/>
<input type="hidden" name="total" value=" ?? Dynamically calculated value ?? " />
<div class="total"> Total Value Here (static) </div>

<button type="submit" name="submit" />
</form>

Please help me with this..

Thanks

[jscheuer1]

The code in your post shows the:



<div class="total"> Total Value Here (static) </div>

as static, while the hidden input is dynamic.

Logically and for security reasons, this calculation should be done on the mailer.php page. If you want to show the user the estimated total in the div, that could be displayed on the page before submission via javascript. But, as javascript is client slide, it wouldn't be secure and could be hacked. So you wouldn't want to pass the value it arrives at to the mailer.php page. The hidden input (total) and any code associated with it on mailer.php should be eliminated. And the 150 value should be available to the function, but not as a hidden input, while the price input shouldn't be public either. (Hidden inputs are public, they're just not seen unless one uses view source.) An item name should be used and a server side page fetched via AJAX to secure these values for javascript. These values would then also be independently available on mailer.php for its use in its own independent calculations.

And, as there appears to be some urgency, and you are presumably being paid by the client for this, and to be done right it would involve both javascript and PHP code, this really should be in the paid requests section.

All that said, for a quick fix using basically the form you have and the criteria you've given though (with the added feature of showing the total to the user before submission), you could do:


<form action="mailer.php" name="calc">
<input type="hidden" value="220" name="price"/>
<label>How many rooms ? </label> <input type="text" name="room" value="1"/>
<input type="hidden" name="total" value="1" />
<div class="total"> Total Value Here <span id="estimate">(static)</span> </div>

<input type="submit" name="submit" value="Submit"/>
</form>
<script type="text/javascript">
(function(){
var form = document.forms.calc, els = form.elements, rooms = els.room, price = els.price.value,
total = els.total, est = document.getElementById('estimate');
function calculate(){
est.innerHTML = total.value = rooms.value == 0 || !rooms.value? 0 : rooms.value == 1? price : (rooms.value - 1) * 150 + +price;
}
calculate();
rooms.onkeyup = rooms.onmouseout = calculate;
})();
</script>