WebTechnologie - ukázkové skripty PHP, XHTML, JavaScript, CSS... (c) Scorpions.cz

HOME SKRIPTY
Formuláře - Nákupný katalog
Normální položka
Zobrazeno: 10097

Popis: Docela slušný formulář pro eShop
Funkčnost: Funkční v IE 5.5 a vyšší, Mozzila FireFox, Opera
Hodnocení: ****
Ukázka
 
<FORM name="form1" 
action="mailto:prijemce@nekde.cz" 
method="post" 
enctype="text/plain" 
onSubmit="return validate_form()" 
> 

<SCRIPT language="JavaScript"> 
<!-- 

function createArray(size) { 
for (var i=0; i < size; i++) { 
this[i] = null } 
this.length = size; 
return this 
} 
function Product(descrip, money) { 
this.description = descrip; 
this.cena = money; 
} 

var items = new Object(); 
color1 = "tan"; 
color2 = "khaki"; 

items[1] = new Product("Produkt 1 název", 25.50); 
items[2] = new Product("Produkt 2 název", 39.95); 
items[3] = new Product("Produkt 3 název", 5.23); 
items[4] = new Product("Produkt 4 název", 13); 

function SetLengths() { 
var k=1; 
while(items[k] != null) k++; 
items.length = k; 
} 
SetLengths(); 

function writeSelect(num) { 
// you can change the values in each quantity pop-up menu 
// by changing the values in the options array below 
leng = 10; 
options = new createArray(leng); 
options[0] = 0; 
options[1] = 1; 
options[2] = 2; 
options[3] = 3; 
options[4] = 4; 
options[5] = 5; 
options[6] = 6; 
options[7] = 7; 
options[8] = 8; 
options[9] = 9; 

html_code = ""; 

html_code += '<select size=1 name="pocet'+num+'" ' 
+ 'onChange="update(' + num + ')">'; 
for (o=0;o<leng;o++) 
html_code += '<option value="'+options[o]+'"' 
+ ((o==0) ? ' selected>':'>') + options[o]; 
html_code += '</select>'; 
return html_code; 
} 

function writeTableRow(i) { 
document.write('<TR><TD><INPUT type=checkbox name="vyber' + i 
+ '" onClick="update(' + i + ')">' + items[i].description 
+ ' - KČ ' + fix(items[i].cena) + '</td>' 
+ '<TD valign=bottom><INPUT type="text" value="0.00" name="cena' + i + '" ' 
+ 'size=12 maxlength=12 onFocus="document.form1.cena' + i + '.blur()">' 
+ '</td><TD valign=bottom>' + writeSelect(i) + '</td></tr>'); 
} 

function writeTable() { 
document.write('<table cellspacing=8 cellpadding=0 border=0>' 
+ '<TR><TD><B>Položky:</B></TD><TD></TD><TD><B>Kusů</B></TD></TR>'); 
for (i=1; i<items.length; i++) 
writeTableRow(i); 
document.write('<TR><TD align=right>Celkem: </td><TD><INPUT type="text" ' 
+ 'name="celkem" size=12 maxlength=12 value="0.00"></td></tr></table>'); 
} 

function update(num) { 
eval('q_selected = document.form1.pocet' + num + '.selectedIndex;'); 
eval('quant = document.form1.pocet' + num + '.options[q_selected].value;'); 
if (eval('document.form1.vyber' + num + '.checked')) 
cost = fix(items[num].cena * quant); 
else 
cost = fix(0); 
eval('document.form1.cena' + num + '.value = cost;'); 
var grand_total = 0; 
for (i=1; i<items.length; i++) 
eval('grand_total += parseFloat(document.form1.cena' + i + '.value);'); 
document.form1.celkem.value = fix(grand_total); 
} 

function fix(num) { 
string = "" + num; 
if (string.indexOf('.') == -1) 
return string + '.00'; 
seperation = string.length - string.indexOf('.'); 
if (seperation > 3) 
return string.substring(0,string.length-seperation+3); 
else if (seperation == 2) 
return string + '0'; 
return string; 
} 

function validate_form() { 
validity = true; 
if (document.form1.jmeno.value == "") { 
alert('Zapomněli jste jméno!'); 
validity = false; 
} 

if (document.form1.email.value == "") { 
if (confirm("Zapomněli jste email!")) 
document.form1.email.value = 'bez emailové adresy'; 
else 
validity = false; 
} 

if (document.form1.telefon.value == "") { 
alert('Zapomněli jste telefon!'); 
validity = false; 
} 

if (document.form1.termin.value == "") { 
alert('Zapomněli jste termín!'); 
validity = false; 
} 

if (document.form1.adresa.value == "") { 
alert('Zapomněli jste adresu!'); 
validity = false; 
} 

if (validity) 
alert("Děkujeme Vám za objednávku!"); 
return validity; 
} 

//--> 
</SCRIPT> 
<FONT face="Arial, Helvetica, Geneva" size=+2> 
<B> 
Online Shopping Katalog 
</B> 
</FONT> 
<BR><BR> 

<SCRIPT language="JavaScript"> 
<!-- 
writeTable(); // writes all categories 

document.write('<BR><TABLE cellspacing=0 cellpadding=5 ' 
+ 'bgcolor="' + color1 + '">'); 
//--> 
</SCRIPT> 

<TR> 
<TD align=left> 
Jméno: <INPUT type="text" name="jmeno" size=30><BR> 
Email: <INPUT type="text" size=30 name="email"><BR> 
Telefon: <INPUT type="text" size="14" name="telefon"><BR> 
Způsob platby: Hotové při předání zboží. 
<BR> 
Požadovaný termín dodávky: <INPUT type="text" size="10" maxlength="10" name="termin"> 

<BR>Adresa:<BR> 
<TEXTAREA wrap="virtual" rows=5 cols=30 name="adresa">
Poznámka: