Display dynamic total using javascript

[ChocolateLover]

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:

<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">&nbsp;</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>

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:

<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">&nbsp;</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">&nbsp;<input type="hidden" name="banner_cost_1" value="40.00">&nbsp;<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">&nbsp;<input type="hidden" name="banner_cost_2" value="99.00">&nbsp;<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">&nbsp;<input type="hidden" name="banner_cost_3" value="399.00">&nbsp;<input type="hidden" name="banner_cost_3" value="299.00"></span>
</div>

Any help would be apreciated, thanks.

 

[xiaoleiqq]

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?

Yes, never use js to access database, unless you want everyone to have ur password. you can store them in an array or sth,

I think you are on the right track from your 1) 2) 3)

 

[kaht]

Here's a quick example of how to calculate a total and put it into a readonly text field:

<script type="text/javascript">
function blah() {
   var p = parseFloat(document.getElementById("price").value);
   var q = parseInt(document.getElementById("quantity").value, 10);
   var t = document.getElementById("total");
   t.value = p * q;
}
</script>
<input type="text" value="0" id="price" onchange="blah()" /> : Price
<br /><br />
<input type="text" value="0" id="quantity" onchange="blah()" /> : Quantity
<br /><br />
<input type="text" value="0" id="total" readonly="readonly" /> : Total

As for your other question, you said that you wanted to pull values from the database w/o reloading the page. The fastest, and most accepted way to do this is using AJAX. Now.... if you are a newbie to javascript you're going to want to do a lot of research before tackling it - as you probably won't understand it w/o learning a little javascript first.

Anyway, googling AJAX and doing some javascript tutorials should get you on the right track.

-kaht

Looking for a puppy?

[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]

 

[ChocolateLover]

Thanks, this is all really helpful.