How to update a number dynamically in a web page

SkyHandle · May 30, 2006

Hi Everyone:

I am very new to Java scripting & looking for some guidence.

I am building a computer site that users can select different
parts of the computer for customized configurations. When user
selects a machine it picks up a $ number and it proceeded to detail
page where customers can pickup upgrade items.

For an example for computer memory I have 3 radio buttons
for: 512Mb (add $30), 1GB (Add 50$), 2GB(Add 70$)
Upon clicking a one radio button, I like to update the total $
number dynamically. I am trying to use onClick event, but
looking for a sample function to update a total dollar number after
passing add on $number from the Radio buttons.

Thanks for some help!

Neil

theniteowl · May 31, 2006

Put together your form how you want it to look and post it.

Calculating the values is easy but you have to know what all of the fields are going to be so you know what to calculate.
There are potentially much more complex issues to be decided about how the forms will work before worrying about the calculation.

Where will you be pulling the values for the components from?
You do not want to hard-code those values into the forms since the prices are constantly changing and you would forever be modifying your forms trying to keep up with price changes. So the best bet is to store all the prices/part#s in a database and have them read and displayed dynamically when the page loads.

But to give you an answer to your question this code will calculate the selected radio option with a base price preset on the page.

Code:

<html>
<head>
<title></title>
<script type="text/javascript">
<!--//
function calcOptions() {
  var basecost = 300;
  var myRadio = document.getElementsByName('R1');
  var memcost=0;
  for (var x=0; x<myRadio.length; x++) {
    if (myRadio[x].checked) {
      memcost = myRadio[x].value - 0;
    }
  }
  var totalPrice = basecost + memcost;
  document.getElementById('Total').value = totalPrice;
  return false;
}
//-->
</script>
</head>
<body>
<form method="post" action="">
Base price: $300.00<br>
<input type="radio" name="R1" id="R1" value="30" onclick="calcOptions();"> 512MB (add $30)<br>
<input type="radio" name="R1" id="R1" value="50" onclick="calcOptions();"> 1GB (add $50)<br>
<input type="radio" name="R1" id="R1" value="70" onclick="calcOptions();"> 2GB (add $70)<br>
<br>
Total: <input type="text" id="Total" value="300" readOnly><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

It's hard to think outside the box when I'm trapped in a cubicle.

SkyHandle · May 31, 2006

Dear Heniteowl:

Many thanks!! Very much appreciated your quick response.

Would you mind giving me some guidance for these questions as well?

1. Thanks for the database suggestion. The site is written in ASP and I am planning to
store the add on price in a database.

2. I have updated the code to add one more set of radio buttons to add hard drives.
I need to add more different sets of radio buttons to add-ons such as different
LAN cards, video cards etc. So I see about 10 sets of different radio buttons.

3. Isn't there a prettier way to update the code other than what I did?

4. Is that possible to have the total price as a label than in a textbox?

5. How do I get the TotalPrice into my asp code? If I use just TotalPrice
in my asp code, does it simply recognize the variable?

Thanks a lot.

Neil
========================
<html>
<head>
<title></title>
<script type="text/javascript">

</script>
</head>
<body>
<form method="post" action="">
Base price: $300.00<br>
<input type="radio" name="R1" id="R1" value="30" onclick="calcOptions();"> 512MB (add $30)<br>
<input type="radio" name="R1" id="R1" value="50" onclick="calcOptions();"> 1GB (add $50)<br>
<input type="radio" name="R1" id="R1" value="70" onclick="calcOptions();"> 2GB (add $70)<br>
<br>
<br>
<input type="radio" name="R2" id="R2" value="50" onclick="calcOptions();"> Hard Drive 1 (add $50)<br>
<input type="radio" name="R2" id="R2" value="80" onclick="calcOptions();"> Hard Drive 2 (add $80)<br>
<input type="radio" name="R2" id="R2" value="100" onclick="calcOptions();">Hard Drive 3 (add $100)<br>
<br>

Total: <input type="text" id="Total" value="300" readOnly size="20"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

========================

theniteowl · May 31, 2006

3. Isn't there a prettier way to update the code other than what I did?

Prettier? Well the javascript can be condensed replacing this:

Code:

    for (var x=0; x<myRadio1.length; x++) 
    {
      if (myRadio1[x].checked) 
      {
        memcost = myRadio1[x].value - 0;
      }
    }

With this:

Code:

    for (var x=0; x<myRadio1.length; x++) {
      if (myRadio1[x].checked) 
        memcost = myRadio1[x].value - 0;
    }

It can be shortened more than that but this is a good way to keep it short but still readily readable when troubleshooting.

4. Is that possible to have the total price as a label than in a textbox?

Yes, but you will then need a hidden form field to hold the value as well. Change the text field to a lable and change it's ID to lblTotal so we do not end up with duplicate ids.
Then add in this hidden field on the form.

Code:

<input type="hidden" id="Total">

And replace this line:

Code:

document.getElementById('Total').value = totalPrice;

With these:

Code:

document.getElementById('Total').value = totalPrice;
document.getElementById('lblTotal').innerHTML = totalPrice;[code]

I do not think that labels can convey the value to your asp page when you submit, that is the reason I have the hidden form field there.  The only other difference is that you use innerHTML instead of value to set the value for the label.  I might be wrong about submitting label values, have never used them.

[quote]5. How do I get the TotalPrice into my asp code? If I use just TotalPrice
    in my asp code, does it simply recognize the variable?[/quote]

In your asp page you just use
myTotal = Request.Form('Total')
then myTotal has the value you wanted.





[COLOR=blue]It's hard to think outside the box when I'm trapped in a cubicle.[/color]

SkyHandle · May 31, 2006

Thank you & thank you. Your code works perfect!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to update a number dynamically in a web page

SkyHandle

Technical User

theniteowl

Programmer

SkyHandle

Technical User

theniteowl

Programmer

SkyHandle

Technical User

Similar threads

Part and Inventory Search

Sponsor