ChocolateLover
Programmer
I'm new to javascript.
I'd like to be able to display a total (that the user cannot change) that changes dependent on certain fields selected without reloading the page.
Is this the best way to approach it?
1) Write a javascript function to calculate the total
2) Trigger the calculation using the onChange event on the relevent fields
3) Display the total using a text input field set to readonly
My second question is how to get the data require for the function.
These are the controls in the form
HTML Code:
The type and duration come from tables in a database, the field value being the record ID, so the cost would be something like 'select cost from costs where type=n and duration =n'. Bearing in mind that I don't want to reload the page, would it be best to bring the data out when the page is created and store in hidden fields and reference those hidden fields in the calculation?
e.g.
HTML Code:
Any help would be apreciated, thanks.
I'd like to be able to display a total (that the user cannot change) that changes dependent on certain fields selected without reloading the page.
Is this the best way to approach it?
1) Write a javascript function to calculate the total
2) Trigger the calculation using the onChange event on the relevent fields
3) Display the total using a text input field set to readonly
My second question is how to get the data require for the function.
These are the controls in the form
HTML Code:
Code:
<p><i>Type of advert</i></p>
<div class="row">
<span class="label">Premium</span>
<span class="formw"><input type="radio" name="banner_priority_id" value="0"></span>
</div>
<div class="row">
<span class="label">Standard</span>
<span class="formw"><input type="radio" name="banner_priority_id" value="1"></span>
</div>
<div class="clear"> </div>
<p><i>Advert Duration<i></p>
<div class="row">
<span class="label">1 month</span>
<span class="formw"><input type="radio" name="banner_duration_id" value="1"></span>
</div>
<div class="row">
<span class="label">3 months</span>
<span class="formw"><input type="radio" name="banner_duration_id" value="2"></span>
</div>
<div class="row">
<span class="label">1 year</span>
<span class="formw"><input type="radio" name="banner_duration_id" value="3"></span>
</div>
e.g.
HTML Code:
Code:
<p><i>Type of advert</i></p>
<div class="row">
<span class="label">Premium</span>
<span class="formw"><input type="radio" name="banner_priority_id" value="0"></span>
</div>
<div class="row">
<span class="label">Standard</span>
<span class="formw"><input type="radio" name="banner_priority_id" value="1"></span>
</div>
<div class="clear"> </div>
<p><i>Advert Duration<i></p>
<div class="row">
<span class="label">1 month</span>
<span class="formw"><input type="radio" name="banner_duration_id" value="1"> <input type="hidden" name="banner_cost_1" value="40.00"> <input type="hidden" name="banner_cost_1" value="30.00"></span>
</div>
<div class="row">
<span class="label">3 months</span>
<span class="formw"><input type="radio" name="banner_duration_id" value="2"> <input type="hidden" name="banner_cost_2" value="99.00"> <input type="hidden" name="banner_cost_2" value="75.00"></span>
</div>
<div class="row">
<span class="label">1 year</span>
<span class="formw"><input type="radio" name="banner_duration_id" value="3"> <input type="hidden" name="banner_cost_3" value="399.00"> <input type="hidden" name="banner_cost_3" value="299.00"></span>
</div>