Javascript-enable this form please



Hello,

Here's a form that's to be used to compose one's own PC package online. The overall price comprises several bits and pieces; a number of parts can be added interactively to the set, allowing a customer immediate feedback as to how much each aditional add-on would cost, as well the final cost.

The original script is by Kek and Michel Plungjan. I have adjusted the original such that the engine can be used for this form - I think.

Is it possible for all price results to be displayed without requiring any input (other than selecting one of the form's options, of course) while still being ok to browsers from 3rd gen. up?

One note: The 'nr_pieces' refers to the number of PC units purchased. I'd like users to get an alert when the <10 option is selected (for discount purposes).

P.S. The variable prices are fictional, as - by extension - are those of the default items set by the FORM attribute 'selected'. These script output results need to change to the appropriate value as a client adjusts the default assembly.

Thanks

Ben DeGraaf

The script starts here.....

<SCRIPT LANGUAGE="JavaScript"><!-- // cloak
/* parts copied from kEk's other form for consistency */

// Variables to be changed by webmaster:
var BTW     = 0.175;
var phd6_4  = 10;
var phd9_1  = 20;
var phd13_6 = 30;
var phd19_2 = 40;
var pm64    = 50;
var pm128   = 60;
var pm192   = 70;
var pC400   = 80;
var pC466   = 90;
var pC500   = 100;
var pP450   = 110;
var pm105s  = 120;
var pm105mb = 130;
var pm107s  = 140;
var pm107mp = 150;
var ps7w    = 160;
var ps9w    = 170;
var ps18w   = 180;
var pheadset= 190;
var pnr_pieces  = 1000;

function round(number,X) {
   X = (!X ? 2 : X);
   rc = ''+(Math.round(number*Math.pow(10,X))/Math.pow(10,X));
   if ( rc.indexOf(".") == -1 ) rc += '.00';
   else if ( rc.indexOf(".") == rc.length-2 ) rc += '0';
   if (rc.indexOf(".") == 0) rc = ''+0+rc
   return(rc);
}
function Totals(form) {
form.hd6_4_result.value = round( parseInt('0'+form.hd6_4.value,10)*p_hd6_4,2);
form.hd9_1_result.value   = round( parseInt('0'+form.hd9_1.value,  10)*p_hd9_1,    2);  
form.hd13_6_result.value = round( parseInt('0'+form.hd13_6.value,10)*p_hd13_6,  2);      
form.hd19_2_result.value = round( parseInt('0'+form.hd19_2.value, 10)*p_hd19_2, 2);        
form.m64_result.value = round( parseInt('0'+form.m64.value, 10)*p_m64, 2);        
form.m128_result.value = round( parseInt('0'+form.m128.value, 10)*p_m128, 2);            
form.m192_result.value = round( parseInt('0'+form.m192.value, 10)*p_m192, 2);            
form.C400_result.value   = round( parseInt('0'+form.C400.value,10)*p_C400, 2);  
form.C466_result.value = round( parseInt('0'+form.C466.value,10)*p_C466,2);      
form.C500_result.value = round( parseInt('0'+form.C500.value,10)*p_C500,2);        
form.P450_result.value = round( parseInt('0'+form.P450.value,10)*p_P450,2);        
form.m105s_result.value = round( parseInt('0'+form.m105s.value,10)*p_m105s,2);            
form.m105mb_result.value = round( parseInt('0'+form.m105mb.value,10)*p_m105mb,2);
form.m107s_result.value = round( parseInt('0'+form.m107s.value,10)*p_m107s,2);      
form.m107mp_result.value = round( parseInt('0'+form.m107mp.value,10)*p_m107mp,2);        
form.s7w_result.value = round( parseInt('0'+form.s7w.value,10)*p_s7w,2);        
form.s9w_result.value =round( parseInt('0'+form.s9w.value,10)*p_s9w,2);            
form.s18w_result.value=round( parseInt('0'+form.s18w.value,10)*p_s18w,2);
form.headset_result.value=round( parseInt('0'+form.headset.value,10)*p_headset,2);
form.nr_pieces_result.value=round( parseInt('0'+form.nr_pieces.value,10)*p_nr_pieces,2);

form.subtotaal.value = round( parseFloat('0'+form.hd6_4_result.value)
                               + parseFloat('0'+form.hd9_1_result.value)
                               + parseFloat('0'+form.hd13_6_result.value)
                               + parseFloat('0'+form.hd19_2_result.value)
                               + parseFloat('0'+form.m64_result.value)
                               + parseFloat('0'+form.m128_result.value)
                               + parseFloat('0'+form.m192_result.value)
                               + parseFloat('0'+form.C400_result.value)
                               + parseFloat('0'+form.C466_result.value)
                               + parseFloat('0'+form.C500_result.value)
                               + parseFloat('0'+form.P450_result.value)
                               + parseFloat('0'+form.m105s_result.value)
                               + parseFloat('0'+form.m105mb_result.value)                          
                               + parseFloat('0'+form.m107s_result.value)
                               + parseFloat('0'+form.m107mp_result.value)
                               + parseFloat('0'+form.s7w_result.value)
                               + parseFloat('0'+form.s9w_result.value)
                               + parseFloat('0'+form.s18w_result.value)
                               + parseFloat('0'+form.headset_result.value)
                               + parseFloat('0'+form.nr_pieces_result.value)
                               );
   form.btw.value       = round( parseFloat('0'+form.subtotaal.value) * BTW );
   form.totaal.value    = round( parseFloat('0'+form.subtotaal.value) + parseFloat('0'+form.btw.value) );
}


// uncloak --></SCRIPT>

The script ends here.....



The form starts here.......


<DIV ALIGN="CENTER">
<FORM ACTION="stuff to fill out later" METHOD="POST">





<TABLE STYLE="font-size: 12px" BORDERCOLOR="#000000" BORDERCOLORDARK="#ffffff" CELLSPACING="2" CELLPADDING="0" BORDER="1"><TR><Th COLSPAN="3"><FONT SIZE="+1" COLOR="#000080">Basispakket ASUS COBRA Profile</FONT></Th></TR>

<TR><TD COLSPAN="3">&nbsp;</TD></TR>

<TR><TD><FONT COLOR="#000080"><B>PC onderdeel</B></FONT></TD><TD><FONT COLOR="#000080"><B>Maak hier uw keuze voor een meer uitgebreid pakket</B></FONT></TD><TD><FONT COLOR="#000080"><B>Prijs (fl.)</B></FONT></TD></TR>


<TR><TD COLSPAN="3">&nbsp;</TD></TR>

<TR>
<TD>Harde Schijf (GB)</TD><TD>&nbsp;&nbsp;

<SELECT NAME="hd">
<OPTION SELECTED VALUE="hd6_4" onFocus='this.blur()'>6,4
<OPTION VALUE="hd9_1" onFocus='this.blur()'>9,1
<OPTION VALUE="hd13_6" onFocus='this.blur()'>13,6
<OPTION VALUE="hd19_2" onFocus='this.blur()'>19,2
</SELECT></TD>

<TD><INPUT NAME="hdd_sub_result" VALUE="10" SIZE="8" MAXLENGTH="16" TYPE="Text" onFocus='this.blur()'></TD></TR>





<TR><TD>Intern geheugen (MB)</TD><TD>&nbsp;&nbsp; <SELECT NAME="m">
<OPTION SELECTED VALUE="m64" onFocus='this.blur()'>64
<OPTION VALUE="m128" onFocus='this.blur()'>128
<OPTION VALUE="m192" onFocus='this.blur()'>192
</SELECT></TD>

<TD><INPUT NAME="mb_sub_result" VALUE="50" SIZE="8" MAXLENGTH="16" TYPE="Text" onFocus='this.blur()'></TD></TR>







<TR><TD>Processor (MHz)</TD><TD>&nbsp;&nbsp;
<SELECT NAME="mhz">
<OPTION SELECTED VALUE="C400" onFocus='this.blur()'>Intel Celeron 400
<OPTION VALUE="C466" onFocus='this.blur()'>Intel Celeron 466
<OPTION VALUE="C500" onFocus='this.blur()'>Intel Celeron 500
<OPTION VALUE="P450" onFocus='this.blur()'>Intel Pentium III 450
</SELECT></TD>


<TD><INPUT NAME="mhz_sub_result" VALUE="80" SIZE="8" MAXLENGTH="16" TYPE="Text" onFocus='this.blur()'></TD></TR>



<TR><TD>Monitor (Philips)</TD><TD>&nbsp;&nbsp;

<SELECT NAME="screen"><OPTION SELECTED VALUE="geen" onFocus='this.blur()'>Geen
<OPTION VALUE="m105s" onFocus='this.blur()'>105s
<OPTION VALUE="m105mb" onFocus='this.blur()'>105mb
<OPTION VALUE="m107s" onFocus='this.blur()'>107s
<OPTION VALUE="m107mp" onFocus='this.blur()'>107mp
</SELECT></TD>


<TD><INPUT NAME="screen_sub_result" VALUE="0.00" SIZE="8" MAXLENGTH="16" TYPE="Text" onFocus='this.blur()'></TD></TR>





<TR><TD>Geluidsboxen</TD><TD>&nbsp;&nbsp;

<SELECT NAME="speakers">
<OPTION SELECTED VALUE="geen" onFocus='this.blur()'>Geen
<OPTION VALUE="s7w" onFocus='this.blur()'>2 x 7w RMS 4 &quot;, 120W PMPO, 200Hz - 20kHz
<OPTION VALUE="s9w" onFocus='this.blur()'>2 x 9w RMS 3 &quot;, 180W PMPO, 40Hz - 20kHz
<OPTION VALUE="s18w" onFocus='this.blur()'>2 x 18w RMS 1 &quot; &amp; 4 &quot;, 350W PMPO, 20Hz - 20kHz
</SELECT>&nbsp;&nbsp;</TD>



<TD><INPUT NAME="speakers_result" VALUE="0.00" SIZE="8" MAXLENGTH="16" TYPE="Text" onFocus='this.blur()'></TD></TR>



<TR><TD>Hoofdtelefoon (Philips SBCL300)&nbsp;&nbsp;</TD><TD>&nbsp;&nbsp;
<SELECT NAME="headset">
<OPTION SELECTED VALUE="nee" onFocus='this.blur()'>Geen
<OPTION VALUE="ja" onFocus='this.blur()'>Ja</SELECT></TD>



<TD><INPUT NAME="headset_result" VALUE="0.00" SIZE="8" MAXLENGTH="16" TYPE="Text" onFocus='this.blur()'></TD></TR>


<TR><TD>Totaal aantal PC's</TD><TD>&nbsp;&nbsp;

<SELECT NAME="nr_pieces">
<OPTION SELECTED VALUE="1" onFocus='this.blur()'>01
<OPTION VALUE="2" onFocus='this.blur()'>02
<OPTION VALUE="3" onFocus='this.blur()'>03
<OPTION VALUE="4" onFocus='this.blur()'>04
<OPTION VALUE="5" onFocus='this.blur()'>05
<OPTION VALUE="6" onFocus='this.blur()'>06
<OPTION VALUE="7" onFocus='this.blur()'>07
<OPTION VALUE="8" onFocus='this.blur()'>08
<OPTION VALUE="9" onFocus='this.blur()'>09
<OPTION VALUE="10" onFocus='this.blur()'>10
<OPTION VALUE="&lt;10" onFocus='this.blur()'>&gt;10
</SELECT>&nbsp;&nbsp;</TD>




<TD><INPUT NAME="nr_pieces_result" VALUE="1000" SIZE="8" MAXLENGTH="16" TYPE="Text" onFocus='this.blur()'></TD></TR>



<TR><TD><B>Subtotaal:&nbsp;</B></TD>
<Td ALIGN="RIGHT" COLSPAN="2">
<INPUT NAME="subtotaal" VALUE="0.00" SIZE="8" MAXLENGTH="16" TYPE="Text" onFocus='this.blur()'></Td></TR>

<TR><TD>
<B>BTW (17,5%):&nbsp;</B></TD>
<Td ALIGN="RIGHT" COLSPAN="2">
<INPUT NAME="btw" VALUE="0.00" SIZE="8" MAXLENGTH="16" TYPE="Text" onFocus='this.blur()'></TD></TR>

<TR><Td>
<INPUT type="button" value="Totaal" onClick="Totals(this.form)"></TD>
<Td ALIGN="RIGHT" COLSPAN="2">
<INPUT NAME="totaal" VALUE="0.00" SIZE="8" MAXLENGTH="16" TYPE="Text" onFocus='this.blur()'></Td></TR>

</TABLE>

<INPUT type="submit" value="Verzenden">&nbsp;&nbsp;<INPUT type="reset"  value="Wissen">
</FORM></DIV>

The form ends here.......



bendegraafAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

bendegraafAuthor Commented:
Did I mention there's some urgency involved here?

BDG
0
brigmarCommented:
3rd generation browsers (and here I mean IE3) wont recognise an "onchange" event for your select boxes.

Brian
0
brigmarCommented:
Not being dutch, "Geen" is no/none ?

Also.. looking at the number of pieces... what "should" appear in the subtotal column for each value in the select box. Is this an "additional" price for low volume orders ?

If you wish to multiply unit prices by the number of pieces bought, you need to specify exactly how many pieces are to be bought, so I would encourage replacing this field with a text box.

with that information, we could sort this out for you..

Brian
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

brigmarCommented:
BDG,

I have assumed the "pieces" field was the number of PC's to be bought, and is therefore a multiplier. A value other than a number defaults the pieces back to "1".

If this is not the intended functionality, let me know.

On capable browsers, the prices recalculate whenever a field changes. Earlier browsers still require you to press the "Totaal" button.

okay.. cut and paste this..

--- BEGIN ---
<html>
 <head>
<SCRIPT LANGUAGE="JavaScript"><!-- // cloak
// Variables to be changed by webmaster:

function Item( Code, Price ) {
 this.Code  = Code;
 this.Price = Price;
}

var prices    = new Array( new Item( "geen",   "0.00" ),
                           new Item( "hd6_4",  "10.00" ),
                           new Item( "hd9_1",  "20.00" ),
                           new Item( "hd13_6", "30.00" ),
                           new Item( "hd19_2", "40.00" ),
                           new Item( "m64",    "50.00" ),
                           new Item( "m128",   "60.00" ),
                           new Item( "m192",   "70.00" ),
                           new Item( "C400",   "80.00" ),
                           new Item( "C466",   "90.00" ),
                           new Item( "C500",   "100.00" ),
                           new Item( "P450",   "110.00" ),
                           new Item( "m105s",  "120.00" ),
                           new Item( "m105mb", "130.00" ),
                           new Item( "m107s",  "140.00" ),
                           new Item( "m107mp", "150.00" ),
                           new Item( "s7w",    "160.00" ),
                           new Item( "s9w",    "170.00" ),
                           new Item( "s18w",   "180.00" ),
                           new Item( "hs1",    "190.00" ) );

var BTW = 0.175;

function pricefrom( s ) {
 var i=0, code = s.options[s.selectedIndex].value;
 while( i < prices.length ) {
  if( prices[i].Code == code ) return prices[i].Price;
  i++;
 }
 return "0.00";
}

function calculate_totals( f ) {
 f.hard_disk.value = pricefrom( f.s_hard_disk );
 f.memory.value    = pricefrom( f.s_memory );
 f.processor.value = pricefrom( f.s_processor );
 f.screen.value    = pricefrom( f.s_screen );
 f.speakers.value  = pricefrom( f.s_speakers );
 f.headset.value   = pricefrom( f.s_headset );

 var unitprice = parseInt( f.hard_disk.value, 10) +
                 parseInt( f.memory.value, 10) +
                 parseInt( f.processor.value, 10) +
                 parseInt( f.screen.value, 10) +
                 parseInt( f.speakers.value, 10) +
                 parseInt( f.headset.value, 10);

 subtotal = unitprice * f.pieces.value;
 if ( isNaN(subtotal) ) {
  subtotal = unitprice;
  f.pieces.value = "1";
 }

 tax      = subtotal * BTW;
 total    = subtotal + tax;

 f.unitprice.value = round( unitprice, 2 );
 f.subtotal.value  = round( subtotal, 2 );
 f.tax.value       = round( tax, 2 );
 f.total.value     = round( total, 2 );
}


function round(number,X) {
 X = (!X ? 2 : X);
 rc = ''+(Math.round(number*Math.pow(10,X))/Math.pow(10,X));
 if ( rc.indexOf(".") == -1 ) rc += '.00';
 else if ( rc.indexOf(".") == rc.length-2 ) rc += '0';
 if (rc.indexOf(".") == 0) rc = ''+0+rc
 return(rc);
}

// uncloak -->
</SCRIPT>
 </head>
 <body onload="calculate_totals( document.forms[0] );">
  <DIV ALIGN="CENTER">
   <FORM ACTION="stuff to fill out later" METHOD="POST" onsubmit="calculate_totals(this);return true;">
    <TABLE STYLE="font-size: 12px" BORDERCOLOR="#000000" BORDERCOLORDARK="#ffffff" CELLSPACING="2" CELLPADDING="0" BORDER="1">
     <TR><Th COLSPAN="3"><FONT SIZE="+1" COLOR="#000080">Basispakket ASUS COBRA Profile</FONT></Th></TR>
     <TR><TD COLSPAN="3">&nbsp;</TD></TR>
     <TR>
      <TD><FONT COLOR="#000080"><B>PC onderdeel</B></FONT></TD>
      <TD><FONT COLOR="#000080"><B>Maak hier uw keuze voor een meer uitgebreid pakket</B></FONT></TD>
      <TD><FONT COLOR="#000080"><B>Prijs (fl.)</B></FONT></TD>
     </TR>
     <TR><TD COLSPAN="3">&nbsp;</TD></TR>
     <TR>
      <TD>Harde Schijf (GB)</TD>
      <TD>&nbsp;&nbsp;
       <SELECT NAME="s_hard_disk" onchange="calculate_totals(this.form);">
        <OPTION VALUE="hd6_4">6,4
        <OPTION VALUE="hd9_1">9,1
        <OPTION VALUE="hd13_6">13,6
        <OPTION VALUE="hd19_2">19,2
       </SELECT>
      </TD>
      <TD><INPUT NAME="hard_disk" VALUE="10" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)"></TD>
     </TR>
     <TR>
      <TD>Intern geheugen (MB)</TD>
      <TD>&nbsp;&nbsp;
       <SELECT NAME="s_memory" onchange="calculate_totals(this.form);">
        <OPTION VALUE="m64">64
        <OPTION VALUE="m128">128
        <OPTION VALUE="m192">192
       </SELECT>
      </TD>
      <TD><INPUT NAME="memory" VALUE="50" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)"></TD>
     </TR>
     <TR>
      <TD>Processor (MHz)</TD>
      <TD>&nbsp;&nbsp;
       <SELECT NAME="s_processor" onchange="calculate_totals(this.form);">
        <OPTION VALUE="C400">Intel Celeron 400
        <OPTION VALUE="C466">Intel Celeron 466
        <OPTION VALUE="C500">Intel Celeron 500
        <OPTION VALUE="P450">Intel Pentium III 450
       </SELECT>
      </TD>
      <TD><INPUT NAME="processor" VALUE="80" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)"></TD>
     </TR>
     <TR>
      <TD>Monitor (Philips)</TD>
      <TD>&nbsp;&nbsp;
       <SELECT NAME="s_screen" onchange="calculate_totals(this.form);">
        <OPTION VALUE="geen">Geen
        <OPTION VALUE="m105s">105s
        <OPTION VALUE="m105mb">105mb
        <OPTION VALUE="m107s">107s
        <OPTION VALUE="m107mp">107mp
       </SELECT>
      </TD>
      <TD><INPUT NAME="screen" VALUE="0.00" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)"></TD>
     </TR>
     <TR>
      <TD>Geluidsboxen</TD>
      <TD>&nbsp;&nbsp;
       <SELECT NAME="s_speakers" onchange="calculate_totals(this.form);">
        <OPTION VALUE="geen">Geen
        <OPTION VALUE="s7w">2 x 7w RMS 4 &quot;, 120W PMPO, 200Hz - 20kHz
        <OPTION VALUE="s9w">2 x 9w RMS 3 &quot;, 180W PMPO, 40Hz - 20kHz
        <OPTION VALUE="s18w">2 x 18w RMS 1 &quot; &amp; 4 &quot;, 350W PMPO, 20Hz - 20kHz
       </SELECT>
       &nbsp;&nbsp;
      </TD>
      <TD><INPUT NAME="speakers" VALUE="0.00" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)"></TD>
     </TR>
     <TR>
      <TD>Hoofdtelefoon (Philips SBCL300)&nbsp;&nbsp;</TD>
      <TD>&nbsp;&nbsp;
       <SELECT NAME="s_headset" onchange="calculate_totals(this.form);">
        <OPTION VALUE="geen">Geen
        <OPTION VALUE="hs1">Ja
       </SELECT>
      </TD>
      <TD><INPUT NAME="headset" VALUE="0.00" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)"></TD>
     </TR>
     <TR>
      <TD>Totaal aantal PC's</TD>
      <TD>&nbsp;&nbsp;
       <INPUT Type="text" name="pieces" value="1" SIZE="8" MAXLENGTH="16" READONLY onchange="calculate_totals(this.form);">
      </TD>
      <TD><INPUT NAME="unitprice" VALUE="1000" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)"></TD>
     </TR>
     <TR>
      <TD><B>Subtotaal:&nbsp;</B></TD>
      <Td ALIGN="RIGHT" COLSPAN="2">
       <INPUT NAME="subtotal" VALUE="0.00" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)">
      </Td>
     </TR>
     <TR>
      <TD><B>BTW (17,5%):&nbsp;</B></TD>
      <Td ALIGN="RIGHT" COLSPAN="2">
       <INPUT NAME="tax" VALUE="0.00" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onblur="calculate_totals(this.form)">
      </TD>
     </TR>
     <TR>
      <Td><INPUT type="button" value="Totaal" onClick="calculate_totals(this.form)"></TD>
      <Td ALIGN="RIGHT" COLSPAN="2"><INPUT NAME="total" VALUE="0.00" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)"></Td>
     </TR>
    </TABLE>
    <INPUT type="submit" value="Verzenden">&nbsp;&nbsp;<INPUT type="reset" value="Wissen">
   </FORM>
  </DIV>
 </body>
