Announcement

**Antoniohawk** · Feb 8, 2004, 12:09 AM

You should be able to do this with innerHtml, can we see your source code for the page?

**Lawfour** · Feb 10, 2004, 08:58 AM

Here is the source

The code to look for begins with the following comments:


and


I put a gap between the codes I want you to look at but the entire code for the form is listed below except the cgi code to send the results of the form.

Thanks

<html>



<head>
<title>KCC TJU ESR WEBFORM</title>
<meta name="description" content="">
<meta name="keywords" content="">
<STYLE TYPE="text/css">

</STYLE>
<style>
body{
scrollbar-arrow-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-highlight-color: #333333;
scrollbar-face-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-darkshadow-color: #99CCCC;
scrollbar-track-color: #ADB9B0;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
var CO2_ORDER_price = 7.65;
var NITROGEN1_ORDER_price = 3.51;
var NITROGEN2_ORDER_price = 25.78;
var NITROGEN3_ORDER_price = 62.84;
var NITROGEN4_ORDER_price = 74.11;
var argonuhp_ORDER_price = 103.51;
var heliumzero_ORDER_price = 75.00;

function Monify(value)
{
var str = "" + Math.round(value*100);
var len = str.length;

return (str=="0")?""

str.substring(0,len-2)+"."+str.substring(len-2,len));
}

function CalculateOrder(form)
{
var cnt = 0;
var sub = 0;
var products = "";

// CO2_ORDER

if (form.CO2_ORDER.value > 0)
{
cnt += Math.abs(form.CO2_ORDER.value);
sub += Math.abs(form.CO2_ORDER.value) * CO2_ORDER_price;
products += form.CO2_ORDER.value+" @ $"+CO2_ORDER_price+" CO2_ORDER\r\n";
}

// NITROGEN GAS, MEDICAL GRADE

if (form.NITROGEN1_ORDER.value > 0)
{
cnt += Math.abs(form.NITROGEN1_ORDER.value);
sub += Math.abs(form.NITROGEN1_ORDER.value) * NITROGEN1_ORDER_price;
products += form.NITROGEN1_ORDER.value+" @ $"+NITROGEN1_ORDER_price+" Nitrogen Gas Medical Grade \r\n";
}

// NITROGEN GAS, HIGH PURITY

if (form.NITROGEN2_ORDER.value > 0)
{
cnt += Math.abs(form.NITROGEN2_ORDER.value);
sub += Math.abs(form.NITROGEN2_ORDER.value) * NITROGEN2_ORDER_price;
products += form.NITROGEN2_ORDER.value+" @ $"+NITROGEN2_ORDER_price+" Nitrogen Gas High Purity\r\n";
}

// NITROGEN GAS, ZERO GRADE

if (form.NITROGEN3_ORDER.value > 0)
{
cnt += Math.abs(form.NITROGEN3_ORDER.value);
sub += Math.abs(form.NITROGEN3_ORDER.value) * NITROGEN3_ORDER_price;
products += form.NITROGEN3_ORDER.value+" @ $"+NITROGEN3_ORDER_price+" Nitrogen Gas Zero Grade\r\n";
}

// NITROGEN GAS, ULTRA HIGH PURITY

if (form.NITROGEN4_ORDER.value > 0)
{
cnt += Math.abs(form.NITROGEN4_ORDER.value);
sub += Math.abs(form.NITROGEN4_ORDER.value) * NITROGEN4_ORDER_price;
products += form.NITROGEN4_ORDER.value+" @ $"+NITROGEN4_ORDER_price+" Nitrogen Gas Ultra High Purity\r\n";
}

// ARGON, ULTRA HIGH PURITY

if (form.argonuhp_ORDER.value > 0)
{
cnt += Math.abs(form.argonuhp_ORDER.value);
sub += Math.abs(form.argonuhp_ORDER.value) * argonuhp_ORDER_price;
products += form.argonuhp_ORDER.value+" @ $"+argonuhp_ORDER_price+" Argon Gas Ultra High Purity\r\n";
}

// HELIUM, HELIUM ZERO GRADE

if (form.heliumzero_ORDER.value > 0)
{
cnt += Math.abs(form.heliumzero_ORDER.value);
sub += Math.abs(form.heliumzero_ORDER.value) * heliumzero_ORDER_price;
products += form.heliumzero_ORDER.value+" @ $"+heliumzero_ORDER_price+" Helium Gas Zero Grade\r\n";
}

// PRODUCTS LIST

form.Products_Ordered.value = products;

// SUBTOTAL CALCULATION

form.Total_Value.value = Monify(sub);

form.Discount.value =0;

// Activate the appropriate lines below to enable specific discounts

// Volume discount (cnt = total number of products)
// Change '2' to any number to denote the number of units purchased.
// if (cnt < 2 ) { form.Discount.value = 0; }
// if (cnt == 2) { form.Discount.value = 10; }
// if (cnt > 2 ) { form.Discount.value = 15; }

// Cost discount (sub = total price of products)
// Change '100' to a value to denote the total price of products ordered
// if (sub > 100){ form.Discount.value = 20; }

// ****User Configurable Section. End 3 of 4 ****

// TOTAL PRICE in $US
form.Total_Price_to_be_Paid.value = Monify(sub - (sub * form.Discount.value/100));

}

