Click to See Complete Forum and Search --> : Using 1 script twice on the same page


annii
10-07-2003, 04:07 PM
Hi
I'm not at all good at this scripting stuff, but I have found a very good free script that I would like to use.
I want to use two instances of the script side by side on the same page, to enable users to compare the costs of different brands of the same product packages.
The script works fine if I just use 1 instance of it, but when I try using two instances it creates errors.
I tried renaming some of the elements etc on the 2nd instance of the script (such as form name and the corresponding call in the script) but this doesn't seem to work.
Can anyone help me with this please?

The unmodified script is
<html>
<head>
<title>Order Form</title>
<SCRIPT LANGUAGE="JavaScript">
function calcamt(num)
{
var qtynum=eval("document.myform.qty"+num+".selectedIndex")
var number=eval("document.myform.szeshp"+num+".selectedIndex")
var sizeshape=eval("document.myform.szeshp"+num+"[number].value.split(',')")
eval("document.myform.price"+num+".value=sizeshape[1] * qtynum")
var pricenum=parseFloat(eval("document.myform.price"+num+".value"))
var whole = "" + Math.round(pricenum * Math.pow(10, 2));
var decPoint = whole.length - 2;
if(decPoint != 0)
{
result = whole.substring(0, decPoint);
result += ".";
result += whole.substring(decPoint, whole.length);
}
else
{
result = whole;
}
eval("document.myform.price"+num+".value=result")

totalamt()
}
function qtyreset(numa)
{
if(eval("document.myform.item"+numa+".checked"))
{
}
else
{
alert("You must select the item")
return false
}
eval("document.myform.qty"+numa+".selectedIndex=0")
eval("document.myform.price"+numa+".value='0.00'")
}
function totalamt()
{
var tempamt=0
for(i=0;i<3;i++)
{
var tamt=parseFloat(eval("document.myform.price"+i+".value"))
tempamt=tempamt+tamt

}
var whole = "" + Math.round(tempamt * Math.pow(10, 2));
var decPoint = whole.length - 2;
if(decPoint != 0)
{
result = whole.substring(0, decPoint);
result += ".";
result += whole.substring(decPoint, whole.length);
}
else
{
result = whole;
}
document.myform.totamt.value=result
}
function Formcheck()
{
document.sendit.sdata.value="\r Item Size Qty Price\r"
for(i=0;i<3;i++)
{
if(eval("document.myform.item"+i+".checked"))
{
var fitem=eval("document.myform.item"+i+".value")
var fnum=eval("document.myform.szeshp"+i+".selectedIndex")
var fsize=eval("document.myform.szeshp"+i+"[fnum].value.split(',')")
var fqtynum=eval("document.myform.qty"+i+".selectedIndex")
var fqty=eval("document.myform.qty"+i+"[fqtynum].value")
var fprice=eval("document.myform.price"+i+".value")
document.sendit.sdata.value+="\r"+fitem+" "+fsize[0]+"@ "+fsize[1]+" each "+fqty+" "+fprice+"\r"
}
}
document.sendit.sdata.value+="Total Amount="+document.myform.totamt.value
}
</SCRIPT>
</head>
<body bgcolor="lightgreen">
<CENTER>
<BR>
<H2>Oder Form</H2>
<BR>
ITEM &nbsp &nbsp &nbsp &nbsp SIZE/SHAPE &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp QTY &nbsp &nbsp PRICE &nbsp &nbsp
<FORM NAME="myform">
<INPUT TYPE="radio" NAME="item0" VALUE="Paper Clips"> Paper Clips
<SELECT NAME="szeshp0" onChange="qtyreset('0')">
<OPTION VALUE="Small Paper Clips ,2.53" SELECTED>Small Paper Clips</option>
<OPTION VALUE="Large Paper Clips ,3.45">Large Paper Clips</option>
</SELECT>
<SELECT NAME="qty0" onChange="calcamt('0')">
<OPTION VALUE="0" SELECTED>0</OPTION>
<OPTION VALUE="1">1</OPTION>
<OPTION VALUE="2">2</OPTION>
<OPTION VALUE="3">3</OPTION>
</SELECT>
<INPUT TYPE="text" NAME="price0" VALUE="0.00" SIZE="10" onFocus="this.blur()">
<BR><BR>
<INPUT TYPE="radio" NAME="item1" VALUE="Pencils "> Pencils &nbsp &nbsp &nbsp
<SELECT NAME="szeshp1" onChange="qtyreset('1')">
<OPTION VALUE="No2 Pencils ,1.23" SELECTED>No2 Pencils &nbsp &nbsp &nbsp &nbsp </option>
<OPTION VALUE="No4 Pencils ,1.74">No4 Pencils </option>
</SELECT>
<SELECT NAME="qty1" onChange="calcamt('1')">
<OPTION VALUE="0" SELECTED>0</OPTION>
<OPTION VALUE="1">1</OPTION>
<OPTION VALUE="2">2</OPTION>
<OPTION VALUE="3">3</OPTION>
</SELECT>
<INPUT TYPE="text" NAME="price1" VALUE="0.00" SIZE="10" onFocus="this.blur()">
<BR><BR>
<INPUT TYPE="radio" NAME="item2" VALUE="Staples "> Staples &nbsp &nbsp &nbsp
<SELECT NAME="szeshp2" onChange="qtyreset('2')">
<OPTION VALUE="Small Staples ,2.12" SELECTED>Small Staples </option>
<OPTION VALUE="Large Staples ,2.34">Large Staples &nbsp &nbsp &nbsp </option>
</SELECT>
<SELECT NAME="qty2" onChange="calcamt('2')">
<OPTION VALUE="0" SELECTED>0</OPTION>
<OPTION VALUE="1">1</OPTION>
<OPTION VALUE="2">2</OPTION>
<OPTION VALUE="3">3</OPTION>
</SELECT>
<INPUT TYPE="text" NAME="price2" VALUE="0.00" SIZE="10" onFocus="this.blur()">
<BR><BR>
Total
<INPUT TYPE="text" NAME="totamt" size="10" onFocus="this.blur()">
</FORM>
<FORM NAME="sendit" METHOD="post" ACTION="mailto:mail@me.com?subject=Order Form" ENCTYPE="text/plain" onSubmit="return Formcheck()">
<INPUT TYPE="hidden" NAME="sdata">
<INPUT TYPE="submit" VALUE="Send It"> &nbsp <INPUT TYPE="reset" VALUE="Clear Form" onClick="document.myform.reset()">
<BR><BR><BR><BR>
<HR WIDTH="50%">
<FONT SIZE="-1"><A HREF="JavaScript:self.close()">Close This Window</A></FONT>
</FORM>
</CENTER>
</body>
</html>


