?
Solved

Javascript-enable this form please

Posted on 1999-11-21
9
Medium Priority
?
226 Views
Last Modified: 2011-09-20


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.......



0
Comment
Question by:bendegraaf
  • 5
  • 4
9 Comments
 

Author Comment

by:bendegraaf
ID: 2223249
Did I mention there's some urgency involved here?

BDG
0
 
LVL 4

Expert Comment

by:brigmar
ID: 2223291
3rd generation browsers (and here I mean IE3) wont recognise an "onchange" event for your select boxes.

Brian
0
 
LVL 4

Expert Comment

by:brigmar
ID: 2223336
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 new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
LVL 4

Accepted Solution

by:
brigmar earned 2160 total points
ID: 2223423
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
 
LVL 4

Expert Comment

by:brigmar
ID: 2223472
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
 

Author Comment

by:bendegraaf
ID: 2223704
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
 
LVL 4

Expert Comment

by:brigmar
ID: 2224515
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
 

Author Comment

by:bendegraaf
ID: 2224550
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
 

Author Comment

by:bendegraaf
ID: 2224554
Also, you may want to copyright this script, since it's going to reside in a relatively high-profile corporate website.

BDG
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

589 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question