</html>
--- END ---

The prices array contains your price list. Just make sure that the VALUE of an option matches an entry in this price list.

I have changed the multiple onfocus="this.blur()" occurences as NS3 can puke on these.

Instead, I used:
 READONLY onchange="calculate_totals(this.form)"

which makes the field read-only for browsers that understand this (IE4/NS4). Those that dont will re-calculate the form when the field value has been changed.

Also, the form is recalculated prior to submission.



Brian
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
brigmarCommented:
Sorry..
I clicked the wrong button, that was meant to be a comment.

...especially considering I missed your nr_pieces point, and that I mistakenly made the corresponding field read-only !!

Assuming you have a unit price discount of 5% that starts at 11 ( these values can be changed in the script).

This version now brings up an alert to the user whenever the number of pieces changes past the discount point.

cut and paste time again..

--- begin ---
<html>
 <head>
<SCRIPT LANGUAGE="JavaScript"><!-- // cloak
// Variables to be changed by webmaster:

function Item( Code, Price ) {
 this.Code  = Code;
 this.Price = Price;
}

var prices    = new Array( new Item( "geen",   "0.00" ),
                           new Item( "hd6_4",  "10.00" ),
                           new Item( "hd9_1",  "20.00" ),
                           new Item( "hd13_6", "30.00" ),
                           new Item( "hd19_2", "40.00" ),
                           new Item( "m64",    "50.00" ),
                           new Item( "m128",   "60.00" ),
                           new Item( "m192",   "70.00" ),
                           new Item( "C400",   "80.00" ),
                           new Item( "C466",   "90.00" ),
                           new Item( "C500",   "100.00" ),
                           new Item( "P450",   "110.00" ),
                           new Item( "m105s",  "120.00" ),
                           new Item( "m105mb", "130.00" ),
                           new Item( "m107s",  "140.00" ),
                           new Item( "m107mp", "150.00" ),
                           new Item( "s7w",    "160.00" ),
                           new Item( "s9w",    "170.00" ),
                           new Item( "s18w",   "180.00" ),
                           new Item( "hs1",    "190.00" ) );

