Javascript Math

@ThaSpYAug 30.2004

So I want to add a little dynamic touch to my order form. First of all, I don’t program in javascript, but I can take a script and modify it to my needs. The form I have basically has all numeric values used for calculation a grand total price.

Here is an example: ~~[url]~~http://www.xibitony.net/order.php[/url]

Play around with it, but what I basically want to do is eliminate the “Calculate Cost” button. Could someone write up a quick little example as to how to accomplish this? Thanks!

to post a comment

JavaScript

30 Comments(s) _↴

@javaNoobieAug 30.2004 — #is this what you wanted? don't really know whats the maths so i jus multiplied everything. ?

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=windows-1252"&gt;
 &lt;title&gt;Example&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 var prices = new Array('10','15','20','25','30','35','40','45','50','55','60');
 var privOrPub = new Array('1','2');
 var term = new Array('1','0.9','0.85','0.8');
 
 <i>	</i>function calculate(f){
 <i>	</i>	var gamePrice = prices[f.game.value];
 <i>	</i>	var servType = privOrPub[f.type.value];
 <i>	</i>	var numOfPlayers = f.slots.value;
 <i>	</i>	var discount = term[f.term.value];
 
 <i>	</i>	alert(gamePrice);
 <i>	</i>	alert(servType);
 <i>	</i>	alert(numOfPlayers);
 <i>	</i>	alert(discount);
 
 <i>	</i>	var total = Number(gamePrice) * Number(servType) * Number(numOfPlayers) * Number(discount);
 
 <i>	</i>	alert('Total is:' + total);
 <i>	</i>}
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form name="frmCalulate" action="" method="post"&gt;
 &lt;table cellSpacing="0" cellPadding="0" border="0"&gt;
 &lt;tr&gt;
 &lt;td width="10"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;b&gt;Game&lt;/b&gt;&lt;br&gt;
 Servers Available&lt;/td&gt;
 &lt;td width="25"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;select name="game" onchange="calculate(this.form);"&gt;
 &lt;option value="0" selected&gt;America's Army&lt;/option&gt;
 &lt;option value="1"&gt;Battlefield 1942&lt;/option&gt;
 &lt;option value="2"&gt;Battlefield Vietnam&lt;/option&gt;
 &lt;option value="3"&gt;Call of Duty&lt;/option&gt;
 &lt;option value="4"&gt;Half-Life&lt;/option&gt;&lt;option value='hlcs'&gt;Half-Life: Counter-Strike&lt;/option&gt;
 &lt;option value="5"&gt;Half-Life: Counter-Strike: Condition Zero&lt;/option&gt;
 &lt;option value="6"&gt;Half-Life: Day of Defeat&lt;/option&gt;
 &lt;option value="7"&gt;Half-Life: Team Fortress Classic&lt;/option&gt;
 &lt;option value="8"&gt;Medal of Honor Allied Assault&lt;/option&gt;
 &lt;option value="9"&gt;Raven Shield&lt;/option&gt;
 &lt;option value="10"&gt;Raven Shield: Athena Sword&lt;/option&gt;
 &lt;/select&gt;
 &lt;/td&gt;
 &lt;td width="10"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td width="10" height="10"&gt;&lt;/td&gt;
 &lt;td height="10"&gt;&lt;/td&gt;
 &lt;td width="25" height="10"&gt;&lt;/td&gt;
 &lt;td height="10"&gt;&lt;/td&gt;
 &lt;td width="10" height="10"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td width="10"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;b&gt;Type&lt;/b&gt;&lt;br&gt;
 Public or Private&lt;/td&gt;
 &lt;td width="25"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;select name="type" onchange="calculate(this.form)"&gt;
 &lt;option value="0" selected&gt;Public&lt;/option&gt;
 &lt;option value="1"&gt;Private&lt;/option&gt;
 &lt;/select&gt;&lt;/td&gt;
 &lt;td width="10"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td width="10" height="10"&gt;&lt;/td&gt;
 &lt;td height="10"&gt;&lt;/td&gt;
 &lt;td width="25" height="10"&gt;&lt;/td&gt;
 &lt;td height="10"&gt;&lt;/td&gt;
 &lt;td width="10" height="10"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td width="10"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;b&gt;Slots&lt;/b&gt;&lt;br&gt;
 Maximum Players&lt;/td&gt;
 &lt;td width="25"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;input type="textbox" name="slots" size="3" value="10" onchange="if(this.value&gt;=10 &amp;&amp; this.value%2 == 0){calculate(this.form)}else{alert('Num mus be more than 10 or an even number');this.value='10';}"&gt;&lt;/td&gt;
 &lt;td width="10"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td width="10" height="10"&gt;&lt;/td&gt;
 &lt;td height="10"&gt;&lt;/td&gt;
 &lt;td width="25" height="10"&gt;&lt;/td&gt;
 &lt;td height="10"&gt;&lt;/td&gt;
 &lt;td width="10" height="10"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td width="10"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;b&gt;Term&lt;/b&gt;&lt;br&gt;
 Billing Cycle&lt;/td&gt;
 &lt;td width="25"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;select name="term" onchange="calculate(this.form)"&gt;
 &lt;option value="0" selected&gt;Monthly&lt;/option&gt;
 &lt;option value="1"&gt;Quarterly (10% Discount)&lt;/option&gt;
 &lt;option value="2"&gt;Biannually (15% Discount)&lt;/option&gt;
 &lt;option value="3"&gt;Yearly (20% Discount)&lt;/option&gt;
 &lt;/select&gt;&lt;/td&gt;
 &lt;td width="10"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 &lt;/form&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@ThaSpYauthorAug 30.2004 — #Excellent! Thank you for your reply! One other simple request however:

