Makaveli.2003
01-30-2003, 11:45 AM
I got this script (see below) but I need to add pictures, so as the user is changing thru the drop down menu I need pictures to appear on the left-hand side and as each item is changed/browsed I need the picture to be updated, is this possible, could sum1 plzzzzz tell me how this is done?
<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 = 5 //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[i]=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[i]=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)
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[i].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 = "£"+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)
//-- 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[i] = 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="#CCCCCC">
<tr>
<th width="192"><b>Product</b></th>
<th width="72" align="center"><b>Qty</b></th>
<th width="120" align="center"><b>Unit Price</b></th>
<th width="120" 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('<select name="prodchosen'+rownum+'" onChange="updateRow('+rownum+')">')
for (i=0; i<=ProductsInList; i++) {
document.write ("<option>"+prodlist[i].name)
}
document.write ('</select></td>')
document.write ('<td width=72 align="center"><input class="num" name="qty'+rownum+'" value=""')
document.write ('size=3 onChange="updateRow('+rownum+')"></td>')
document.write ('<td width=120 align="center">')
document.write ('<input class="num" name="unitprice'+rownum+'" value="" ')
document.write ('size=10 onfocus="this.blur()"></td>')
document.write ('<td width=120 align="center">')
document.write ('<input class="num" name="extprice'+rownum+'" value="" ')
document.write ('size=10 onfocus = "this.blur()"></td>')
document.write ('</tr>')
}
</script>
<tr>
<td width="384" colspan="3" align="right">Subtotal:</td>
<td width="120" align="center"><input class="num" name="subtotal" size="10" onfocus="this.blur()"></td>
</tr>
<tr>
<td width="264" colspan="2"> </td>
<td width="120" align="right">Sales Tax: </td>
<td width="120" align="center"><input class="num" name="salestax" size="10" onfocus="this.blur()"></td>
</tr>
<tr>
<td width="384" colspan="3" align="right">Grand Total:</td>
<td width="120" align="center"><input class="num" name="grandtotal" size="10" onfocus="this.blur()"></td>
</tr>
</table>
</form>
<!-- End of order form -->
</body>
</html>
<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 = 5 //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[i]=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[i]=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)
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[i].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 = "£"+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)
//-- 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[i] = 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="#CCCCCC">
<tr>
<th width="192"><b>Product</b></th>
<th width="72" align="center"><b>Qty</b></th>
<th width="120" align="center"><b>Unit Price</b></th>
<th width="120" 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('<select name="prodchosen'+rownum+'" onChange="updateRow('+rownum+')">')
for (i=0; i<=ProductsInList; i++) {
document.write ("<option>"+prodlist[i].name)
}
document.write ('</select></td>')
document.write ('<td width=72 align="center"><input class="num" name="qty'+rownum+'" value=""')
document.write ('size=3 onChange="updateRow('+rownum+')"></td>')
document.write ('<td width=120 align="center">')
document.write ('<input class="num" name="unitprice'+rownum+'" value="" ')
document.write ('size=10 onfocus="this.blur()"></td>')
document.write ('<td width=120 align="center">')
document.write ('<input class="num" name="extprice'+rownum+'" value="" ')
document.write ('size=10 onfocus = "this.blur()"></td>')
document.write ('</tr>')
}
</script>
<tr>
<td width="384" colspan="3" align="right">Subtotal:</td>
<td width="120" align="center"><input class="num" name="subtotal" size="10" onfocus="this.blur()"></td>
</tr>
<tr>
<td width="264" colspan="2"> </td>
<td width="120" align="right">Sales Tax: </td>
<td width="120" align="center"><input class="num" name="salestax" size="10" onfocus="this.blur()"></td>
</tr>
<tr>
<td width="384" colspan="3" align="right">Grand Total:</td>
<td width="120" align="center"><input class="num" name="grandtotal" size="10" onfocus="this.blur()"></td>
</tr>
</table>
</form>
<!-- End of order form -->
</body>
</html>