var BTW = 0.175;

function pricefrom( s ) {
 var i=0, code = s.options[s.selectedIndex].value;
 while( i < prices.length ) {
  if( prices[i].Code == code ) return prices[i].Price;
  i++;
 }
 return "0.00";
}

// e.g. 5% discount for 11 or more units
var pieces_for_discount = 11;
var pieces_discount     = 0.05;
var discount_offered    = false;

function calculate_totals( f ) {
 f.hard_disk.value = pricefrom( f.s_hard_disk );
 f.memory.value    = pricefrom( f.s_memory );
 f.processor.value = pricefrom( f.s_processor );
 f.screen.value    = pricefrom( f.s_screen );
 f.speakers.value  = pricefrom( f.s_speakers );
 f.headset.value   = pricefrom( f.s_headset );

 var unitprice = parseInt( f.hard_disk.value, 10) +
                 parseInt( f.memory.value, 10) +
                 parseInt( f.processor.value, 10) +
                 parseInt( f.screen.value, 10) +
                 parseInt( f.speakers.value, 10) +
                 parseInt( f.headset.value, 10);


 if( isNaN(f.pieces.value) ) {
  f.pieces.value = "1";
 }

 if( discount_offered ) {
   unitprice -= (unitprice * pieces_discount);
 }

 subtotal = unitprice * f.pieces.value;
 tax      = subtotal * BTW;
 total    = subtotal + tax;

 f.unitprice.value = round( unitprice, 2 );
 f.subtotal.value  = round( subtotal, 2 );
 f.tax.value       = round( tax, 2 );
 f.total.value     = round( total, 2 );
}