Instead of alerting the value, I'd like it to automatically update the value in a textbox everytime a variable is changed? Know what I mean? Like <input type='textbox' name='grandtotal' value='[COLOR=red]JavaScripted Total Updates Here Automatically[/COLOR]' readonly> I hope this isn't too much to ask. Thank you again!

@javaNoobieAug 30.2004 — #simply delete the alert(). add the following code at the end of the function
f.[color=red]<textboxnamehere>[/color].value = total

@ThaSpYauthorAug 30.2004 — #Thank you once again! So now it adds a value like "23.50" to the textbox, and I know this sounds really simple and stupid, but how would I make the textbox value "$23.50"? Regards.

@neil9999Aug 30.2004 — #Try this:

f.<textboxnamehere>.value="$"+total

Neil

@ThaSpYauthorAug 30.2004 — #Ah, of course! See, I'm a PHP developer and I'm used to connecting two strings with a period, not a plus sign. Thanks.

@neil9999Aug 30.2004 — #It might be a good idea to keep the 'calculate cost' button there just incase the user has javascript disabled.

Neil

@ThaSpYauthorAug 30.2004 — #Hmmm, another question from the newbie if I may. Right now for the textbox fields, it will only update the calculation function after the field loses focus, if that makes any sense. How can I set it so it will update the total as they type in the slots textbox?

@ Neil: Thanks for the tip! ?

@javaNoobieAug 30.2004 — #use onkeyup event.

NOTE: if you really decide to use this.. there's going to be some modifications to the code to suit this.

*edit: as an after thought... not recommended since it requires to have a minimal value of 10. So if the user presses backspace to change the value, onkeyup will fire and do validation for values<10. User will probably have to enter 104 and delete the '0' to make 14. quite troublesome

@ThaSpYauthorAug 30.2004 — #Thanks! And that should be alright, I've already heavily modified your code, and this didn't seem to change much by adding that event. Like I said, I can't write javascript from scratch worth a darn, but I'm fairly comfortable modifying other scripts. ?