Thanks

Anni

Dimitri
10-07-2003, 06:09 PM
This is extremely dirty code, so please forgive me. But I think that this is the functionality you asked for.

Compare the js and html to your original code to see the changes I made.

Cheers.
Dimitri
-------------------------

<html>
<head>
<title>Order Form</title>
<SCRIPT LANGUAGE="JavaScript">
function calcamt(num, form_name) {
&nbsp;&nbsp;&nbsp;&nbsp;var qtynum=eval("document." + form_name + ".qty"+num+".selectedIndex")
&nbsp;&nbsp;&nbsp;&nbsp;var number=eval("document." + form_name + ".szeshp"+num+".selectedIndex")
&nbsp;&nbsp;&nbsp;&nbsp;var sizeshape=eval("document." + form_name + ".szeshp"+num+"[number].value.split(',')")
&nbsp;&nbsp;&nbsp;&nbsp;eval("document." + form_name + ".price"+num+".value=sizeshape[1] * qtynum")
&nbsp;&nbsp;&nbsp;&nbsp;var pricenum=parseFloat(eval("document." + form_name + ".price"+num+".value"))
&nbsp;&nbsp;&nbsp;&nbsp;var whole = "" + Math.round(pricenum * Math.pow(10, 2));
&nbsp;&nbsp;&nbsp;&nbsp;var decPoint = whole.length - 2;
&nbsp;&nbsp;&nbsp;&nbsp;if(decPoint != 0) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result = whole.substring(0, decPoint);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result += ".";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result += whole.substring(decPoint, whole.length);
&nbsp;&nbsp;&nbsp;&nbsp;} else {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result = whole;
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;eval("document." + form_name + ".price"+num+".value=result")

&nbsp;&nbsp;&nbsp;&nbsp;totalamt(form_name)
}