function checkPieces( o ) {
 var v = parseInt( o.value, 10);
 if(isNaN(v)) v=1;
 if(v<1) v=1;

 var msg1 = "You have ordered "+v+" units.\n";
 var msg2 = "Our volume discount of "+(pieces_discount*100)+"% starts at "+pieces_for_discount+" units.\n";

 if( v<pieces_for_discount && discount_offered) {
  alert( msg1 + msg2 + "The volume discount no longer applies to the prices." );
  discount_offered = false;
 }
 else if( v>=pieces_for_discount && !discount_offered) {
  alert( msg1 + msg2 + "The volume discount now applies to the prices." );
  discount_offered = true;
 }

 o.value = v;
}

function round(number,X) {
 X = (!X ? 2 : X);
 rc = ''+(Math.round(number*Math.pow(10,X))/Math.pow(10,X));
 if ( rc.indexOf(".") == -1 ) rc += '.00';
 else if ( rc.indexOf(".") == rc.length-2 ) rc += '0';
 if (rc.indexOf(".") == 0) rc = ''+0+rc
 return(rc);
}

// uncloak -->
</SCRIPT>
 </head>
 <body onload="calculate_totals( document.forms[0] );">
  <DIV ALIGN="CENTER">
   <FORM ACTION="stuff to fill out later" METHOD="POST" onsubmit="calculate_totals(this);return true;">
    <TABLE STYLE="font-size: 12px" BORDERCOLOR="#000000" BORDERCOLORDARK="#ffffff" CELLSPACING="2" CELLPADDING="0" BORDER="1">
     <TR><Th COLSPAN="3"><FONT SIZE="+1" COLOR="#000080">Basispakket ASUS COBRA Profile</FONT></Th></TR>
     <TR><TD COLSPAN="3">&nbsp;</TD></TR>
     <TR>
      <TD><FONT COLOR="#000080"><B>PC onderdeel</B></FONT></TD>
      <TD><FONT COLOR="#000080"><B>Maak hier uw keuze voor een meer uitgebreid pakket</B></FONT></TD>
      <TD><FONT COLOR="#000080"><B>Prijs (fl.)</B></FONT></TD>
     </TR>
     <TR><TD COLSPAN="3">&nbsp;</TD></TR>
     <TR>
      <TD>Harde Schijf (GB)</TD>
      <TD>&nbsp;&nbsp;
       <SELECT NAME="s_hard_disk" onchange="calculate_totals(this.form);">
        <OPTION VALUE="hd6_4">6,4
        <OPTION VALUE="hd9_1">9,1
        <OPTION VALUE="hd13_6">13,6
        <OPTION VALUE="hd19_2">19,2
       </SELECT>
      </TD>
      <TD><INPUT NAME="hard_disk" VALUE="10" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)"></TD>
     </TR>
     <TR>
      <TD>Intern geheugen (MB)</TD>
      <TD>&nbsp;&nbsp;
       <SELECT NAME="s_memory" onchange="calculate_totals(this.form);">
        <OPTION VALUE="m64">64
        <OPTION VALUE="m128">128
        <OPTION VALUE="m192">192
       </SELECT>
      </TD>
      <TD><INPUT NAME="memory" VALUE="50" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)"></TD>
     </TR>
     <TR>
      <TD>Processor (MHz)</TD>
      <TD>&nbsp;&nbsp;
       <SELECT NAME="s_processor" onchange="calculate_totals(this.form);">
        <OPTION VALUE="C400">Intel Celeron 400
        <OPTION VALUE="C466">Intel Celeron 466
        <OPTION VALUE="C500">Intel Celeron 500
        <OPTION VALUE="P450">Intel Pentium III 450
       </SELECT>
      </TD>
      <TD><INPUT NAME="processor" VALUE="80" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)"></TD>
     </TR>
     <TR>
      <TD>Monitor (Philips)</TD>
      <TD>&nbsp;&nbsp;
       <SELECT NAME="s_screen" onchange="calculate_totals(this.form);">
        <OPTION VALUE="geen">Geen
        <OPTION VALUE="m105s">105s
        <OPTION VALUE="m105mb">105mb
        <OPTION VALUE="m107s">107s
        <OPTION VALUE="m107mp">107mp
       </SELECT>
      </TD>
      <TD><INPUT NAME="screen" VALUE="0.00" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)"></TD>
     </TR>
     <TR>
      <TD>Geluidsboxen</TD>
      <TD>&nbsp;&nbsp;
       <SELECT NAME="s_speakers" onchange="calculate_totals(this.form);">
        <OPTION VALUE="geen">Geen
        <OPTION VALUE="s7w">2 x 7w RMS 4 &quot;, 120W PMPO, 200Hz - 20kHz
        <OPTION VALUE="s9w">2 x 9w RMS 3 &quot;, 180W PMPO, 40Hz - 20kHz
        <OPTION VALUE="s18w">2 x 18w RMS 1 &quot; &amp; 4 &quot;, 350W PMPO, 20Hz - 20kHz
       </SELECT>
       &nbsp;&nbsp;
      </TD>
      <TD><INPUT NAME="speakers" VALUE="0.00" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)"></TD>
     </TR>
     <TR>
      <TD>Hoofdtelefoon (Philips SBCL300)&nbsp;&nbsp;</TD>
      <TD>&nbsp;&nbsp;
       <SELECT NAME="s_headset" onchange="calculate_totals(this.form);">
        <OPTION VALUE="geen">Geen
        <OPTION VALUE="hs1">Ja
       </SELECT>
      </TD>
      <TD><INPUT NAME="headset" VALUE="0.00" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)"></TD>
     </TR>
     <TR>
      <TD>Totaal aantal PC's</TD>
      <TD>&nbsp;&nbsp;
       <INPUT Type="text" name="pieces" value="1" SIZE="8" MAXLENGTH="16" onchange="checkPieces(this);calculate_totals(this.form);">
      </TD>
      <TD><INPUT NAME="unitprice" VALUE="1000" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)"></TD>
     </TR>
     <TR>
      <TD><B>Subtotaal:&nbsp;</B></TD>
      <Td ALIGN="RIGHT" COLSPAN="2">
       <INPUT NAME="subtotal" VALUE="0.00" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)">
      </Td>
     </TR>
     <TR>
      <TD><B>BTW (17,5%):&nbsp;</B></TD>
      <Td ALIGN="RIGHT" COLSPAN="2">
       <INPUT NAME="tax" VALUE="0.00" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onblur="calculate_totals(this.form)">
      </TD>
     </TR>
     <TR>
      <Td><INPUT type="button" value="Totaal" onClick="calculate_totals(this.form)"></TD>
      <Td ALIGN="RIGHT" COLSPAN="2"><INPUT NAME="total" VALUE="0.00" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)"></Td>
     </TR>
    </TABLE>
    <INPUT type="submit" value="Verzenden">&nbsp;&nbsp;<INPUT type="reset" value="Wissen">
   </FORM>
  </DIV>
 </body>