Okay, I think I've almost mastered what I've been trying to create here. There's just one last thing that I'd like to see. Instead of a textbox field where the slots row is, I think it would be best to keep it a select field like the others. The thing is, when you change the Game field, it will change the options available for the slots field. Each game will have a minimum and a maximum amount of players, and they are all different. So I only want it to display options between the numbers X and Y. Not only that, I want it to only display the even numbers. Complicated? I hope not. If it's not too much to ask...

@javaNoobieAug 30.2004 — #with a few mod..

&lt;html&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=windows-1252"&gt;
 &lt;title&gt;Example&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 var prices = new Array('10','15','20','25','30','35','40','45','50','55','60','65');
 var privOrPub = new Array('1','2');
 var term = new Array('1','0.9','0.85','0.8');
 
 <i>	</i>var minimum = new Array('10','12','14','12','12','14','16','12','10','12','10','14');
 <i>	</i>var max = new Array('32','26','30','28','34','28','30','30','30','24','22','28');
 
 <i>	</i>function calculate(f){
 <i>	</i>	var gamePrice = prices[f.game.value];
 <i>	</i>	var servType = privOrPub[f.type.value];
 <i>	</i>	var numOfPlayers = f.player.options[f.player.selectedIndex];
 <i>	</i>	var discount = term[f.term.value];
 
 <i>	</i>	var total = Number(gamePrice) * Number(servType) * Number(numOfPlayers) * Number(discount);
 
 <i>	</i>	f.grandTotal.value = total;
 <i>	</i>}
 
 <i>	</i>function changeMaxMin(frm){
 <i>	</i>	var index = frm.game.value;
 <i>	</i>	var minVal = Number(minimum[index]);
 <i>	</i>	var maxVal = Number(max[index]);
 
 <i>	</i>	for(var j=0; j&lt;frm.player.options.length; j++){
 <i>	</i>		frm.player.options[j] = null;
 <i>	</i>	}
 
 <i>	</i>	var count = 0;
 <i>	</i>	for(var i=minVal; i&lt;=maxVal; i+=2){
 <i>	</i>		frm.player.options[count] = new Option(i);
 <i>	</i>		count++;
 <i>	</i>	}
 <i>	</i>}
 
 <i>	</i>onload = function() {
 <i>	</i>	changeMaxMin(document.frmCalculate);
 <i>	</i>}
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form name="frmCalculate" action="" method="post"&gt;
 &lt;table cellSpacing="0" cellPadding="0" border="0"&gt;
 &lt;tr&gt;
 &lt;td width="10"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;b&gt;Game&lt;/b&gt;&lt;br&gt;
 Servers Available&lt;/td&gt;
 &lt;td width="25"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;select name="game" onchange="changeMaxMin(this.form,this);calculate(this.form);"&gt;
 &lt;option value="0" selected&gt;America's Army&lt;/option&gt;
 &lt;option value="1"&gt;Battlefield 1942&lt;/option&gt;
 &lt;option value="2"&gt;Battlefield Vietnam&lt;/option&gt;
 &lt;option value="3"&gt;Call of Duty&lt;/option&gt;
 &lt;option value="4"&gt;Half-Life&lt;/option&gt;
 &lt;option value='5'&gt;Half-Life: Counter-Strike&lt;/option&gt;
 &lt;option value="6"&gt;Half-Life: Counter-Strike: Condition Zero&lt;/option&gt;
 &lt;option value="7"&gt;Half-Life: Day of Defeat&lt;/option&gt;
 &lt;option value="8"&gt;Half-Life: Team Fortress Classic&lt;/option&gt;
 &lt;option value="9"&gt;Medal of Honor Allied Assault&lt;/option&gt;
 &lt;option value="10"&gt;Raven Shield&lt;/option&gt;
 &lt;option value="11"&gt;Raven Shield: Athena Sword&lt;/option&gt;
 &lt;/select&gt;
 &lt;/td&gt;
 &lt;td width="10"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td width="10" height="10"&gt;&lt;/td&gt;
 &lt;td height="10"&gt;&lt;/td&gt;
 &lt;td width="25" height="10"&gt;&lt;/td&gt;
 &lt;td height="10"&gt;&lt;/td&gt;
 &lt;td width="10" height="10"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td width="10"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;b&gt;Type&lt;/b&gt;&lt;br&gt;
 Public or Private&lt;/td&gt;
 &lt;td width="25"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;select name="type" onchange="calculate(this.form)"&gt;
 &lt;option value="0" selected&gt;Public&lt;/option&gt;
 &lt;option value="1"&gt;Private&lt;/option&gt;
 &lt;/select&gt;&lt;/td&gt;
 &lt;td width="10"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td width="10" height="10"&gt;&lt;/td&gt;
 &lt;td height="10"&gt;&lt;b&gt;players&lt;/b&gt;&lt;/td&gt;
 &lt;td width="25" height="10"&gt;&lt;/td&gt;
 &lt;td height="10"&gt;&lt;select name="player" onchange="calculate(this.form)"&gt;&lt;/select&gt;&lt;/td&gt;
 &lt;td width="10" height="10"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td width="10" height="10"&gt;&lt;/td&gt;
 &lt;td height="10"&gt;&lt;/td&gt;
 &lt;td width="25" height="10"&gt;&lt;/td&gt;
 &lt;td height="10"&gt;&lt;/td&gt;
 &lt;td width="10" height="10"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td width="10"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;b&gt;Term&lt;/b&gt;&lt;br&gt;
 Billing Cycle&lt;/td&gt;
 &lt;td width="25"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;select name="term" onchange="calculate(this.form)"&gt;
 &lt;option value="0" selected&gt;Monthly&lt;/option&gt;
 &lt;option value="1"&gt;Quarterly (10% Discount)&lt;/option&gt;
 &lt;option value="2"&gt;Biannually (15% Discount)&lt;/option&gt;
 &lt;option value="3"&gt;Yearly (20% Discount)&lt;/option&gt;
 &lt;/select&gt;&lt;/td&gt;
 &lt;td width="10"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;/td&gt;
 &lt;td&gt;&lt;/td&gt;
 &lt;td&gt;&lt;/td&gt;
 &lt;td&gt;&lt;input type="text" name="grandTotal" readonly&gt;&lt;/td&gt;
 &lt;td&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 &lt;/form&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@ThaSpYauthorAug 30.2004 — #Alright, your example works, and thank you! But I'm having trouble implimenting it into my modification. Perhaps you could troubleshoot my code and let me know where I went wrong?

