Ciao a tutti!!
Avrei necessità di creare un modulo per permettere l'invio di una mail contenente una sorta di richiesta di ordine con nome oggetto, quantità prezzo e totale....
l'utente deve arrivare sulla pagina, complilare il modulo e inviare la richiesta.
cercando online ne ho trovato uno piuttosto completo che ti permette di scegliere tutto compresi indirizzi di fatturazione ma essendo un esempio non invia la mail.
Visto che sono niubbo e ci capisco poco, posto il codice per chiunque voglia provare a finire lo script e magari ripubblicare il tutto in modo da poter mettere da parte qualcosa di un po piu completo per tutti.... (non si sa mai impari qualcosa anche io!!)
Ecco il codice:
PAGINA html:
-----------------------------------------------------------------------------------
<html>
<head>
<META NAME="DESCRIPTION" CONTENT="javascript examples with source code">
<META NAME="KEYWORDS" CONTENT="java, script, javascript, examples, source, code, forms, games">
<META NAME="AUTHOR" CONTENT="Uncle Jim's Web Site Designs">
<link rel=stylesheet type=text/css href="hs.css">
<script language="JavaScript"><!--
defaultStatus = "Uncle Jims Website Designs http://jdstiles.com"
//--></script>
<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>Interactive JavaScript Order Form</title>
<script language="javascript"><!--
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.0600 //Set to sales tax rate in decimal. e.g. 0.0775 is 6.00%.
var TaxableState = "FL" //Set to name of state you charge sales tax in.
var ProdSubscript = 0 //Identifies subscript of selected product in current row.
function MakeArray(n) {
this.length = n
for (var i=1;i<=n;i++) {this[i]=0}
return this
}
function BuildZeroArray(n) {
this.length = n
for (var i=0;i<=n;i++) {this[i]=0}
return this
}
function prodobj(name, unitprice) {
this.name = name
this.unitprice = unitprice
}
function ordobj(prodsub, qty, unitprice, extprice) {
this.prodsub = prodsub
this.qty = qty
this.unitprice = unitprice
this.extprice = extprice
}
function updateRow(rownum){
var exeLine='ProdSubscript=document.ordform.prodchosen '+rownum+'.selectedIndex'
eval(exeLine)
ordData[rownum].prodsub=ProdSubscript
var exeLine='tempqty=document.ordform.qty'+rownum+'.va lue'
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+'.valu e=currency(ordData['+rownum+'].unitprice,10)'
eval (exeLine)
var exeLine='document.ordform.extprice'+rownum+'.value =currency(ordData['+rownum+'].extprice,10)'
eval(exeLine)
updateTotals()
}
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
if (document.ordform.Taxable.checked) {
salestax = SalesTaxRate*subtotal
}
document.ordform.salestax.value = currency(salestax,10)
document.ordform.grandtotal.value = currency(subtotal+salestax,10)
}
function copyAddress() {
document.ordform.shipName.value=document.ordform.b illName.value
document.ordform.shipCompany.value=document.ordfor m.billCompany.value
document.ordform.shipAdd1.value=document.ordform.b illAdd1.value
document.ordform.shipAdd2.value=document.ordform.b illAdd2.value
document.ordform.shipCSZ.value=document.ordform.bi llCSZ.value
document.ordform.shipPhone.value=document.ordform. billPhone.value
document.ordform.shipEmail.value=document.ordform. billEmail.value
}
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=d Str-0
pStr=workStr.substr(workStr.indexOf("."))
while (pStr.length<3){pStr+="0"}
if (dNum>=1000) {
dLen=dStr.length
dStr=parseInt(""+(dNum/1000))+","+dStr.substring(dLen-3,dLen)
}
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>
<script language="JavaScript"><!--
prodlist = new BuildZeroArray(ProductsInList)
prodlist[0] = new prodobj('-none-',0)
prodlist[1] = new prodobj('Bumper Sticker',10.00)
prodlist[2] = new prodobj('Lapel Pin',10.50)
prodlist[3] = new prodobj('Ball Cap',11.00)
prodlist[4] = new prodobj('Calendar',11.99)
prodlist[5] = new prodobj('Braided Ball Cap',12.00)
prodlist[6] = new prodobj('License Plate',14.99)
prodlist[7] = new prodobj('One Year Membership',25.00)
prodlist[8] = new prodobj('Wrist Watch',99.99)
prodlist[9] = new prodobj('Five Year Membership',100.00)
prodlist[10] = new prodobj('Life Time Membership',250.00)
ordData = new MakeArray(RowsInForm)
for (var i=1; i<= RowsInForm; i++) {
ordData[i] = new ordobj(0,0,0,0)
}
//--></script>
</p>
<form name="ordform" method="POST" action="someHandler">
<table align="center" border="1" bgcolor="#800000"><tr>
<th width="192" BGCOLOR="YELLOW">Product</th>
<th width="72" BGCOLOR="YELLOW" align="center">Qty</th>
<th width="120" BGCOLOR="YELLOW" align="center">Unit Price</th>
<th width="120" BGCOLOR="YELLOW" align="center">Ext Price</th>
</tr>
<script language="JavaScript"><!--
for (var rownum=1;rownum<=RowsInForm;rownum++) {
document.write('<tr><td width=192 BGCOLOR="CYAN">')
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" BGCOLOR="CYAN"><input class="num" name="qty'+rownum+'" value=""')
document.write ('size=3 onChange="updateRow('+rownum+')"></td>')
document.write ('<td width=120 align="center" BGCOLOR="CYAN">')
document.write ('<input class="num" name="unitprice'+rownum+'" value="" ')
document.write ('size=10 onfocus="this.blur()"></td>')
document.write ('<td width=120 align="center" BGCOLOR="CYAN">')
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" BGCOLOR="LIMEGREEN">Subtotal:</td>
<td width="120" align="center" BGCOLOR="LIMEGREEN"><input class="num" name="subtotal" size="10" onFocus="this.blur()"></td></tr>
<tr><td width="264" colspan="2" BGCOLOR="CYAN"><input type="checkbox" name="Taxable" value="true" onClick="updateTotals()">Click here if you live in <script>document.write(TaxableState)</script></td>
<td width="120" align="right" BGCOLOR="LIMEGREEN">Sales Tax: </td>
<td width="120" align="center" BGCOLOR="CYAN"><input class="num" name="salestax" size="10" onFocus="this.blur()"></td>
</tr>
<tr>
<td width="384" colspan="3" align="right" BGCOLOR="YELLOW">Grand Total:</td>
<td width="120" align="center" BGCOLOR="#800000"><input class="num" name="grandtotal" size="10" onFocus="this.blur()"></td></tr></table>
</p>
<table border="1" align="center" bgcolor="#C0C0C0"><tr>
<td width="528" colspan="2"><center>Bill To</center></td></tr>
<tr><td width="120" align="right">Name:</td><td width="408"><input name="billName" size="50"></td></tr>
<tr><td width="120" align="right">Company:</td><td width="408"><input name="billCompany" size="50"></td></tr>
<tr><td width="120" align="right">Address1:</td><td width="408"><input name="billAdd1" size="50"></td></tr>
<tr><td width="120" align="right">Address2:</td><td width="408"><input name="billAdd2" size="50"></td></tr>
<tr><td width="120" align="right">City, State, Zip:</td><td width="408"><input name="billCSZ" size="50"></td></tr>
<tr><td width="120" align="right">Phone:</td><td width="408"><input name="billPhone" size="25"></td></tr>
<tr><td width="120" align="right">Email address:</td><td width="408"><input name="billEmail" size="40"></td></tr>
</table>
<center><input type="button" value="Click if Ship To Address Same as Bill To" onClick="copyAddress()"></center></p>
<table border="1" align="center" bgcolor="#C0C0C0"><tr>
<td width="528" colspan="2"><center>Ship To</center></td></tr>
<tr><td width="120" align="right">Name:</td><td width="408"><input name="shipName" size="50"></td></tr>
<tr><td width="120" align="right">Company:</td><td width="408"><input name="shipCompany" size="50"></td></tr>
<tr><td width="120" align="right">Address1:</td><td width="408"><input name="shipAdd1" size="50"></td></tr>
<tr><td width="120" align="right">Address2:</td><td width="408"><input name="shipAdd2" size="50"></td></tr>
<tr><td width="120" align="right">City, State, Zip:</td><td width="408"><input name="shipCSZ" size="50"></td></tr>
<tr><td width="120" align="right">Phone:</td><td width="408"><input name="shipPhone" size="25"></td></tr>
<tr><td width="120" align="right">Email address:</td><td width="408"><input name="shipEmail" size="40"></td></tr>
</table>
</p>
<center>
<input type="Button" value="Submit Form" onClick="alert('I do not really get submitted because I am just an example.')">
<input type="reset"></center></form>
</body>
</html>
-----------------------------------------------------------------------------------
Foglio di Stile
body {
background:#fff8dc;
text-align:left;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
font-size: 12px;
font-family: verdana, arial, serif;
color:#000066;
scrollbar-face-color: #ffdead;
scrollbar-shadow-color: #990000;
scrollbar-highlight-color: #990000;
scrollbar-3dlight-color: #f5f5f5;
scrollbar-darkshadow-color: #f5f5f5;
scrollbar-track-color:#fff8dc;
scrollbar-arrow-color: #990000;
}
a {
background: transparent;
color:#000066;
text-decoration:none;
border-bottom:none;
font-size:small;
}
a.img:hover {
background: transparent;
color:#ff69b4;
border-bottom:none;
}
a:hover {
background: transparent;
color:#ff1493;
border-bottom:1px dotted;
}
a.menu {
background: transparent;
color:#000066;
text-decoration:none;
border-bottom:none;
font-size:small;
}
a.menu:hover {
background-color: #ffdead;
color:#8b0000;
border-bottom: none;
}
P.head {
font-weight: bold;
font-size: small;
color: #0000ff;
background: #fff8dc;
}
P.next {
font-weight: normal;
border: ridge 4px;
background: #ffdead;
color: #8b0000;
}
P.title {
font-weight: bolder;
font-size: medium;
border: ridge 2px;
background: #ffdead;
color: #ff0000;
}
fieldset {
padding: .5em;
background: transparent;
border: 1px double dashed #990000;
margin-left: 4px;
margin-right: 4px;
margin-top: .5em;
}
fieldset legend {
background-color: #ffdead;
color: #00008b;
font-size: small;
padding: .1ex .5ex;
border: 2px double solid #990000;
font-weight: bold;
}
input, select, textarea {
font-weight: bold;
color: #990000;
background: #ffdead;
border: ridge 1px;
border-color:#990000;
}
.bullet {
list-style-type: circle;
color:#ff0000;
}
td.title {
font-weight: bolder;
border: ridge 1px;
border-color:#990000;
background: #ffdead;
color: #990000;
}
div.main {
margin:20px;
padding:0;
}
div.next {
font-weight: normal;
border: ridge 4px;
background: #ffdead;
color: #8b0000;
}
-----------------------------------------------------------------------------------
Rispondi quotando