</html>
--- end ---


Brian
0
bendegraafAuthor Commented:
Brigmar,

Words fail me!

It is very, very nice. Thanks very much.

For full marks, could I ask for one more little thing?

Because I'm going to be using your script as a basis for this site's other products, perhaps you could add a comment here and there to let me know which of the script items are adjustable and how. This way I could 'paint-by-numbers' and customize it where necessary.

Thanks again. I'm grateful.

BDG

0
brigmarCommented:
BDG,

Comments ahoy...

// The Left column is the Item identifier, the right column is the price

var prices    = new Array( new Item( "geen",   "0.00" ),
                           new Item( "hd6_4",  "10.00" ),
                           new Item( "hd9_1",  "20.00" ),
                           new Item( "hd13_6", "30.00" ),
                           new Item( "hd19_2", "40.00" ),
                           new Item( "m64",    "50.00" ),
                           new Item( "m128",   "60.00" ),
                           new Item( "m192",   "70.00" ),
                           new Item( "C400",   "80.00" ),
                           new Item( "C466",   "90.00" ),
                           new Item( "C500",   "100.00" ),
                           new Item( "P450",   "110.00" ),
                           new Item( "m105s",  "120.00" ),
                           new Item( "m105mb", "130.00" ),
                           new Item( "m107s",  "140.00" ),
                           new Item( "m107mp", "150.00" ),
                           new Item( "s7w",    "160.00" ),
                           new Item( "s9w",    "170.00" ),
                           new Item( "s18w",   "180.00" ),
                           new Item( "hs1",    "190.00" ) );