&lt;html&gt;
 
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=windows-1252"&gt;
 &lt;title&gt;Example&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 var pubprices = new Array();
 pubprices[1]="6.00";
 pubprices[2]="5.50";
 
 <i>	</i>var privprices = new Array();
 <i>	</i>	privprices[1]="4.00";
 <i>	</i>	privprices[2]="3.50";
 
 <i>	</i>var minimum = new Array();
 <i>	</i>	minimum[1]="8";
 <i>	</i>	minimum[2]="10";
 
 <i>	</i>var maximum = new Array();
 <i>	</i>	maximum[1]="64";
 <i>	</i>	maximum[2]="32";
 
 <i>	</i>var term = new Array();
 <i>	</i>	term[1]="0";
 <i>	</i>	term[3]="0.1";
 <i>	</i>	term[6]="0.15";
 <i>	</i>	term[12]="0.2";
 
 <i>	</i>function calculate(f){
 <i>	</i>	f.slots.value=Math.round(f.slots.value);
 <i>	</i>	if(f.type.value==0){
 <i>	</i>		var sub = pubprices[f.game.value] * f.slots.value * f.term.value;
 <i>	</i>	}else{
 <i>	</i>		var sub = privprices[f.game.value] * f.slots.value * f.term.value;
 <i>	</i>	}
 <i>	</i>	var discount = sub * term[f.term.value];
 <i>	</i>	var total = sub - discount;
 <i>	</i>	f.gentotal.value = "$"+total.toFixed(2);
 <i>	</i>}
 
 <i>	</i>function changeMaxMin(frm){
 <i>	</i>	var index = frm.game.value;
 <i>	</i>	var minVal = Number(minimum[index]);
 <i>	</i>	var maxVal = Number(maximum[index]);
 
 <i>	</i>	for(var j=0; j&lt;frm.slots.options.length; j++){
 <i>	</i>		frm.slots.options[j] = null;
 <i>	</i>	}
 
 <i>	</i>	var count = 0;
 <i>	</i>	for(var i=minVal; i&lt;=maxVal; i+=2){
 <i>	</i>		frm.slots.options[count] = new Option(i);
 <i>	</i>		count++;
 <i>	</i>	}
 <i>	</i>}
 
 <i>	</i>onload = function() {
 <i>	</i>	changeMaxMin(document.serverform);
 <i>	</i>}
 
 &lt;/script&gt;
 &lt;/head&gt;
 
 &lt;body onload="calculate(serverform)"&gt;
 
 &lt;form name="serverform" action="" method="post"&gt;
 &lt;table cellSpacing="0" cellPadding="0" border="0"&gt;
 &lt;tr&gt;
 &lt;td width="10"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;b&gt;Game&lt;/b&gt;&lt;br&gt;
 Servers Available&lt;/td&gt;
 &lt;td width="25"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;select name="game" onchange="changeMaxMin(this.form,this);calculate(this.form);"&gt;
 &lt;option value="2"&gt;Battlefield 1942&lt;/option&gt;
 &lt;option value="1"&gt;Battlefield Vietnam&lt;/option&gt;
 &lt;/select&gt; &lt;/td&gt;
 &lt;td width="10"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td width="10" height="10"&gt;&lt;/td&gt;
 &lt;td height="10"&gt;&lt;/td&gt;
 &lt;td width="25" height="10"&gt;&lt;/td&gt;
 &lt;td height="10"&gt;&lt;/td&gt;
 &lt;td width="10" height="10"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td width="10"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;b&gt;Type&lt;/b&gt;&lt;br&gt;
 Public or Private&lt;/td&gt;
 &lt;td width="25"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;select name="type" onchange="calculate(this.form)"&gt;
 &lt;option value="0" selected&gt;Public&lt;/option&gt;
 &lt;option value="1"&gt;Private&lt;/option&gt;
 &lt;/select&gt;&lt;/td&gt;
 &lt;td width="10"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td width="10" height="10"&gt;&lt;/td&gt;
 &lt;td height="10"&gt;&lt;/td&gt;
 &lt;td width="25" height="10"&gt;&lt;/td&gt;
 &lt;td height="10"&gt;&lt;/td&gt;
 &lt;td width="10" height="10"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td width="10"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;b&gt;Slots&lt;/b&gt;&lt;br&gt;
 Maximum Players&lt;/td&gt;
 &lt;td width="25"&gt;&lt;/td&gt;
 &lt;td&gt;
 &lt;select name="slots" onchange="calculate(this.form)"&gt;&lt;/select&gt;&lt;/td&gt;
 &lt;td width="10"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td width="10" height="10"&gt;&lt;/td&gt;
 &lt;td height="10"&gt;&lt;/td&gt;
 &lt;td width="25" height="10"&gt;&lt;/td&gt;
 &lt;td height="10"&gt;&lt;/td&gt;
 &lt;td width="10" height="10"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td width="10"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;b&gt;Term&lt;/b&gt;&lt;br&gt;
 Billing Cycle&lt;/td&gt;
 &lt;td width="25"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;select name="term" onchange="calculate(this.form)"&gt;
 &lt;option value="1" selected&gt;Monthly&lt;/option&gt;
 &lt;option value="3"&gt;Quarterly (10% Discount)&lt;/option&gt;
 &lt;option value="6"&gt;Biannually (15% Discount)&lt;/option&gt;
 &lt;option value="12"&gt;Yearly (20% Discount)&lt;/option&gt;
 &lt;/select&gt;&lt;/td&gt;
 &lt;td width="10"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td width="10" height="10"&gt;&lt;/td&gt;
 &lt;td height="10"&gt;&lt;/td&gt;
 &lt;td width="25" height="10"&gt;&lt;/td&gt;
 &lt;td height="10"&gt;&lt;/td&gt;
 &lt;td width="10" height="10"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td width="10"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;b&gt;Cost&lt;/b&gt;&lt;br&gt;
 Per Term&lt;/td&gt;
 &lt;td width="25"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;input type="text" name="gentotal" size="10" style="cursor: default" readonly&gt;&lt;/td&gt;
 &lt;td width="10"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 &lt;/form&gt;
 
 &lt;/body&gt;
 
 &lt;/html&gt;