function ValidateOrder(form)
{
CalculateOrder(form);

if (form.realname.value == "")
{ alert("Please include your name in customer details"); form.realname.focus(); return; }

if (form.requested.value == "")
{ alert("Please include requested by information"); form.requested.focus(); return; }

if (form.Total_Value.value == "")
{ alert("Please select the product(s) you wish to purchase"); form.p1.focus(); return; }

if (form.room.value == "")
{ alert("Please include your room number and building your order will not be processed without it"); form.room.focus(); return; }

if (form.number_of_cylinders_in_lab.value == "")
{ alert("Please include the number of cylinders in your lab or your order will not be processed."); form.number_of_cylinders_in_lab.focus(); return; }

if (form.pick_up_empty_cylinders_in_lab.value == "")
{ alert("Please include the number of empty cylinders in your lab or your order will not be processed."); form.pick_up_empty_cylinders_in_lab.focus(); return; }

form.submit();
}
//-->
</SCRIPT>
<SCRIPT>

</SCRIPT>
</head>
<body bgcolor="#FFFFFF" text="#000000" >
<table bordercolor="#000000" align=center cellspacing="8" cellpadding="2" border="1">
<tr align=top>
<td valign=top><br>


<table align=center width="85%" cellspacing="0" cellpadding="0" bordercolor=1 border="1">
<tr align=center>
<td><font size="4">You currently have </font></td> <td> <font size="5">00</font> </td><td><font size="4">Cylinders in your Lab</font></td>
</tr>

</table>



<p>
<center><script type="text/javascript">

/*
Annual Occasions Count Down script- By JavaScript Kit
For this and over 400+ free scripts, visit http://www.javascriptkit.com
This notice must stay intact
*/

var today=new Date()

//Enter the occasion's MONTH (1-12) and DAY (1-31):
var theoccasion=new Date(today.getFullYear(), 12, 31)

//Customize text to show before and on occasion. Follow grammer below:
var beforeOccasionText="Left Before Your PO Expires"
var onOccasiontext="Time To Renew Your PO!"

var monthtext=new Array("Jan","Feb","Mar","April","May","June","July","Aug","Sep","Oct","Nov","Dec")
theoccasion.setMonth(theoccasion.getMonth()-1) //change to 0-11 month format
var showdate="("+monthtext[theoccasion.getMonth()]+" "+theoccasion.getDate()+")" //show date of occasion

var one_day=1000*60*60*24
var calculatediff=""

calculatediff=Math.ceil((theoccasion.getTime()-today.getTime())/(one_day))
if (calculatediff<0){ //if bday already passed
var nextyeartoday=new Date()
nextyeartoday.setFullYear(today.getFullYear()+1)
calculatediff=Math.ceil((nextyeartoday.getTime()-today.getTime())/(one_day)+calculatediff)
}