// Sales Tax
var BTW = 0.175;  // 0.175 = 17.5%

// discount metrics..
var discount_offered    = false;
// e.g. 5% discount for 11 or more units
var pieces_for_discount = 11;
var pieces_discount     = 0.05;


Brian
0
bendegraafAuthor Commented:
Darn, I just missed you by a minute. Can I include this latest bit?


I have discovered a slight anomaly in the script. I don't think I made it clear that the 'pieces' variable is the unit without any of the add-ons. It's the bare-bones PC. I'd like this to be obvious from the form, such that the overall price incorporates both the accumulated cost of the parts selected_as well_ as the cost for just the PC, as indicated by the 'selected' amount of 1000. Could you perhaps correct this using my slightly adapted script and form?

Also (finally ;-) would it be a real chore to include a currency option? From 1st Jan. '99 onwards, we need to quote all prices in guilders _and_ Euros (we're in Holland), I'd like for the form to be comprehensive - if possible. If it is, please apply a conversion rate of  1.5.

For completion's sake, I'll include the form and script as a whole.



<html>
 <head>
<SCRIPT LANGUAGE="JavaScript"><!-- // cloak
// Variables to be changed by webmaster:

function Item( Code, Price ) {
 this.Code  = Code;
 this.Price = Price;
}

var prices    = new Array( new Item( "geen",   "0.00" ),
                           new Item( "hd6_4",  "10.00" ),
                           new Item( "hd9_1",  "20.00" ),
                           new Item( "hd13_6", "30.00" ),
                           new Item( "hd19_2", "40.00" ),
                           new Item( "m64",    "50.00" ),
                           new Item( "m128",   "60.00" ),
                           new Item( "m192",   "70.00" ),
                           new Item( "C400",   "80.00" ),
                           new Item( "C466",   "90.00" ),
                           new Item( "C500",   "100.00" ),
                           new Item( "P450",   "110.00" ),
                           new Item( "m105s",  "120.00" ),
                           new Item( "m105mb", "130.00" ),
                           new Item( "m107s",  "140.00" ),
                           new Item( "m107mp", "150.00" ),
                           new Item( "s7w",    "160.00" ),
                           new Item( "s9w",    "170.00" ),
                           new Item( "s18w",   "180.00" ),
                           new Item( "hs1",    "190.00" ) );

