Using drop-down menus and adding

@cmchristJun 22.2006

My department is having a symposium and I need to figure out how to calculate what the person is going to pay. I have the basic stuff down (check the box, and it automatically adds $10, but what I need to do now is figure out how to calculate if more than one person is coming. I have a drop-down box in another cell on the table with values from 0-6. How do I get it to calculate that x amount of people are coming, and we need to add $10 for each person? I’m racking my brain, but I just can’t figure it out.

Thanks so much.

to post a comment

JavaScript

12 Comments(s) _↴

@JMRKERJun 22.2006 — #Do you have a brief sample of the existing code to look at so that I don't have to start from scratch. Not everything on the page, just the code you have started.

@cmchristauthorJun 22.2006 — #Do you have a brief sample of the existing code to look at so that I don't have to start from scratch. Not everything on the page, just the code you have started.[/QUOTE]

Here is the code for the Javascripting nad the table...I hope this helps:

<body><script language="JavaScript">

<!-- hide contents from old browsers

var Cost, GST, PST, Grand_Total;

function tally()

{

Cost = 0;

if (document.orderform.Symposium.checked) { Cost = Cost + 0; }

if (document.orderform.Lunch.checked) { Cost = Cost + 10; }

if (document.orderform.Poster.checked) { Cost = Cost + 0; }

if (document.orderform.Presentation.checked) { Cost = Cost + 0; }

if (document.orderform.Banquet.checked) { Cost = Cost + 40; }

 Cost = dollar(Cost);
 
   Grand_Total = parseFloat(Cost);
   Grand_Total = dollar(Grand_Total);
 
   document.orderform.Total.value = "$" + Cost;
   document.orderform.GrandTotal.value = "$" + Grand_Total;
   }

function dollar (amount)

{

amount = parseInt(amount * 100);

amount = parseFloat(amount/100);

if (((amount) == Math.floor(amount)) && ((amount - Math.floor (amount)) == 0))

{

amount = amount + ".00"

return amount;

}

if ( ((amount * 10) - Math.floor(amount * 10)) == 0)

{

amount = amount + "0";

return amount;

}

if ( ((amount * 100) - Math.floor(amount * 100)) == 0)

{

amount = amount;

return amount;

}

return amount;

}

//-->

</script>

<center>

<p align="center"><img src="Images/bar.gif" width="800" height="50" border="0" align="baseline"></p>

<div id="Layer2" style="position:absolute; left:224px; top:2px; width:0px; height:13px; z-index:2"></div>

<div align="center">

<h2><strong><em>  </em></strong> <em> </em><strong><em>Celebrating the academic and research career of <br>

</em></strong><strong><em>Prof. Thomas G. Spiro, <br>

</em></strong><strong><em>Eugene Higgins Professor of Chemistry </em></strong></h2>

</div>

<h3 align="center"><em> </em><strong><em><img src="Images/index_clip_image002_0000.jpg" width="356" height="232"></em></strong></h3>

<p align="center"><strong><em> </em></strong><em>Princeton</em><em> University<br>

</em><em>Department of Chemistry <br>

</em><em>Frick Laboratory <br>

</em><em>Princeton</em><em> , NJ 08540</em></p>

<h2 align="center"><strong><em> Kindly sign up to attend any or all of the events. Thank you! </em></strong></h2>

<h2 align="center"><strong>  </strong><strong>October 14, 2006 </strong></h2>

</center>

<form method="post" name="orderform" action="mailto:[email protected]" enctype="text/plain"">

<table border="0" align="center">

<tr>

<td colspan="2"><p><span class="style3"><strong><em>Name: </em></strong></span>

<input name="Name" type="text" id="Name" size="100">

<table width="621" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td width="20"> </td>

<td width="350" class="style3"><div align="center">

<h3><em><strong>Event</strong></em></h3>

</div></td>

<td width="125" class="style3"><div align="center">

<h3><em><strong>Fee</strong></em></h3>

</div></td>

<td width="143" class="style3"><div align="center">

<h3><em><strong>Number of Attendees </strong></em></h3>

</div></td>

</tr>

<tr>

<td><input type="checkbox" name="Symposium" value="Symposium_chosen" onClick="tally()"></td>

<td><span class="style3">I/We will attend the Symposium.</span></td>

<td>No fee </td>

<td align="center" valign="middle"><div align="center">

<select name="Symposium1" id="Symposium1">

<option value="0">0</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

</select>

</div></td>

</tr>

<tr>

<td><input type="checkbox" name="Lunch" value="Lunch_chosen" onClick="tally()"></td>

<td><span class="style3">I/We will attend the Lunch.</span></td>

<td> $10 per person </td>

<td align="center" valign="middle"><div align="center">

<select name="Lunch1" id="Lunch1">

<option value="0">0</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

</select>

</div></td>

</tr>

<tr>

<td><input type="checkbox" name="Poster" value="Poster_chosen" onClick="tally()"></td>

<td><span class="style3">I/We will attend the Poster Session</span>.</td>

<td>No fee </td>

<td align="center" valign="middle"><div align="center">

<select name="Poster1" id="Poster1">

<option value="0">0</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

</select>

</div></td>

</tr>

<tr>

<td><input type="checkbox" name="Presentation" value="Presentation_chosen" onClick="tally()"></td>

<td><span class="style3">I/We will present a poster. </span></td>

<td>No fee </td>

<td align="center" valign="middle"><div align="center">

<select name="Presentation1" id="Presentation1">

<option value="0">0</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

</select>

</div></td>

</tr>

<tr>

<td> </td>

<td colspan="3"><span class="style3">Poster Topic: </span> <input name="Topic" type="text" id="Topic" size="75"></td>

</tr>

<tr>

<td><input type="checkbox" name="Banquet" value="Banquet_chosen" onClick="tally()"></td>

<td><span class="style3">I/We will attend the Reception/Banquet.</span></td>

<td>$40 per person </td>

<td align="center" valign="middle"><div align="center">

<select name="Banquet1" id="Banquet1">

<option value="0">0</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

</select>

</div></td>

</tr>

</table>

<p>Total

<input type="text" name="Total" value="$0" size="7">

<table width="171" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td width="82"><input type="Submit" value="Send Order"></td>

<td width="177"><img src="Images/trans.gif" width="25" height="25"></td>

<td width="241"><input type="RESET" value="Reset Order"></td>

</tr>

</table>

</tr>

</table>

</form>

@JMRKERJun 22.2006 — #A lot more code that I expected :eek: so I'll touch back later. ?

@cmchristauthorJun 22.2006 — #A lot more code that I expected :eek: so I'll touch back later. ?[/QUOTE]

Thanks you so much. I really do appreciate it.

@JMRKERJun 22.2006 — #Almost there:

Changed:

[CODE]
 function tally()
 {
 Cost = 0;
 if (document.orderform.Symposium.checked) { Cost = Cost + 0; }
 if (document.orderform.Lunch.checked) {
 Cost = Cost + 10; 
 var sel=document.orderform.Lunch1.options[document.orderform.Lunch1.selectedIndex].value;
 Cost = Cost + (10 * parseInt(sel))
 }
 if (document.orderform.Poster.checked) { Cost = Cost + 0; }
 if (document.orderform.Presentation.checked) { Cost = Cost + 0; }
 if (document.orderform.Banquet.checked) {
 Cost = Cost + 40; 
 var sel=document.orderform.Banquet1.options[document.orderform.Banquet1.selectedIndex].value;
 Cost = Cost + (40 * parseInt(sel))
 }
 [/CODE]

Now I need to locate the <SELECT> areas to add an OnChange() event to call tally() again, I think. May need to change the way Cost is calculated to avoid adding it in more than once. Need to check this out next.

@cmchristauthorJun 22.2006 — #Almost there:

Changed:

[CODE]
 function tally()
 {
 Cost = 0;
 if (document.orderform.Symposium.checked) { Cost = Cost + 0; }
 if (document.orderform.Lunch.checked) {
 Cost = Cost + 10; 
 var sel=document.orderform.Lunch1.options[document.orderform.Lunch1.selectedIndex].value;
 Cost = Cost + (10 * parseInt(sel))
 }
 if (document.orderform.Poster.checked) { Cost = Cost + 0; }
 if (document.orderform.Presentation.checked) { Cost = Cost + 0; }
 if (document.orderform.Banquet.checked) {
 Cost = Cost + 40; 
 var sel=document.orderform.Banquet1.options[document.orderform.Banquet1.selectedIndex].value;
 Cost = Cost + (40 * parseInt(sel))
 }
 [/CODE]

@JMRKERJun 22.2006 — #Two more changes and I think you're almost done. ?

[CODE]
 <select name="Lunch1" id="Lunch1" onChange="tally()">
 ...
 and
 ...
 <select name="Banquet1" id="Banquet1"  onChange="tally()">
 [/CODE]

I'm not sure of your method of calculation, but I would change the column description from:

[CODE]
 <h3><em><strong>Number of Attendees </strong></em></h3>
 [/CODE]

to:

[CODE]
 <h3><em><strong>Number of Additional Attendees </strong></em></h3>
 [/CODE]

@cmchristauthorJun 22.2006 — #Two more changes and I think you're almost done. ?

[CODE]
 <select name="Lunch1" id="Lunch1" onChange="tally()">
 ...
 and
 ...
 <select name="Banquet1" id="Banquet1"  onChange="tally()">
 [/CODE]

I'm not sure of your method of calculation, but I would change the column description from:

[CODE]
 <h3><em><strong>Number of Attendees </strong></em></h3>
 [/CODE]

to:

[CODE]
 <h3><em><strong>Number of Additional Attendees </strong></em></h3>
 [/CODE]

instead since you have already added $10 or $40 with the first person.

Another small suggestion: Why have selection boxes for additional attendees if there is no cost involved in the calculation? Is it just to allow for room size? :rolleyes:[/QUOTE]

It's not doing anything at all now. I'm just going to throw the computer out the window and be done with it. We have that because the person planning the event needs a head count of everyone attending every event for some reason...she's EXTREMELY anal.

@JMRKERJun 22.2006 — #Point of clarification: It's not doing anything at all now. I'm just going to throw the computer out the window and be done with it.[/QUOTE]

Program is not working, computer is not working or you're not working?

I know of only three kinds of computer failures:

1. Hardware failure - components die.

2. Software failure - program code dies.

3. Mushware failure - coder's mind turns to mush.

The code I finished is available if you have no backups. ?

@cmchristauthorJun 22.2006 — #Point of clarification:

Program is not working, computer is not working or you're not working?

I know of only three kinds of computer failures:

1. Hardware failure - components die.

2. Software failure - program code dies.

3. Mushware failure - coder's mind turns to mush.

The code I finished is available if you have no backups. ?[/QUOTE]

Is there a D. All of the above?

I think I made the changes in the right place, but, when I go into view it in the browser, and I input everything, it just stares back at me. It's giving me a headache. There's a reason I don't do this stuff on a daily basis. I need a raise...and a BIG ONE at that.

@JMRKERJun 22.2006 — #I have attached a '.txt' file of my changes from your original code.

Remember to save with a '.htm' or '.html' extension in the same directory as where the original was (be sure to back-up info first). Also, make sure the privliges are set correctly to access the file. You should be able to save it to your hard drive (in a subdirectory with the appropriate images) and execute it from there if your server is down. [This is how I tested it to make it work.]

Also note that you logic will NOT display any different amount via "tally()' until you have 'radio button' clicked that has something other than 'No Fee' associated with it. Just selecting the "Number of Additional Attendees' will not update the totals (your logic) until the 'radio button' is set.

Good Luck! ?

[upl-file uuid=e3ce3bc3-7a34-43c5-8485-258165793f76 size=6kB]CostCalcs.txt[/upl-file]

@cmchristauthorJun 22.2006 — #I owe you BIG TIME!!! Thank you so VERY VERY VERY VERY much.

Also in #JavaScript _↴

PNGtransparency, IE6, the png file's height increases Types Of TextBox Validation + date textbox?getting event invoking object

Success!

Help @cmchrist spread the word by sharing this article on Twitter...

Tweet This

Using drop-down menus and adding

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Using drop-down menus and adding

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