@javaNoobieAug 31.2004 — #Just exactly went wrong?

Btw.. your onload shld be calculate([b]document[/b].serverform). And i just noticed another mistake i made in the prev post that you copied over.

<i>
 </i>select name="game" onchange="changeMaxMin(this.form,this)"

you can take out the second argument.

Hope this helps

*edit: my mistake.. i didnt see that you actually have 2 onload. Take out the onload event in the body tag. instead of onload = new function(), change to window.onload = new function(). [my mistake for leaving out the window object]

*edit2: your codes should be changed from [b]f.slots.value[/b] to [b]f.slots.options[f.slots.selectedIndex].text[/b] because f.slots.value will return an empty value

@ThaSpYauthorAug 31.2004 — #I don't know how to thank you for all your help. I've definately learned a lot new things about JavaScript during this little project. Next time I'll be able to be a lot more independant trying new things. See you around!

ThaSpY

@javaNoobieAug 31.2004 — #Thats what this forum is for ?. Glad to be of help

@ThaSpYauthorAug 31.2004 — #Alright, I know I said I'd leave ya alone ? but I have one more request:

For the textbox that contains the total cost, is there a way where it could update just plain text, not a form field? Like using some sort of div or span tag or what not? Know what I mean? Thanks.

@javaNoobieAug 31.2004 — #change