var BTW = 0.175;

function pricefrom( s ) {
 var i=0, code = s.options[s.selectedIndex].value;
 while( i < prices.length ) {
  if( prices[i].Code == code ) return prices[i].Price;
  i++;
 }
 return "0.00";
}

// e.g. 5% discount for 11 or more units
var pieces_for_discount = 11;
var pieces_discount     = 0.05;
var discount_offered    = false;

function calculate_totals( f ) {
 f.hard_disk.value = pricefrom( f.s_hard_disk );
 f.memory.value    = pricefrom( f.s_memory );
 f.processor.value = pricefrom( f.s_processor );
 f.screen.value    = pricefrom( f.s_screen );
 f.speakers.value  = pricefrom( f.s_speakers );
 f.headset.value   = pricefrom( f.s_headset );

 var unitprice = parseInt( f.hard_disk.value, 10) +
                 parseInt( f.memory.value, 10) +
                 parseInt( f.processor.value, 10) +
                 parseInt( f.screen.value, 10) +
                 parseInt( f.speakers.value, 10) +
                 parseInt( f.headset.value, 10);


 if( isNaN(f.pieces.value) ) {
  f.pieces.value = "1";
 }

 if( discount_offered ) {
   unitprice -= (unitprice * pieces_discount);
 }

 subtotal = unitprice * f.pieces.value;
 tax      = subtotal * BTW;
 total    = subtotal + tax;

 f.unitprice.value = round( unitprice, 2 );
 f.subtotal.value  = round( subtotal, 2 );
 f.tax.value       = round( tax, 2 );
 f.total.value     = round( total, 2 );
}

function checkPieces( o ) {
 var v = parseInt( o.value, 10);
 if(isNaN(v)) v=1;
 if(v<1) v=1;

 var msg1 = "You have ordered "+v+" units.\n";
 var msg2 = "Our volume discount of "+(pieces_discount*100)+"% starts at "+pieces_for_discount+" units.\n";

 if( v<pieces_for_discount && discount_offered) {
  alert( msg1 + msg2 + "The volume discount no longer applies to the prices." );
  discount_offered = false;
 }
 else if( v>=pieces_for_discount && !discount_offered) {
  alert( msg1 + msg2 + "The volume discount now applies to the prices." );
  discount_offered = true;
 }

 o.value = v;
}

function round(number,X) {
 X = (!X ? 2 : X);
 rc = ''+(Math.round(number*Math.pow(10,X))/Math.pow(10,X));
 if ( rc.indexOf(".") == -1 ) rc += '.00';
 else if ( rc.indexOf(".") == rc.length-2 ) rc += '0';
 if (rc.indexOf(".") == 0) rc = ''+0+rc
 return(rc);
}

// uncloak -->
</SCRIPT>
 </head>
 <body onload="calculate_totals( document.forms[0] );">
  <DIV ALIGN="CENTER">
   <FORM ACTION="stuff to fill out later" METHOD="POST" onsubmit="calculate_totals(this);return true;">
    <TABLE STYLE="font-size: 12px" BORDERCOLOR="#000000" BORDERCOLORDARK="#ffffff" CELLSPACING="2" CELLPADDING="0" BORDER="1">
     <TR><Th COLSPAN="3"><FONT SIZE="+1" COLOR="#000080">Basispakket ASUS COBRA Profile</FONT></Th></TR>
     <TR><TD COLSPAN="3">&nbsp;</TD></TR>
     <TR>
      <TD><FONT COLOR="#000080"><B>PC onderdeel</B></FONT></TD>
      <TD><FONT COLOR="#000080"><B>Maak hier uw keuze voor een meer uitgebreid pakket</B></FONT></TD>
      <TD><FONT COLOR="#000080"><B>Prijs</B></FONT></TD>
     </TR>

     <TR><TD COLSPAN="3">&nbsp;</TD></TR>

