Click to See Complete Forum and Search --> : interactive web page form php / javascript help


micro_sucks
12-24-2003, 10:30 PM
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. :


<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">&nbsp;</td>
<td width="67" valign="middle"> <div align="right"><a href="javascript:;" onClick="MM_openBrWindow('../../../learnmore/datacenters.html','learnmore','scrollbars=yes,widt h=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">&nbsp;</td>
<td colspan="2" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
<td valign="middle">&nbsp;</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">&nbsp;
</font></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top">&nbsp;</td>
<td colspan="2" valign="top">&nbsp;</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=60 0,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=60 0,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">&nbsp;</td>
<td colspan="2" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
<td valign="middle" class="learnmore">&nbsp;</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">&nbsp;</td>
<td width="5%" valign="top">&nbsp;</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">&nbsp;</td>
<td align="center" valign="middle">&nbsp;</td>
<td valign="middle">&nbsp;</td>
</tr>
<tr>
<td align="right" valign="top">&nbsp;</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">&nbsp;</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">&nbsp;</td>
<td align="center" valign="top">&nbsp;</td>
<td valign="top">&nbsp;</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">&nbsp;</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">&nbsp;</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>&nbsp;</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/services/signup/game_rentals/cstrike/nasty_battle.php

Thank you so much for looking

theN
12-25-2003, 04:12 AM
Hi

What is your question?

If your question was " First off I would like to pass off the total as a variable onto another php page" why did you post all that other stuff??

All that code = excess detail = disincentive to read your code!!

Please read the PHP manual about the new AUTO/SUPER global arrays.

regards
akr

micro_sucks
12-25-2003, 05:23 AM
I would like to know how I would assign the total as a variable, ie

$totalprice = Whathere?

and how I can carry on thevalues entered onto another page, I have tried this :

<html>
<title>Form4a</title>
<p>you live in <?=$location?></p>
</html>

And it tells me that location is an undefined variable, although it was clearly labeled as an id select with name = location so I was just wondering what I would do for those two things, thanks.