[i]<input type="text" name="gentotal" size="10" style="cursor: default" readonly>[/i]

to

[i]<div name="gentotal"></div>[/i]

also..

[i]f.gentotal.value = "$"+total.toFixed(2);[/i]

to

[i]document.getElementById('gentotal').innerHTML = "$"+total.toFixed(2);[/i]

@neil9999Aug 31.2004 — #Try changing the latter to something like this:

thetotal=document.getElementById('gentotal');

thetotal.firstChild.nodeValue="$"+total.toFixed(2);

Should make it more compatiable (doesn't use innerHTML), although you'll need more code to add anything but text. See http://www.webdeveloper.com/forum/showthread.php?s=&threadid=32137&highlight=innerHTML

The first should be:

<div [b]id[/b]="gentotal"></div>

Neil

@ThaSpYauthorAug 31.2004 — #Thank you both! I used the first one because I wanted a few <b> tags in the text.

And honestly, how many browsers don't support javascript? I would guess not many, or at least a very low percentage.

@ThaSpYauthorSep 02.2004 — #Hello again,

My script seems to be acting up now, mainly in the "Slots" part. For example, for one game the scripts calls for slots between 8 and 16, but it displays irrational values above 16 when it shouldn't. I'm guessing the problem lies in this block of code:

<i>
 </i>function changeMaxMin(frm){
 var index = frm.game.value;
 var minVal = Number(minimum[index]);
 var maxVal = Number(maximum[index]);
 
 <i>	</i>for(var j=0; j&lt;frm.slots.options.length; j++){
 <i>	</i>	frm.slots.options[j] = null;
 <i>	</i>}
 
 <i>	</i>var count = 0;
 <i>	</i>for(var i=minVal; i&lt;=maxVal; i+=2){
 <i>	</i>	frm.slots.options[count] = new Option(i);
 <i>	</i>	count++;
 <i>	</i>}
 }

Try it out for yourself: [*url here*] Switch the game to Raven Shield. In the JavaScript it calls for all even numbers between 8 and 16, but it shows an extra 32 in there...

If you'd like me to post the entire JavaScript again, let me know. Thanks for your help!

@ThaSpYauthorSep 02.2004 — #Well I took the liberty to try and take this one into my own hands. I researched for a javascript form site, and found a way to eliminate this code:

<i>
 </i>for(var j=0; j&lt;frm.slots.options.length; j++){
 frm.slots.options[j] = null;
 }

and replace it with this code:

<i>
 </i>document.forms['serverform'].slots.options.length = 0;

and not only did it work, it's probably better and easier, isn't it?

@javaNoobieSep 02.2004 — #Switch the game to Raven Shield. In the JavaScript it calls for all even numbers between 8 and 16, but it shows an extra 32 in there...
[/quote]i don't see an extra 32..

@ThaSpYauthorSep 02.2004 — #Correct, as I stated above, I found a solution to the problem, and I was just wondering if it was an 'accepted practice' or not.

[i]Edit: Sorry, I should have been more descriptive in my post above. I fixed the problem in the post above that by replacing the code, and was inquiring on the technique.[/i]

@ThaSpYauthorSep 02.2004 — #Okay, here's a tricky one:

Whenever they select X game, I want it to display a whole different table on the same page somewhere, and when they de-select the game by selecting a different one, I want the table to disappear.

I've tried using innerHTML and Div tags, but it doesn't interpret tables correctly. Any suggestions?

@neil9999Sep 02.2004 — #Try using span tags instead of divs.

Neil

@ThaSpYauthorSep 02.2004 — #Thank you, sir.

@neil9999Sep 02.2004 — #It's my pleasure sir

@ThaSpYauthorSep 02.2004 — #Well, it worked, but not perfectly.

What I am using it for is to basically place a table row among others already existing. So my span tag is as follows:

<i>
 </i>                  &lt;tr&gt;
 &lt;td height="10"&gt;&lt;/td&gt;
 &lt;td width="25" height="10"&gt;&lt;/td&gt;
 &lt;td height="10"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;span id="hlopt"&gt;&lt;/span&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;b&gt;Location&lt;/b&gt;&lt;br&gt;
 Data Center&lt;/td&gt;
 &lt;td width="25"&gt;&lt;/td&gt;
 &lt;td&gt;&lt;select name="location"&gt;
 &lt;option selected&gt;Dallas, TX&lt;/option&gt;
 &lt;option&gt;Chicago, IL&lt;/option&gt;
 &lt;option&gt;Richmond, VA&lt;/option&gt;
 &lt;option&gt;San Jose, CA&lt;/option&gt;
 &lt;/select&gt;&lt;/td&gt;
 &lt;/tr&gt;

And the javascript function to replace it:

<i>
 </i>	function extraOptions(fm){
 if(fm.game.value==3||fm.game.value==4||fm.game.value==5||fm.game.value==6||fm.game.value==7){
 document.getElementById('hlopt').innerHTML = "&lt;tr&gt;&lt;td&gt;&lt;b&gt;HLTV&lt;/b&gt;&lt;br&gt;Settings&lt;/td&gt;&lt;td width='25'&gt;&lt;/td&gt;&lt;td&gt;&lt;select name='hl_hltv'&gt;&lt;option value='1'&gt;On&lt;/option&gt;&lt;option value='0'&gt;Off&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td height='10'&gt;&lt;/td&gt;&lt;td width='25' height='10'&gt;&lt;/td&gt;&lt;td height='10'&gt;&lt;/td&gt;&lt;/tr&gt;";
 }else{
 document.getElementById('hlopt').innerHTML = "";
 }
 }

But when the code is actually executed, it doesn't place the table row where the span tag is, it places it randomly above the table in an unformatted state.

Example: http://www.foxservers.net/order.php

Change the game from AA to any Half-Life option. The appearing options should be placed right above the "Location" row, but instead it appears randomly above the table. Any ideas? Thanks.