<TR>
      <TD><B>Basispakket</B></TD>
      <TD><B>Zie specificaties</B></TD>
     <TD><INPUT NAME="hard_disk" VALUE="1000" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)"></TD>
     </TR>

    <TR>
      <TD>Harde Schijf (GB)</TD>
      <TD>&nbsp;&nbsp;
       <SELECT NAME="s_hard_disk" onchange="calculate_totals(this.form);">
        <OPTION VALUE="hd6_4">6,4
        <OPTION VALUE="hd9_1">9,1
        <OPTION VALUE="hd13_6">13,6
        <OPTION VALUE="hd19_2">19,2
       </SELECT>
      </TD>
      <TD><INPUT NAME="hard_disk" VALUE="10" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)"></TD>
     </TR>
     <TR>
      <TD>Intern geheugen (MB)</TD>
      <TD>&nbsp;&nbsp;
       <SELECT NAME="s_memory" onchange="calculate_totals(this.form);">
        <OPTION VALUE="m64">64
        <OPTION VALUE="m128">128
        <OPTION VALUE="m192">192
       </SELECT>
      </TD>
      <TD><INPUT NAME="memory" VALUE="50" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)"></TD>
     </TR>
     <TR>
      <TD>Processor (MHz)</TD>
      <TD>&nbsp;&nbsp;
       <SELECT NAME="s_processor" onchange="calculate_totals(this.form);">
        <OPTION VALUE="C400">Intel Celeron 400
        <OPTION VALUE="C466">Intel Celeron 466
        <OPTION VALUE="C500">Intel Celeron 500
        <OPTION VALUE="P450">Intel Pentium III 450
       </SELECT>
      </TD>
      <TD><INPUT NAME="processor" VALUE="80" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)"></TD>
     </TR>
     <TR>
      <TD>Monitor (Philips)</TD>
      <TD>&nbsp;&nbsp;
       <SELECT NAME="s_screen" onchange="calculate_totals(this.form);">
        <OPTION VALUE="geen">Geen
        <OPTION VALUE="m105s">105s
        <OPTION VALUE="m105mb">105mb
        <OPTION VALUE="m107s">107s
        <OPTION VALUE="m107mp">107mp
       </SELECT>
      </TD>
      <TD><INPUT NAME="screen" VALUE="0.00" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)"></TD>
     </TR>
     <TR>
      <TD>Geluidsboxen</TD>
      <TD>&nbsp;&nbsp;
       <SELECT NAME="s_speakers" onchange="calculate_totals(this.form);">
        <OPTION VALUE="geen">Geen
        <OPTION VALUE="s7w">2 x 7w RMS 4 &quot;, 120W PMPO, 200Hz - 20kHz
        <OPTION VALUE="s9w">2 x 9w RMS 3 &quot;, 180W PMPO, 40Hz - 20kHz
        <OPTION VALUE="s18w">2 x 18w RMS 1 &quot; &amp; 4 &quot;, 350W PMPO, 20Hz - 20kHz
       </SELECT>
       &nbsp;&nbsp;
      </TD>
      <TD><INPUT NAME="speakers" VALUE="0.00" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)"></TD>
     </TR>
     <TR>
      <TD>Hoofdtelefoon (Philips SBCL300)&nbsp;&nbsp;</TD>
      <TD>&nbsp;&nbsp;
       <SELECT NAME="s_headset" onchange="calculate_totals(this.form);">
        <OPTION VALUE="geen">Geen
        <OPTION VALUE="hs1">Ja
       </SELECT>
      </TD>
      <TD><INPUT NAME="headset" VALUE="0.00" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)"></TD>
     </TR>
     <TR>
      <TD>Totaal aantal PC's</TD>
      <TD>&nbsp;&nbsp;
       <INPUT Type="text" name="pieces" value="1" SIZE="8" MAXLENGTH="16" onchange="checkPieces(this);calculate_totals(this.form);">
      </TD>
      <TD><INPUT NAME="unitprice" sIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)"></TD>
     </TR>
     <TR>
      <TD><B>Subtotaal:&nbsp;</B></TD>
      <Td ALIGN="RIGHT" COLSPAN="2">
       <INPUT NAME="subtotal" VALUE="0.00" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)">
      </Td>
     </TR>
     <TR>
      <TD><B>BTW (17,5%):&nbsp;</B></TD>
      <Td ALIGN="RIGHT" COLSPAN="2">
       <INPUT NAME="tax" VALUE="0.00" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onblur="calculate_totals(this.form)">
      </TD>
     </TR>
     <TR>
      <Td><INPUT type="button" value="Totaal" onClick="calculate_totals(this.form)">&nbsp;&nbsp;in&nbsp;


 <SELECT NAME="currency" onchange="calculate_totals(this.form);">
        <OPTION SELECTED VALUE="guilders">fl.
        <OPTION VALUE="euro">euro
         </SELECT></TD>
<Td ALIGN="RIGHT" COLSPAN="2"><INPUT NAME="total" VALUE="0.00" SIZE="8" MAXLENGTH="16" TYPE="Text" READONLY onchange="calculate_totals(this.form)"></Td>
     </TR>
    </TABLE> <BR>
    <INPUT type="submit" value="Verzenden">&nbsp;&nbsp;<INPUT type="reset" value="Wissen">
   </FORM>
  </DIV>
 </body>
</html>




Thanks again Brian.

BDG


0
bendegraafAuthor Commented:
Also, you may want to copyright this script, since it's going to reside in a relatively high-profile corporate website.

BDG
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.