home *** CD-ROM | disk | FTP | other *** search
/ Web Designer 98 (Professional) / WebDesigner 1.0.iso / tutorials / tutorial / order_form.txt < prev    next >
Encoding:
Text File  |  1997-06-15  |  7.9 KB  |  253 lines
  1. <SCRIPT LANGUAGE="JavaScript">
  2.  
  3.  
  4. function fix(num,places)
  5. {
  6.         shift = Math.pow(10,places);
  7.         totalDecimal = "" + Math.round(num * shift);
  8.         integer = totalDecimal.substring(0,totalDecimal.length - places );
  9.         decimal = totalDecimal.substring(totalDecimal.length - places,totalDecimal.length - places + 2);
  10.         return(integer + "." + decimal);
  11. }
  12.  
  13. function td(s) { return("<TD>" + s + "</TD>"); }
  14.  
  15. function tr(s) { return ("<TR>" + s + "</TR>"); }
  16.  
  17. function input(name,type,onStuff,val,size)
  18. {
  19.         i = '<INPUT TYPE="' + type + '" name="' + name + '" ';
  20.         if ( size != 0 )
  21.                 i = i + 'SIZE=' + size + ' ';
  22.         if ( val != null )
  23.                 i = i + 'VALUE ="' + val + '" ';
  24.         if ( onStuff == null )
  25.                 i = i + '>';
  26.         else
  27.                 i = i + onStuff + '>';
  28.         return(i);
  29. }
  30.  
  31. function w(s) { document.write(s); }
  32.  
  33. function tdOpen() { return("<TD>"); }
  34.  
  35. function tdClose() { return("</TD>"); }
  36.  
  37. function trOpen() { return("<TR>"); }
  38.  
  39. function trClose() { return("</TR>"); }
  40.  
  41. function selectOpen(name) { return('<SELECT NAME="' + name + '" SIZE=1>'); }
  42.  
  43. function selectClose() { return("</SELECT>"); }
  44.  
  45. function selectOption(option) { return("<OPTION>" + option); }
  46.  
  47. function orderLine(code,description,price,option1,option2,option3,option4,option5,option6,option7,option8,option9,option10)
  48. {
  49.         w(trOpen());
  50.         w(td(code));
  51.         if ( option1 == null )
  52.                 w(td(description));
  53.         else {
  54.                 w(tdOpen());
  55.                 w(description+" ");
  56.                 w(selectOpen("option"));
  57.                 w(selectOption(option1));
  58.                 if ( option2 != null ) w(selectOption(option2));
  59.                 if ( option3 != null ) w(selectOption(option3));
  60.                 if ( option4 != null ) w(selectOption(option4));
  61.                 if ( option5 != null ) w(selectOption(option5));
  62.                 if ( option6 != null ) w(selectOption(option6));
  63.                 if ( option7 != null ) w(selectOption(option7));
  64.                 if ( option8 != null ) w(selectOption(option8));
  65.                 if ( option9 != null ) w(selectOption(option9));
  66.                 if ( option10 != null ) w(selectOption(option10));
  67.                 w(selectClose());
  68.                 w(tdClose());
  69.         }
  70.         w(td(fix(price,2)+input("price","hidden","onChange=dummy()",price,0)));
  71.         w(td(input("quantity","text","onChange=computeField(this)","",4)));
  72.         w(td(input("cost","text","onFocus=moveAlong(this)","",8)));
  73.         w(trClose());
  74. }
  75.  
  76. function setIndexes() {
  77.  
  78. //      Introduce another field called index into the price,quantity and cost
  79. //      arrays to store the actual index positions within the array. So that
  80. //      each element "knows" it's own index. This will be usefull in the
  81. //      computeField() function where the index won't be known explicitly.
  82.  
  83.         var j;
  84.  
  85.         var a=document.form.price,b=document.form.quantity,c=document.form.cost;
  86.         for (j=0; j<c.length; j++) {
  87.                 a[j].index = j;
  88.                 b[j].index = j;
  89.                 c[j].index = j;
  90.         }
  91. }
  92.  
  93. function postageLine(price)
  94.  
  95. // Add the postage cost to the cost array. Also add a dummy price and quantity
  96. // hidden field to keep JavaScript happy.
  97. {
  98.         w(tr(td("") + td("Insurance, packaging and delivery") + td(input("price","hidden","onChange=dummy()","",0)) + td(input("quantity","hidden","onChange=dummy()","",0)) + td(fix(price,2)+input("cost","hidden","onChange=dummy()",price,0))));
  99. }
  100.  
  101. function totalLine()
  102.  
  103. // This simply adds a total field to the form. computForm() is called if the
  104. // user changes this field!
  105.  
  106. {
  107.         w(tr(td("") + td("") + td("") + td("Total") + td(input("total","text","onFocus=moveAlong(this)","",8))));
  108. }
  109.  
  110. function checkNum(str,min,max) {
  111.  
  112. // Check the value is numeric and in the range min to max.
  113.  
  114.         for ( var i=0; i < str.length; i++) {
  115.                 var ch = str.substring(i,i+1);
  116.                 if ( ch < "0" || ch > "9") {
  117.                         alert("Try a number, please.");
  118.                         return(false);
  119.                 }
  120.         }
  121.  
  122.         var num = 0 + str;
  123.  
  124.         if ( num < min || num > max ) {
  125.                 alert("Try a number from " + min + " to " + max );
  126.                 return(false);
  127.         }
  128.  
  129.         return(true);
  130. }
  131.  
  132. var focusTo = 0;
  133.  
  134. function computeField(input)
  135.  
  136. //      Make sure field value is numeric then calculate the cost for
  137. //      this item by multiplying the unit price by the quantity.
  138. {
  139.         focusTo = 0;
  140.         if ( input.value != null && input.value.length != 0 ) {
  141.                 if ( checkNum(input.value,1,100) ) {
  142.                         input.value = "" + eval(input.value);
  143.                         input.form.cost[input.index].value = fix(input.value * input.form.price[input.index].value,2);
  144.                 }
  145.                 else {
  146.                         input.value = "";
  147.                         input.form.cost[input.index].value = "";
  148.                         input.focus();
  149.                         input.select();
  150.                         focusTo = input;        // Make SURE we get the focus!
  151.                         return;
  152.                 }
  153.         }
  154.         else
  155.                 input.form.cost[input.index].value = "";
  156.  
  157. //      Sum the costs
  158.  
  159.         computeForm();
  160. }
  161.  
  162. function moveAlong(input) {
  163.  
  164. // The focus is on a field that shouldn't be changed.
  165. // This is either the total field or one of the cost fields.
  166.  
  167.         if ( focusTo != 0 ) {
  168.                 focusTo = 0;
  169.                 return;
  170.         }
  171.         else {
  172.                 var newindex = 0;
  173.                 if ( input.name != "total" ) 
  174.                         if ( input.index+2 < input.form.cost.length )
  175.                                 newindex = input.index+1;
  176.                 input.form.quantity[newindex].select();
  177.                 input.form.quantity[newindex].focus();
  178.         }
  179. }
  180.  
  181. // do nothing function to satisfy onChange for hidden fields
  182.  
  183. function dummy(){}
  184.  
  185. function fixupCost(input)
  186.  
  187. //      The idiot has modified a cost field - fix it up for him!
  188.  
  189. {
  190.         input.form.cost[input.index].value = fix(input.form.quantity[input.index].value * input.form.price[input.index].value,2);
  191.  
  192. }
  193. function computeForm()
  194.  
  195. //      Sum the cost column into the total
  196.  
  197. {
  198. var total = 0;
  199.  
  200.         var c=document.form.cost,total=0;
  201.         for (j=0; j<c.length; j++) {
  202.                 if ( c[j].value != "" )
  203.                         total += eval(c[j].value);
  204.         }
  205.  
  206. //      If just the postage then clear the total
  207.  
  208.         if ( total != document.form.cost[document.form.cost.length - 1].value )
  209.                 document.form.total.value = fix(total,2);
  210. //              document.form.total.value = total;
  211.         else
  212.                 document.form.total.value = "";
  213.                 
  214. }
  215.  
  216.  
  217. </SCRIPT>
  218.  
  219. <FORM NAME="form" ACTION=/cgi-bin/marketting/order METHOD=POST>
  220. <DD>Name
  221. <DD><INPUT TYPE="text" NAME="name" SIZE=60 MAXLENGTH=60 VALUE=""><BR><DD>Delivery address
  222. <DD><INPUT TYPE="text" NAME="address" SIZE=60 MAXLENGTH=60 VALUE=""><BR><DD>Postcode
  223. <DD><INPUT TYPE="text" NAME="postcode" SIZE=4 MAXLENGTH=4 VALUE=""><BR><DD>Telephone
  224. <DD><INPUT TYPE="text" NAME="telephone" SIZE=15 MAXLENGTH=15 VALUE=""><BR><HR><PRE>
  225. <TABLE BORDER>
  226. <TR>
  227. <TD>Code</TD><TD>Description</TD><TD>Price</TD><TD>Quantity</TD><TD>Cost</TD>
  228. </TR>
  229. <SCRIPT LANGUAGE="JavaScript">
  230.  
  231. orderLine("SB1","Polo Shirt","19.95","S","M","L","XL","XXL");
  232. orderLine("SB2","Legionnaire Cap","5.95");
  233. orderLine("SB3","Golf Umbrella","29.95");
  234. orderLine("SB4","Key Purse","13.95");
  235. orderLine("SB5","Mouse Mat","9.45");
  236. orderLine("SB6","Lapel Pin","2.95");
  237. orderLine("SB7","Pen & Pencil Set","39.95");
  238. orderLine("SB8","Golf Ball","4.95");
  239. orderLine("SB9","Mug","8.95");
  240. orderLine("SB10","Coaster","1.95");
  241. orderLine("CC1","Executive Pen","24.95","Blue","Burgundy");
  242. orderLine("CC2","Disk Wallet","19.95");
  243. orderLine("CC3","Bilby","13.95");
  244. orderLine("CC4","Stubbie Holder","3.95");
  245. orderLine("CC5",'Video <I>"Down to Earth"</I>',"31.50");
  246. postageLine("6.50");
  247. totalLine();
  248. setIndexes();
  249.  
  250. </SCRIPT>
  251. </TABLE>
  252. </FORM>
  253.