//Display message accordingly
var pluraldayornot=(calculatediff==1)? "day" : "days"
if (calculatediff>0)
document.write("<b>"+calculatediff+" "+pluraldayornot+" "+beforeOccasionText+" "+showdate+"!</b>")
else if (calculatediff==0)
document.write("<b>"+onOccasiontext+" "+showdate+"!</b>")

</script></center>
<p>
</td>

</tr>
<tr>
<td valign=top>


<table width="100%" cellspacing="2" cellpadding="2" border="0">
<tr>
<td VALIGN=TOP>
<table cellspacing="2" cellpadding="2" border="0">
<tr align="left"><td align="left">Customer #<br><INPUT SIZE="10" VALUE="H3512" NAME="Customer Number"></td><td align="left">PO #<br><INPUT SIZE="10" VALUE="100169303" NAME="PO"></td><td align="left">Expires<br><INPUT SIZE="10" VALUE="12/31/03" NAME="Expires"></td></tr>

<tr>
<td align="left">
Requested By<font color="#FF0000">*</font><BR>
<INPUT SIZE="15" VALUE="" NAME="requested"></td>

<td align="left">Investigator <br>
<INPUT SIZE="15" VALUE="Dr. Abraham" NAME="realname"> </td>

<td>
<table cellspacing="2" cellpadding="2" border="0">
<tr ALIGN=left>
<td>ROOM<font color="#FF0000">*</font><BR><INPUT SIZE="5" VALUE="" NAME="room"></td>
<td>BUILDING<font color="#FF0000">*</font><BR><INPUT SIZE="5" VALUE="" NAME="Building"></td>
</tr>

</table>
</td>
</tr>



<tr><td colspan=2><b>How Many Tanks Do You Have In Your Lab?<font color="#FF0000">*</font></b></td><td><INPUT SIZE="5" VALUE="" NAME="number_of_cylinders_in_lab"> <b>not including empty tanks</b>.<input type=hidden name="Number of tanks in lab" value="Does Include empty tanks"></td></tr>



<tr><td colspan=2><b>How Many Tanks Do You Want Picked UP?<font color="#FF0000">*</font></b></td><td><INPUT SIZE="5" VALUE="" NAME="pick_up_empty_cylinders_in_lab"> <b>if no empties enter 0</b>.</td></tr>





<tr align=left>
<td>CO2</td>
<td>
<INPUT TYPE="text" NAME="CO2_ORDER" VALUE="0" SIZE="4" MAXLENGTH="6"
onChange="CalculateOrder(this.form)"></td>
<td>$7.65</td>
</tr>




<tr ALIGN=left>
<td>N2, Medical Grade</td>

<td><INPUT TYPE="text" NAME="NITROGEN1" VALUE="0" SIZE="4" MAXLENGTH="6"
onChange="CalculateOrder(this.form)"></td>
<td>$3.51</td>
</tr>





<tr ALIGN=left>
<td>N2, HP</td>

<td><INPUT TYPE="text" NAME="NITROGEN2" VALUE="0" SIZE="4" MAXLENGTH="6"
onChange="CalculateOrder(this.form)"></td>
<td>$25.78</td>
</tr>



<tr ALIGN=left>
<td>N2, Zero Grade</td>
<td><INPUT TYPE="text" NAME="NITROGEN3" VALUE="0" SIZE="4" MAXLENGTH="6"
onChange="CalculateOrder(this.form)"></td>
<td>$62.84</td>
</tr>




<tr ALIGN=left>
<td>N2,UHP</td>
<td><INPUT TYPE="text" NAME="NITROGEN4" VALUE="0" SIZE="4" MAXLENGTH="6"
onChange="CalculateOrder(this.form)"></td>
<td>$74.11</td>
</tr>




<tr ALIGN=left>
<td>ARGON,UHP</td>
<td><INPUT TYPE="text" NAME="argonuhp" VALUE="0" SIZE="4" MAXLENGTH="6"
onChange="CalculateOrder(this.form)"></td>
<td>$103.51</td>
</tr>




<tr ALIGN=left>
<td>HELIUM, Zero</td>
<td><INPUT TYPE="text" NAME="heliumzero" VALUE="0" SIZE="4" MAXLENGTH="6"
onChange="CalculateOrder(this.form)"></td>
<td>$75.00</td>
</tr>




<tr >
<td COLSPAN=3>

<table width="100%" cellspacing="2" cellpadding="2" border="0">
<tr align=left>
<td >
Subtotal US$</FONT> <BR><INPUT TYPE="text" NAME="Total_Value" VALUE="" SIZE=7
onChange="CalculateOrder(this.form)">

</td>

<td ROWSPAN=3>
Gas Orders <BR>
<TEXTAREA NAME="Products_Ordered" VALUE="" COLS=30 ROWS=5
onChange="CalculateOrder(this.form)"></TEXTAREA>

</td>
</tr>

<tr align=left>
<td >
Discount % </FONT><BR><INPUT TYPE="text" NAME="Discount" VALUE="" SIZE=7
onChange="CalculateOrder(this.form)">

</td>

</tr>

<tr align=left>
<td >
Total US$</FONT> <BR><INPUT TYPE="text" NAME="Total_Price_to_be_Paid" VALUE="" SIZE=7
onChange="CalculateOrder(this.form)">

</td>
</tr></table>
</tr>



<TR><TD COLSPAN=3>
<b><font color="#000000">Comments</b></font><BR>

<TEXTAREA NAME="Comments" COLS=35 ROWS=5 ></TEXTAREA>
<P>
<div align=center>
<INPUT TYPE=button VALUE="Submit Order" onClick="ValidateOrder(this.form)">
<INPUT TYPE=Reset>

</div>
</TD></TR>
</table>

</td>

</table>

</td>
</tr>

</table>
</FORM>

</td>

</tr>

</table>

</td>
</tr>

</table>

</body>
</html>

**glenngv** · Feb 11, 2004, 02:23 AM

<td><font size="4">You currently have </font></td> <td> <span id="tankCount" style="font-size:5pt">00</span> </td><td><font size="4">Cylinders in your Lab</font></td>
...
<input size="5" value="" name="number_of_cylinders_in_lab" onchange="document.getElementById('tankCount').innerHTML=this.value">

You should not have used <font> tag as this is now obsolete although still supported by browsers.

**Lawfour** · Feb 11, 2004, 09:17 AM

still need your help

Thanks for you help,

the way you have the code worked, only problem is the number does not stay until the next order. I guess I am looking for a small database or javascript.

What I basically want is, if I enter the number 3 , it stays in the tank count until the next order. If the page is refreshed the number 3 stays their until another number is enter.

<td><font size="4">You currently have </font></td> <td> <span id="tankCount" style="font-size:5pt">00</span> </td><td><font size="4">Cylinders in your Lab</font></td>
...
<input size="5" value="" name="number_of_cylinders_in_lab" onchange="document.getElementById('tankCount').innerHTML=this.value">

I have been searching all over the net for maybe a javascript that would do it, but with no luck.

Do you know where I can search for such a script.

Thanks
Larry

**RadarBob** · Feb 11, 2004, 09:28 AM

You could use cookies if this page is used only from one computer - or at least if each separate lab always uses the same computer. A cookie is just a file of very limited size & specific structure (by design) that can be written or read using JavaScript. Just save "number of cylinders in your lab" in a cookie. It is a simple matter to prompt for the numer of cylinders if the cookie doesn't exist (yet) as when the web page is run for the very first time.

Otherwise you're right, you're gonna need a database. That's a big can of worms. You'll have to decide how inventory database integrates with ordering database, if at all. You'll have to get database and web server products (like MS SQL Server & IIS or MySQL & Java Server Pages...). Then you've got a full-blown system to write using SQL data fetching & saving, server-side code to build HTML pages w/ the data on it (Visual Basic or Java or ???... depending on the products you use), and finally client-side HTML, Javascript.

Announcement

Is this type of form possible

Is this type of form possible

Comment

Comment

Comment

Comment

Comment