| micro_sucks |
12-24-2003 08:27 PM |
Interactive website form help
I am trying to learn how to create an online product price configurator web page much like alienware, dell, ect. I now have this source for my first page which I just ripped this off another website and adjusted it a little please take a look at this, and this is not anything I am going to use, I am just trying to learn right now. :
Code:
<HTML>
<HEAD>
<TITLE>WickedServers.com Services</TITLE>
<meta name="description" content="WickedServers.com services include Game server rentals, dedicated game servers, voice servers, co-location and web hosting">
<meta name="keywords" content="Game server rentals, dedicated game servers, voice servers, co-location, web hosting">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link href="http://services.wickedservers.com/services/services.css" rel="stylesheet" type="text/css">
<SCRIPT language=JavaScript>
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</SCRIPT>
</HEAD>
<!-- body start --><SCRIPT language=JavaScript>
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
var arrGameType = new Array();
arrGameType[0]=0.00;
arrGameType[63]=3.50;
var arrWebHostingType = new Array();
arrWebHostingType[52]=0.00;
arrWebHostingType[54]=0.00;
arrWebHostingType[45]=7.00;
arrWebHostingType[46]=27.00;
arrWebHostingType[47]=52.00;
function OnChangeCategory(form)
{
//Get checked values
var stats;
var web;
var mods;
var voice;
if( form.WebHosting[0].checked )
{
var web = form.WebHosting[0].value;
}
else if( form.WebHosting[1].checked )
{
var web = form.WebHosting[1].value;
}
else if( form.WebHosting[2].checked )
{
var web = form.WebHosting[2].value;
}
else if( form.WebHosting[3].checked )
{
var web = form.WebHosting[3].value;
}
else if( form.WebHosting[4].checked )
{
var web = form.WebHosting[4].value;
}
var Total = ( g_dTotal ) + ( arrWebHostingType[(web - 0 )] ) + ( arrGameType[(form.GameType.value - 0)] * (form.num_players.value - 0) );
UpdatePrice (Total);
form.game_server_type.value = (form.GameType.value - 0);
form.game_features_type_web_hosting.value = (web - 0);
form.location_selection.value = (form.location.value - 0);
}
function ChangeinnerHTML(layerid, htmlcode) {
var statement = '';
if (document.all)
statement += "document.all['" + layerid + "'].innerHTML = '" + htmlcode + "';";
else if (document.getElementById)
statement += "document.getElementById('" + layerid + "').innerHTML = '" + htmlcode + "';";
eval(statement);
}
function ValidNumber (str)
{
return ! isNaN (str * 1);
}
</SCRIPT>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="46%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" height="1" bgcolor="#62605B"><img src="/images/gray_dot.gif" width="1" height="1"></td>
<td height="1" bgcolor="#62605B"><img src="/images/gray_dot.gif" width="1" height="1"></td>
<td width="1" height="1" bgcolor="#62605B"><img src="/images/gray_dot.gif" width="1" height="1"></td>
</tr>
<tr> </tr>
<tr>
<td width="1" height="1" bgcolor="#62605B"><img src="/images/gray_dot.gif" width="1" height="1"></td>
<td height="1" bgcolor="#62605B"><img src="/images/gray_dot.gif" width="1" height="1"></td>
<td width="1" height="1" bgcolor="#62605B"><img src="/images/gray_dot.gif" width="1" height="1"></td>
</tr>
</table></td>
</tr>
</table>
<table width="102%" border="0" cellpadding="4" cellspacing="4">
<tr>
<td width="964" height="628" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" height="1" bgcolor="#62605B"><img src="../../../images/gray_dot.gif" width="1" height="1"></td>
<td height="1" bgcolor="#62605B"><img src="../../../images/gray_dot.gif" width="1" height="1"></td>
<td width="1" height="1" bgcolor="#62605B"><img src="../../../images/gray_dot.gif" width="1" height="1"></td>
</tr>
<tr>
<td width="1" bgcolor="#62605B"><img src="../../../images/gray_dot.gif" width="1" height="1"></td>
<td align="center" valign="top" bgcolor="#252525"><form name="form1" method="post" action="info.php">
<table width="100%" border="0">
<tr>
<td colspan="3" valign="top"><table width="100%" border="0">
<tr>
<td width="52%"><font color="#FFCC00" size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong>Select
Your Game Server Options</strong></font> </td>
<td width="28%" align="right"><font color="#FFCC00"><strong>Total
Monthly Fee:</strong></font></td>
<td width="20%"><span class=price><b>$</b><b id=pricetop name="pricetop"></b></span></td>
</tr>
</table></td>
</tr>
<tr valign="top">
<td colspan="3"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr bgcolor="#62605B">
<td><img src="/images/spacer.gif" width="1" height="1"></td>
<td><img src="/images/spacer.gif" width="1" height="1"></td>
<td><img src="/images/spacer.gif" width="1" height="1"></td>
<td><img src="/images/spacer.gif" width="1" height="1"></td>
</tr>
<tr bgcolor="#333331">
<td width="8" valign="middle"><img src="/images/spacer.gif" width="4" height="20"></td>
<td width="82%" valign="middle"><font class="selection">Location</font></td>
<td width="12" align="center" valign="middle"> </td>
<td width="67" valign="middle"> <div align="right"><a href="javascript:;" onClick="MM_openBrWindow('../../../learnmore/datacenters.html','learnmore','scrollbars=yes,width=600,height=400')" class="learnmore">Learn
More</a></div></td>
</tr>
<tr bgcolor="#62605B">
<td><img src="/images/spacer.gif" width="1" height="1"></td>
<td><img src="/images/spacer.gif" width="1" height="1"></td>
<td><img src="/images/spacer.gif" width="1" height="1"></td>
<td><img src="/images/spacer.gif" width="1" height="1"></td>
</tr>
</table></td>
</tr>
<tr>
<td width="5%" align="right" valign="top"> </td>
<td colspan="2" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td valign="middle"> </td>
</tr>
<tr>
<td width="38%"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">
<select id=select3
style="COLOR: #06303d; FONT-FAMILY: verdana, geneva, helvetica, arial; BACKGROUND-COLOR: #ffffff"
onChange="OnChangeCategory(this.form);"
name=location>
<option value="28">Los Angeles, California
<option value="27">San Jose, California
</select>
</font></td>
<td width="62%" valign="middle"><span class="learnmore">Datacenter</span><font face="Verdana, Arial, Helvetica, sans-serif" size="2">
</font></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top"> </td>
<td colspan="2" valign="top"> </td>
</tr>
<tr>
<td colspan="3" valign="top"> <table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr bgcolor="#62605B">
<td><img src="/images/spacer.gif" width="1" height="1"></td>
<td><img src="/images/spacer.gif" width="1" height="1"></td>
<td><img src="/images/spacer.gif" width="1" height="1"></td>
<td><img src="/images/spacer.gif" width="1" height="1"></td>
</tr>
<tr bgcolor="#333331">
<td width="8" valign="middle"><img src="/images/spacer.gif" width="4" height="20"></td>
<td width="82%" valign="middle"><font class="selection">Players</font></td>
<td width="12" align="center" valign="middle"><a href="javascript:;" onClick="MM_openBrWindow('../../../learnmore/players.html','learnmore','scrollbars=yes,width=600,height=400')"><img src="/images/buttons/i.gif" border="0"></a></td>
<td width="67" valign="middle"> <div align="right"><a href="javascript:;" onClick="MM_openBrWindow('../../../learnmore/players.html','learnmore','scrollbars=yes,width=600,height=400')" class="learnmore">Learn
More</a></div></td>
</tr>
<tr bgcolor="#62605B">
<td><img src="/images/spacer.gif" width="1" height="1"></td>
<td><img src="/images/spacer.gif" width="1" height="1"></td>
<td><img src="/images/spacer.gif" width="1" height="1"></td>
<td><img src="/images/spacer.gif" width="1" height="1"></td>
</tr>
</table></td>
</tr>
<tr>
<td align="right" valign="top"> </td>
<td colspan="2" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td valign="middle" class="learnmore"> </td>
</tr>
<tr>
<td width="9%"><select id=select4
style="COLOR: #06303d; FONT-FAMILY: verdana, geneva, helvetica, arial; BACKGROUND-COLOR: #ffffff"
onChange="OnChangeCategory(this.form);"
name=num_players>
<option value="12">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
<option value="26">26</option>
<option value="28">28</option>
<option value="30">30</option>
<option value="32">32</option>
</select> </td>
<td width="91%" valign="middle" class="learnmore">Maximum</td>
</tr>
</table></td>
</tr>
<tr>
<td align="right" valign="top"> </td>
<td width="5%" valign="top"> </td>
<td width="90%" valign="top"> <input name="GameType" type="hidden" value="63">
<input type="hidden" name="game_server_type" value="0"> <input type="hidden" name="game_features_type_web_hosting" value="0">
<input type="hidden" name="location_selection" value="0">
<input type="hidden" name="game_features_type[20]" value="1">
<input type="hidden" name="next" value="personal"> <input type="hidden" name="name" value="Game_Server_Signup">
</td>
</tr>
<tr>
<td colspan="3" valign="top"> <table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr bgcolor="#62605B">
<td><img src="/images/spacer.gif" width="1" height="1"></td>
<td><img src="/images/spacer.gif" width="1" height="1"></td>
<td><img src="/images/spacer.gif" width="1" height="1"></td>
<td><img src="/images/spacer.gif" width="1" height="1"></td>
</tr>
<tr bgcolor="#333331">
<td width="8" valign="middle"><img src="/images/spacer.gif" width="4" height="20"></td>
<td width="82%" valign="middle"><font class="selection">Web
Hosting Packages </font></td>
<td align="center" valign="middle"><a href="javascript:;" onClick="MM_openBrWindow('/services/signup/hosting/','learnmore','scrollbars=yes,width=750,height=400')"><img src="/images/buttons/i.gif" border="0"></a></td>
<td valign="middle"> <div align="right"><a href="javascript:;" onClick="MM_openBrWindow('/services/signup/hosting/','learnmore','scrollbars=yes,width=750,height=400')" class="learnmore">Learn
More</a></div></td>
</tr>
<tr bgcolor="#62605B">
<td><img src="/images/spacer.gif" width="1" height="1"></td>
<td><img src="/images/spacer.gif" width="1" height="1"></td>
<td><img src="/images/spacer.gif" width="1" height="1"></td>
<td><img src="/images/spacer.gif" width="1" height="1"></td>
</tr>
</table></td>
</tr>
<tr>
<td align="right" valign="top"> </td>
<td align="center" valign="middle"> </td>
<td valign="middle"> </td>
</tr>
<tr>
<td align="right" valign="top"> </td>
<td align="center" valign="middle"><input name="WebHosting" type="radio" value="54" onClick="OnChangeCategory(this.form)" checked>
</td>
<td valign="middle"><span class="learnmore">Basic Web Hosting</span>
<span class="brackets">[</span><span class="selection">Free</span><span class="brackets">]</span></td>
</tr>
<tr>
<td align="right" valign="top"> </td>
<td align="center" valign="middle"><input name="WebHosting" type="radio" value="45" onClick="OnChangeCategory(this.form)">
</td>
<td valign="middle"><span class="learnmore">Premium Web Hosting</span>
<span class="brackets">[</span><span class="selection">+7</span><span class="brackets">]
</span></td>
</tr>
<tr>
<td align="right" valign="top"> </td>
<td align="center" valign="top"> </td>
<td valign="top"> </td>
</tr>
<tr>
<td colspan="3" align="right" valign="top"> <table width="100%" border="0">
<tr>
<td> <div align="center"><font color="#FFCC00"><strong>Total
Monthly Fee:</strong></font><span class=price><b>$</b><b id=pricebtm name="pricebtm"></b></span></div></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="3" align="center" valign="top"> </td>
</tr>
<tr>
<td colspan="3" align="center" valign="top"> <input name="imageField2" type="image" src="/images/buttons/next.gif" width="64" height="19" border="0">
</td>
</tr>
<tr>
<td colspan="3" align="right" valign="top"> </td>
</tr>
</table>
</form>
</td>
<td width="1" bgcolor="#62605B"><img src="../../../images/gray_dot.gif" width="1" height="1"></td>
</tr>
<tr>
<td width="1" height="1" bgcolor="#62605B"><img src="../../../images/gray_dot.gif" width="1" height="1"></td>
<td height="1" bgcolor="#62605B"><img src="../../../images/gray_dot.gif" width="1" height="1"></td>
<td width="1" height="1" bgcolor="#62605B"><img src="../../../images/gray_dot.gif" width="1" height="1"></td>
</tr>
</table>
<p> </p></td>
<td width="189" align="center" valign="top">-</td>
<td width="1" bgcolor="#62605B"><img src="/images/gray_dot.gif" width="1" height="1"></td>
</tr>
</table></td>
</tr>
</table>
<SCRIPT language=JavaScript>
var arrPrices = new Array();
function initPriceAndCategories()
{
g_dTotal = 0.00; // Charged base price
OnChangeCategory(form1);
}
function UpdatePrice(price)
{
viewprice = price;
totalprice = viewprice + "";
if (totalprice.indexOf (".") == -1)
totalprice += ".00";
ChangeinnerHTML("pricebtm", totalprice);
ChangeinnerHTML("pricetop", totalprice);
}
function Init ()
{
initPriceAndCategories();
}
// Main browser code
var g_dTotal;
Init();
</SCRIPT>
<!--body end -->
</BODY>
</HTML>
Now here is what I want to do with this information. First off I would like to pass off the total as a variable onto another php page to show the total which I am not sure what to use, I know it would look something like this :
<?php print $variable here; ?>
Then on that next page I will have another; this time a total regular form with name and contact infomation, at which I would like the information from the first page, as well as the second page, and the total price emailed to me. Then also with the total price I would like it to be forwarded to a paypal page, in which the dynamic price is forwarded to paypal. Any help to tutorials or such would be of great help. Thank you very much, and here is a page much like what I want to do :
http://services.wickedservers.com/se...sty_battle.php
Thank you so much for looking |