function qtyreset(numa, form_name) {
&nbsp;&nbsp;&nbsp;&nbsp;if(eval("document." + form_name + ".item"+numa+".checked")) {
&nbsp;&nbsp;&nbsp;&nbsp;} else { &nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("You must select the item")
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;eval("document." + form_name + ".qty"+numa+".selectedIndex=0")
&nbsp;&nbsp;&nbsp;&nbsp;eval("document." + form_name + ".price"+numa+".value='0.00'")
}

function totalamt(form_name) {
&nbsp;&nbsp;&nbsp;&nbsp;var tempamt=0
&nbsp;&nbsp;&nbsp;&nbsp;for(i=0;i<3;i++) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var tamt=parseFloat(eval("document." + form_name + ".price"+i+".value"))
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tempamt=tempamt+tamt
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;var whole = "" + Math.round(tempamt * Math.pow(10, 2));
&nbsp;&nbsp;&nbsp;&nbsp;var decPoint = whole.length - 2;
&nbsp;&nbsp;&nbsp;&nbsp;if(decPoint != 0) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result = whole.substring(0, decPoint);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result += ".";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result += whole.substring(decPoint, whole.length);
&nbsp;&nbsp;&nbsp;&nbsp;} else {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result = whole;
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;eval("document." + form_name + ".totamt.value=result");
}

function Formcheck(form_name) {
&nbsp;&nbsp;&nbsp;&nbsp;document.sendit.sdata.value="\r Item Size Qty Price\r"
&nbsp;&nbsp;&nbsp;&nbsp;for(i=0;i<3;i++) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(eval("document." + form_name + ".item"+i+".checked")) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var fitem=eval("document." + form_name + ".item"+i+".value")
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var fnum=eval("document." + form_name + ".szeshp"+i+".selectedIndex")
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var fsize=eval("document." + form_name + ".szeshp"+i+"[fnum].value.split(',')")
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var fqtynum=eval("document." + form_name + ".qty"+i+".selectedIndex")
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var fqty=eval("document." + form_name + ".qty"+i+"[fqtynum].value")
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var fprice=eval("document." + form_name + ".price"+i+".value")
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.sendit.sdata.value+="\r"+fitem+" "+fsize[0]+"@ "+fsize[1]+" each "+fqty+" "+fprice+"\r"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;document.sendit.sdata.value+="Total Amount="+ eval("document." + form_name + ".totamt.value")
}
</SCRIPT>
</head>
<body bgcolor="lightgreen">
<CENTER>
<BR>
<H2>Oder Form</H2>
<BR>
ITEM SIZE/SHAPE QTY PRICE
<FORM NAME="myform">
<INPUT TYPE="radio" NAME="item0" VALUE="Paper Clips"> Paper Clips
<SELECT NAME="szeshp0" onChange="qtyreset('0', 'myform')">
<OPTION VALUE="Small Paper Clips ,2.53" SELECTED>Small Paper Clips</option>
<OPTION VALUE="Large Paper Clips ,3.45">Large Paper Clips</option>
</SELECT>
<SELECT NAME="qty0" onChange="calcamt('0', 'myform')">
<OPTION VALUE="0" SELECTED>0</OPTION>
<OPTION VALUE="1">1</OPTION>
<OPTION VALUE="2">2</OPTION>
<OPTION VALUE="3">3</OPTION>
</SELECT>
<INPUT TYPE="text" NAME="price0" VALUE="0.00" SIZE="10" onFocus="this.blur()">
<BR><BR>
<INPUT TYPE="radio" NAME="item1" VALUE="Pencils "> Pencils
<SELECT NAME="szeshp1" onChange="qtyreset('1', 'myform')">
<OPTION VALUE="No2 Pencils ,1.23" SELECTED>No2 Pencils </option>
<OPTION VALUE="No4 Pencils ,1.74">No4 Pencils </option>
</SELECT>
<SELECT NAME="qty1" onChange="calcamt('1', 'myform')">
<OPTION VALUE="0" SELECTED>0</OPTION>
<OPTION VALUE="1">1</OPTION>
<OPTION VALUE="2">2</OPTION>
<OPTION VALUE="3">3</OPTION>
</SELECT>
<INPUT TYPE="text" NAME="price1" VALUE="0.00" SIZE="10" onFocus="this.blur()">
<BR><BR>
<INPUT TYPE="radio" NAME="item2" VALUE="Staples "> Staples
<SELECT NAME="szeshp2" onChange="qtyreset('2', 'myform')">
<OPTION VALUE="Small Staples ,2.12" SELECTED>Small Staples </option>
<OPTION VALUE="Large Staples ,2.34">Large Staples </option>
</SELECT>
<SELECT NAME="qty2" onChange="calcamt('2', 'myform')">
<OPTION VALUE="0" SELECTED>0</OPTION>
<OPTION VALUE="1">1</OPTION>
<OPTION VALUE="2">2</OPTION>
<OPTION VALUE="3">3</OPTION>
</SELECT>
<INPUT TYPE="text" NAME="price2" VALUE="0.00" SIZE="10" onFocus="this.blur()">
<BR><BR>
Total
<INPUT TYPE="text" NAME="totamt" size="10" onFocus="this.blur()">
</FORM>
<FORM NAME="sendit" METHOD="post" ACTION="mailto:mail@me.com?subject=Order Form" ENCTYPE="text/plain" onSubmit="return Formcheck('myform')">
<INPUT TYPE="hidden" NAME="sdata">
<INPUT TYPE="submit" VALUE="Send It"> <INPUT TYPE="reset" VALUE="Clear Form" onClick="document.myform.reset()">
</FORM>

<FORM NAME="myform2">
<INPUT TYPE="radio" NAME="item0" VALUE="Paper Clips"> Paper Clips
<SELECT NAME="szeshp0" onChange="qtyreset('0', 'myform2')">
<OPTION VALUE="Small Paper Clips ,2.53" SELECTED>Small Paper Clips</option>
<OPTION VALUE="Large Paper Clips ,3.45">Large Paper Clips</option>
</SELECT>
<SELECT NAME="qty0" onChange="calcamt('0', 'myform2')">
<OPTION VALUE="0" SELECTED>0</OPTION>
<OPTION VALUE="1">1</OPTION>
<OPTION VALUE="2">2</OPTION>
<OPTION VALUE="3">3</OPTION>
</SELECT>
<INPUT TYPE="text" NAME="price0" VALUE="0.00" SIZE="10" onFocus="this.blur()">
<BR><BR>
<INPUT TYPE="radio" NAME="item1" VALUE="Pencils "> Pencils
<SELECT NAME="szeshp1" onChange="qtyreset('1', 'myform2')">
<OPTION VALUE="No2 Pencils ,1.23" SELECTED>No2 Pencils </option>
<OPTION VALUE="No4 Pencils ,1.74">No4 Pencils </option>
</SELECT>
<SELECT NAME="qty1" onChange="calcamt('1', 'myform2')">
<OPTION VALUE="0" SELECTED>0</OPTION>
<OPTION VALUE="1">1</OPTION>
<OPTION VALUE="2">2</OPTION>
<OPTION VALUE="3">3</OPTION>
</SELECT>
<INPUT TYPE="text" NAME="price1" VALUE="0.00" SIZE="10" onFocus="this.blur()">
<BR><BR>
<INPUT TYPE="radio" NAME="item2" VALUE="Staples "> Staples
<SELECT NAME="szeshp2" onChange="qtyreset('2', 'myform2')">
<OPTION VALUE="Small Staples ,2.12" SELECTED>Small Staples </option>
<OPTION VALUE="Large Staples ,2.34">Large Staples </option>
</SELECT>
<SELECT NAME="qty2" onChange="calcamt('2', 'myform2')">
<OPTION VALUE="0" SELECTED>0</OPTION>
<OPTION VALUE="1">1</OPTION>
<OPTION VALUE="2">2</OPTION>
<OPTION VALUE="3">3</OPTION>
</SELECT>
<INPUT TYPE="text" NAME="price2" VALUE="0.00" SIZE="10" onFocus="this.blur()">
<BR><BR>
Total
<INPUT TYPE="text" NAME="totamt" size="10" onFocus="this.blur()">
</FORM>
<FORM NAME="sendit" METHOD="post" ACTION="mailto:mail@me.com?subject=Order Form" ENCTYPE="text/plain" onSubmit="return Formcheck('myform2')">
<INPUT TYPE="hidden" NAME="sdata">
<INPUT TYPE="submit" VALUE="Send It"> <INPUT TYPE="reset" VALUE="Clear Form" onClick="document.myform.reset()">
<BR><BR><BR><BR>
<HR WIDTH="50%">
<FONT SIZE="-1"><A HREF="java script:self.close()">Close This Window</A></FONT>
</FORM>
</CENTER>
</body>
</html>

annii
10-07-2003, 06:23 PM
Dimitri
Thank you sooo much :)
It works :) Not sure how yet, but I will try to work out the changes you made...so I can start to learn how to do these things myself!

Thanks again

Anni