I got this script at the moment it has the drop down menus but they are all the same, I need each to be differnt e.g first drop down menu to have differnt optionse i.e like choose cpu, for second menu choose motherboard. etc and also each drop down menu will not neccasarily have the same number of options, e.g 1st drop down menu may have 5, second may have 7 etc. This is a major snag in the script which I am having trouble editing, if you could help me do this last thing it would be finished, thank you 4 ne help. I have attached my edited script so far
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<!-- input.num style is used to monospace and right-align numbers in text
fields. -->
<!-- But only works in MS IE so my currencyPad() function still pads
numbers with spaces -->
<!-- to right-align numbers in browsers that support css level 1. -->
<style type="text/css">
input.num { font-family: monospace; text-align: Right }
h1 {font-family: Comic Sans MS; font-size: 16pt; color: #008080;
font-weight: bold; margin-bottom:0px; padding:0px}
</style>
<title>Coolnerds HyperInteractive JavaScript Order Form</title>
<!-- WARNING -- This is a pretty advanced example of using JavaScript with
forms. If -->
<!-- you are just now learning about forms this is NOT a good place to
start. First -->
<!-- learn about the basic FORM and INPUT tags. This page is intended -->
<!-- to be an example of JavaScript -- not really an example of an
everyday Web form. -->
<script language="javascript">
//-- JavaScript code written by Alan Simpson
//-- Global Variables
var RowsInForm = 13 //How many line items will be in the order form?
var ProductsInList = 10 //How many products in your product list?
var SalesTaxRate = 0.0775 //Set to sales tax rate in decimal. e.g. 0.0775
//is 7.75%.
var ProdSubscript = 0 //Identifies subscript of selected product in
//current row.
//-- Function to create a new empty array that starts at 1.
function MakeArray(n) {
this.length = n
for (var i=1;i<=n;i++) {this=0}
return this
}
//-- Function to create a new, empty array that starts at zero.
function BuildZeroArray(n) {
this.length = n
for (var i=0;i<=n;i++) {this=0}
return this
}
//-- Defines a custom object named prodobj (Product Object).
//-- An array of these objects will act as our product/price list.
function prodobj(name, unitprice) {
this.name = name
this.unitprice = unitprice
}
//-- Defines a new custom object named ordobj (Order Object).
//-- Will house data displayed in order form line items.
function ordobj(prodsub, qty, unitprice, extprice) {
this.prodsub = prodsub
this.qty = qty
this.unitprice = unitprice
this.extprice = extprice
}
//-- Updates current row in order array and form.
function updateRow(rownum){
var exeLine='ProdSubscript=document.ordform.prodchosen'+rownum+'.selectedIndex'
eval(exeLine)
eval('document.ordform.prod'+rownum+'.src = imglist[ProdSubscript].src')
ordData[rownum].prodsub=ProdSubscript
var exeLine='tempqty=document.ordform.qty'+rownum+'.value'
eval(exeLine)
ordData[rownum].qty=tempqty-0 //-- Gets unit price from the product price
//list.
ordData[rownum].unitprice=prodlist[ProdSubscript].unitprice
ordData[rownum].extprice=(ordData[rownum].qty)*ordData[rownum].unitprice
var exeLine='document.ordform.unitprice'+rownum+'.value=currency(ordData['+rownum+'].unitprice,10)'
eval (exeLine)
var exeLine='document.ordform.extprice'+rownum+'.value=currency(ordData['+rownum+'].extprice,10)'
eval(exeLine)
updateTotals()
}
//-- Updates the totals in the lower part of order details.
function updateTotals() {
var subtotal = 0
for (var i=1;i<=RowsInForm;i++) {
subtotal=subtotal+ordData.extprice
}
document.ordform.subtotal.value = currency(subtotal,10)
salestax=0
salestax = SalesTaxRate*subtotal
document.ordform.salestax.value = currency(salestax,10)
document.ordform.grandtotal.value = currency(subtotal+salestax,10)
}
//-- Shows number in ＃xxx,xxx.xx format and pads left side with blanks.
function currency(anynum,width) {
anynum=eval(anynum)
workNum=Math.abs((Math.round(anynum*100)/100));workStr=""+workNum
if (workStr.indexOf(".")==-1){workStr+=".00"}
dStr=workStr.substr(0,workStr.indexOf("."));dNum=dStr-0
pStr=workStr.substr(workStr.indexOf("."))
while (pStr.length<3){pStr+="0"}
//--- Adds comma in thousands place.
if (dNum>=1000) {
dLen=dStr.length
dStr=parseInt(""+(dNum/1000))+","+dStr.substring(dLen-3,dLen)
}
//-- Adds comma in millions place.
if (dNum>=1000000) {
dLen=dStr.length
dStr=parseInt(""+(dNum/1000000))+","+dStr.substring(dLen-7,dLen)
}
retval=dStr+pStr
if (anynum < 0) {
retval=retval.substring(1,retval.length)
retval="("+retval+")"
}
retval = "?quot;+retval
//--Pad with leading blanks to better align numbers.
while (retval.length<width){retval=" "+retval}
return retval
}
</script>
</head>
<p>
<script language="JavaScript">
//Create a new array named prodlist with six elements.
prodlist = new BuildZeroArray(ProductsInList) //Create empty product list
//array.
//-- JavaScript programmers: The array below defines products and unit
//prices.
//-- The only comma allowed in each line is the one that separates the
//product
//-- name from its unit price. Do not change first item (prodobj[0]).
prodlist[0] = new prodobj('-none-',0)
prodlist[1] = new prodobj('Anachronistic Widget',10.00)
prodlist[2] = new prodobj('Bombastic Gadget',10.50)
prodlist[3] = new prodobj('Cosmic Wingydingy',11.00)
prodlist[4] = new prodobj('Desultory Doodad',11.99)
prodlist[5] = new prodobj('Ethereal Entity',12.00)
prodlist[6] = new prodobj('Fantastic Fingmabob',14.99)
prodlist[7] = new prodobj('Garrulous Gizmo',25.00)
prodlist[8] = new prodobj('Humongous Humanoid',99.99)
prodlist[9] = new prodobj('Ignominious Innuendo',100.00)
prodlist[10] = new prodobj('Jumping Jehosafatz',250.00)
//create a new 0 array to hold the img source list
imglist = new BuildZeroArray(ProductsInList)
imglist[0] = new Image
imglist[0].src = "C:\My Documents\My Pictures\iceberg.jpg"
imglist[1] = new Image
imglist[1].src = "moon.gif"
imglist[2] = new Image
imglist[2].src = "storytellinglogo-2.jpg"
imglist[3] = new Image
imglist[3].src = "soldi150.gif"
imglist[4] = new Image
imglist[4].src = "C:\My Documents\My Pictures\iceberg.jpg"
imglist[5] = new Image
imglist[5].src = "moon.gif"
imglist[6] = new Image
imglist[6].src = "storytellinglogo-2.jpg"
imglist[7] = new Image
imglist[7].src = "soldi150.gif"
imglist[8] = new Image
imglist[8].src = "C:\My Documents\My Pictures\iceberg.jpg"
imglist[9] = new Image
imglist[9].src = "moon.gif"
imglist[10] = new Image
imglist[10].src = "storytellinglogo-2.jpg"
//-- JavaScript programmers- The ProductsInList variable defined in the
//head of
//-- this page must match the highest-numbered item in this array. In this
//sample
//-- page you can see that the ProductsInList variable is initially set to
//10, which
//-- matches the last subscript in the array above.
//-- Creates a new array named ordData, which will stores order form line
//items.
ordData = new MakeArray(RowsInForm)
for (var i=1; i<= RowsInForm; i++) {
ordData = new ordobj(0,0,0,0)
}
</script>
<!-- WARNING- A real form would require METHOD = and ACTION= attributes in
the FORM tag -->
<!-- below > to ensure that the data gets sent somewhere. The contents of
the tag would -->
<!-- be something like FORM name="ordform" METHOD="POST"
ACTION="someHandler" -->
<!-- where someHandler would refer to some kind of mailto CGI script. If
you need -->
<!-- help with that, your best bet would be to contact your ISP and
ask -->
<!-- them how you should set up the ACTION= and METHOD= attributes of the
FORM tag. -->
</p>
<form name="ordform" method="POST" action="../../someHandler">
<table align="center" border="1" bgcolor="#A8A8DO">
<tr>
<th width="228"><b>Product</b></th>
<th width="58" align="center"><b>Qty</b></th>
<th width="169" align="center"><b>Unit Price</b></th>
<th width="167" align="center"><b>Ext Price</b></th>
</tr>
<!-- Tags for remaining table rows are generated by JavaScript code. -->
<script language="JavaScript">
for (var rownum=1;rownum<=RowsInForm;rownum++) {
document.write('<tr><td width=192>')
document.write('<img src=http://www.webdeveloper.com/forum/archive/index.php/"C:\My Documents\My Pictures\iceberg.jpg" name="prod'+rownum+'" align="left">')
document.write('<select name="prodchosen'+rownum+'"onChange="updateRow('+rownum+')">')
for (i=0; i<=ProductsInList; i++) {
document.write ("<option>"+prodlist.name)
}
document.write ('</select></td>')
document.write ('<td width=72 align="center"><input class="num"name="qty'+rownum+'" value=http://www.webdeveloper.com/forum/archive/index.php/""')
document.write ('size=3 onChange="updateRow('+rownum+')"></td>')
document.write ('<td width=120 height="99" align="center">')
document.write ('<input class="num" name="unitprice'+rownum+'" value=http://www.webdeveloper.com/forum/archive/index.php/""')
document.write ('size=10 onfocus="this.blur()"></td>')
document.write ('<td width=120 align="center">')
document.write ('<input class="num" name="extprice'+rownum+'" value=http://www.webdeveloper.com/forum/archive/index.php/""')
document.write ('size=10 onfocus = "this.blur()"></td>')
document.write ('</tr>')
}
</script>
<tr>
<td colspan="3" align="right">Subtotal:</td>
<td width="167" align="center">
<input class="num" name="subtotal"
size="10" onfocus="this.blur()"></td>
</tr>
<tr>
<td colspan="2" height="36"> </td>
<td width="169" align="right" height="36">Sales Tax:</td>
<td width="167" align="center" height="36">
<input class="num" name="salestax"
size="10" onfocus="this.blur()"></td>
</tr>
<tr>
<td colspan="3" align="right">Grand Total:</td>
<td width="167" align="center">
<input class="num" name="grandtotal"
size="10" onfocus="this.blur()"></td>
</tr>
</table>
</form>
<!-- End of order form -->
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<!-- input.num style is used to monospace and right-align numbers in text
fields. -->
<!-- But only works in MS IE so my currencyPad() function still pads
numbers with spaces -->
<!-- to right-align numbers in browsers that support css level 1. -->
<style type="text/css">
input.num { font-family: monospace; text-align: Right }
h1 {font-family: Comic Sans MS; font-size: 16pt; color: #008080;
font-weight: bold; margin-bottom:0px; padding:0px}
</style>
<title>Coolnerds HyperInteractive JavaScript Order Form</title>
<!-- WARNING -- This is a pretty advanced example of using JavaScript with
forms. If -->
<!-- you are just now learning about forms this is NOT a good place to
start. First -->
<!-- learn about the basic FORM and INPUT tags. This page is intended -->
<!-- to be an example of JavaScript -- not really an example of an
everyday Web form. -->
<script language="javascript">
//-- JavaScript code written by Alan Simpson
//-- Global Variables
var RowsInForm = 13 //How many line items will be in the order form?
var ProductsInList = 10 //How many products in your product list?
var SalesTaxRate = 0.0775 //Set to sales tax rate in decimal. e.g. 0.0775
//is 7.75%.
var ProdSubscript = 0 //Identifies subscript of selected product in
//current row.
//-- Function to create a new empty array that starts at 1.
function MakeArray(n) {
this.length = n
for (var i=1;i<=n;i++) {this=0}
return this
}
//-- Function to create a new, empty array that starts at zero.
function BuildZeroArray(n) {
this.length = n
for (var i=0;i<=n;i++) {this=0}
return this
}
//-- Defines a custom object named prodobj (Product Object).
//-- An array of these objects will act as our product/price list.
function prodobj(name, unitprice) {
this.name = name
this.unitprice = unitprice
}
//-- Defines a new custom object named ordobj (Order Object).
//-- Will house data displayed in order form line items.
function ordobj(prodsub, qty, unitprice, extprice) {
this.prodsub = prodsub
this.qty = qty
this.unitprice = unitprice
this.extprice = extprice
}
//-- Updates current row in order array and form.
function updateRow(rownum){
var exeLine='ProdSubscript=document.ordform.prodchosen'+rownum+'.selectedIndex'
eval(exeLine)
eval('document.ordform.prod'+rownum+'.src = imglist[ProdSubscript].src')
ordData[rownum].prodsub=ProdSubscript
var exeLine='tempqty=document.ordform.qty'+rownum+'.value'
eval(exeLine)
ordData[rownum].qty=tempqty-0 //-- Gets unit price from the product price
//list.
ordData[rownum].unitprice=prodlist[ProdSubscript].unitprice
ordData[rownum].extprice=(ordData[rownum].qty)*ordData[rownum].unitprice
var exeLine='document.ordform.unitprice'+rownum+'.value=currency(ordData['+rownum+'].unitprice,10)'
eval (exeLine)
var exeLine='document.ordform.extprice'+rownum+'.value=currency(ordData['+rownum+'].extprice,10)'
eval(exeLine)
updateTotals()
}
//-- Updates the totals in the lower part of order details.
function updateTotals() {
var subtotal = 0
for (var i=1;i<=RowsInForm;i++) {
subtotal=subtotal+ordData.extprice
}
document.ordform.subtotal.value = currency(subtotal,10)
salestax=0
salestax = SalesTaxRate*subtotal
document.ordform.salestax.value = currency(salestax,10)
document.ordform.grandtotal.value = currency(subtotal+salestax,10)
}
//-- Shows number in ＃xxx,xxx.xx format and pads left side with blanks.
function currency(anynum,width) {
anynum=eval(anynum)
workNum=Math.abs((Math.round(anynum*100)/100));workStr=""+workNum
if (workStr.indexOf(".")==-1){workStr+=".00"}
dStr=workStr.substr(0,workStr.indexOf("."));dNum=dStr-0
pStr=workStr.substr(workStr.indexOf("."))
while (pStr.length<3){pStr+="0"}
//--- Adds comma in thousands place.
if (dNum>=1000) {
dLen=dStr.length
dStr=parseInt(""+(dNum/1000))+","+dStr.substring(dLen-3,dLen)
}
//-- Adds comma in millions place.
if (dNum>=1000000) {
dLen=dStr.length
dStr=parseInt(""+(dNum/1000000))+","+dStr.substring(dLen-7,dLen)
}
retval=dStr+pStr
if (anynum < 0) {
retval=retval.substring(1,retval.length)
retval="("+retval+")"
}
retval = "?quot;+retval
//--Pad with leading blanks to better align numbers.
while (retval.length<width){retval=" "+retval}
return retval
}
</script>
</head>
<p>
<script language="JavaScript">
//Create a new array named prodlist with six elements.
prodlist = new BuildZeroArray(ProductsInList) //Create empty product list
//array.
//-- JavaScript programmers: The array below defines products and unit
//prices.
//-- The only comma allowed in each line is the one that separates the
//product
//-- name from its unit price. Do not change first item (prodobj[0]).
prodlist[0] = new prodobj('-none-',0)
prodlist[1] = new prodobj('Anachronistic Widget',10.00)
prodlist[2] = new prodobj('Bombastic Gadget',10.50)
prodlist[3] = new prodobj('Cosmic Wingydingy',11.00)
prodlist[4] = new prodobj('Desultory Doodad',11.99)
prodlist[5] = new prodobj('Ethereal Entity',12.00)
prodlist[6] = new prodobj('Fantastic Fingmabob',14.99)
prodlist[7] = new prodobj('Garrulous Gizmo',25.00)
prodlist[8] = new prodobj('Humongous Humanoid',99.99)
prodlist[9] = new prodobj('Ignominious Innuendo',100.00)
prodlist[10] = new prodobj('Jumping Jehosafatz',250.00)
//create a new 0 array to hold the img source list
imglist = new BuildZeroArray(ProductsInList)
imglist[0] = new Image
imglist[0].src = "C:\My Documents\My Pictures\iceberg.jpg"
imglist[1] = new Image
imglist[1].src = "moon.gif"
imglist[2] = new Image
imglist[2].src = "storytellinglogo-2.jpg"
imglist[3] = new Image
imglist[3].src = "soldi150.gif"
imglist[4] = new Image
imglist[4].src = "C:\My Documents\My Pictures\iceberg.jpg"
imglist[5] = new Image
imglist[5].src = "moon.gif"
imglist[6] = new Image
imglist[6].src = "storytellinglogo-2.jpg"
imglist[7] = new Image
imglist[7].src = "soldi150.gif"
imglist[8] = new Image
imglist[8].src = "C:\My Documents\My Pictures\iceberg.jpg"
imglist[9] = new Image
imglist[9].src = "moon.gif"
imglist[10] = new Image
imglist[10].src = "storytellinglogo-2.jpg"
//-- JavaScript programmers- The ProductsInList variable defined in the
//head of
//-- this page must match the highest-numbered item in this array. In this
//sample
//-- page you can see that the ProductsInList variable is initially set to
//10, which
//-- matches the last subscript in the array above.
//-- Creates a new array named ordData, which will stores order form line
//items.
ordData = new MakeArray(RowsInForm)
for (var i=1; i<= RowsInForm; i++) {
ordData = new ordobj(0,0,0,0)
}
</script>
<!-- WARNING- A real form would require METHOD = and ACTION= attributes in
the FORM tag -->
<!-- below > to ensure that the data gets sent somewhere. The contents of
the tag would -->
<!-- be something like FORM name="ordform" METHOD="POST"
ACTION="someHandler" -->
<!-- where someHandler would refer to some kind of mailto CGI script. If
you need -->
<!-- help with that, your best bet would be to contact your ISP and
ask -->
<!-- them how you should set up the ACTION= and METHOD= attributes of the
FORM tag. -->
</p>
<form name="ordform" method="POST" action="../../someHandler">
<table align="center" border="1" bgcolor="#A8A8DO">
<tr>
<th width="228"><b>Product</b></th>
<th width="58" align="center"><b>Qty</b></th>
<th width="169" align="center"><b>Unit Price</b></th>
<th width="167" align="center"><b>Ext Price</b></th>
</tr>
<!-- Tags for remaining table rows are generated by JavaScript code. -->
<script language="JavaScript">
for (var rownum=1;rownum<=RowsInForm;rownum++) {
document.write('<tr><td width=192>')
document.write('<img src=http://www.webdeveloper.com/forum/archive/index.php/"C:\My Documents\My Pictures\iceberg.jpg" name="prod'+rownum+'" align="left">')
document.write('<select name="prodchosen'+rownum+'"onChange="updateRow('+rownum+')">')
for (i=0; i<=ProductsInList; i++) {
document.write ("<option>"+prodlist.name)
}
document.write ('</select></td>')
document.write ('<td width=72 align="center"><input class="num"name="qty'+rownum+'" value=http://www.webdeveloper.com/forum/archive/index.php/""')
document.write ('size=3 onChange="updateRow('+rownum+')"></td>')
document.write ('<td width=120 height="99" align="center">')
document.write ('<input class="num" name="unitprice'+rownum+'" value=http://www.webdeveloper.com/forum/archive/index.php/""')
document.write ('size=10 onfocus="this.blur()"></td>')
document.write ('<td width=120 align="center">')
document.write ('<input class="num" name="extprice'+rownum+'" value=http://www.webdeveloper.com/forum/archive/index.php/""')
document.write ('size=10 onfocus = "this.blur()"></td>')
document.write ('</tr>')
}
</script>
<tr>
<td colspan="3" align="right">Subtotal:</td>
<td width="167" align="center">
<input class="num" name="subtotal"
size="10" onfocus="this.blur()"></td>
</tr>
<tr>
<td colspan="2" height="36"> </td>
<td width="169" align="right" height="36">Sales Tax:</td>
<td width="167" align="center" height="36">
<input class="num" name="salestax"
size="10" onfocus="this.blur()"></td>
</tr>
<tr>
<td colspan="3" align="right">Grand Total:</td>
<td width="167" align="center">
<input class="num" name="grandtotal"
size="10" onfocus="this.blur()"></td>
</tr>
</table>
</form>
<!-- End of order form -->
</body>
</html>