Can't figure out how to add up Checkboxes

F

Fingertouch

Creating a BUNDLE Generator

I have been trying to find some Javascript that would allow me to add
up checkboxes - but for more than 1 group of items. I have found
scripts for doing the auto calculation from checkbox and radioboxes,
but they only work with one group and I wouldn't know how to edit them
to make them work for multiple groups.

Would anyone be able to tell me how I might do the following (See
image below):

In the example below, you'll see two digital camera listings (Canon
Powershot S3 IS, Canon Powershot S5 IS) and next to them three
accessory items. In the light blue boxes below there are the
following fields:

- BUNDLE X TITLE: Field to give this new bundle a name (i.e. Canon
Powershot S3 IS Starter Bundle)
- MAIN ITEM: price taken from the database query
- BUNDLE: price (would be the sum of the checked boxes in group A, or
B, or C)
- COMBINED: price would be the the total of the Main Item's price and
the dynamic Bundle Price
- BUNDLE PRICE: would allow me to actually give the bundle any price I
wanted too.

I want to be able to select which accessories I want in each bundle
(in this example there are three bundle options; A,B,C) and have the
BUNDLE and COMBINED data change to reflect the total price of each.
These can be input boxes - but they aren't in this example.

There may be more than 1 main item on the page, which is why this
example has two camera models. There could be 5 or 6 or 7, so the
script would have to work for these multiple 'groups'

<img src="http://mail.google.com/mail/?
realattid=file0&attid=0.1&disp=inline&view=att&th=1144be4a204c086d">


I would really appreciate any help you could offer.

Thank you,

Ron S.
 
F

Fingertouch

I forgot to attach the HTML.

Here is the graphic link as well:

http://mail.google.com/mail/?
realattid=file0&attid=0.1&disp=inline&view=att&th=1144be4a204c086d


----------------------------------------------------------------
<FORM name="cat1" ACTION="cat_1.cfm?recalc=true&cat3=1" METHOD="POST">
<table cellpadding="0" cellspacing="0" border="0" style="border: 1px
solid black;">
<tr>
<td valign="top" width="270" align="center" style="border-bottom: 2px
solid gray;">
<div style="background: #FFFFFF; color: #000000; font-family: arial,
sans-serif, tahoma; font-size: 25px; font-weight: bold; padding:
10px;" align="center">
<p>Canon Powershot S3 IS Digital Camera</p>

</div>
<input type="hidden" name="1101B001" value="499.99">
</td>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-bottom: 2px solid gray;" valign="top" width="*">
<table cellspacing="0" cellpadding="4" border="0" width="*">
<tr>
<td style="background: yellow; color: #000000; border-left: 1px
solid gray; font-family: arial, sans-serif, tahoma;" align="center"
colspan="2">Bundle Item</td>
</tr>

<tr>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-left: 1px solid gray;" valign="top" height="90" align="center"
colspan="2">
Canon NB4-300 Battery Pack
</td>
</tr>
<tr>
<td style="font-size: 12px; font-family: arial, sans-serif,
tahoma; border-left: 1px solid gray;" valign="top" align="center"
colspan="2">PHOTO</td>
</tr>
<tr>

<td width="80" align="center" style="font-size: 12px; font-family:
arial, sans-serif, tahoma; border-left: 1px solid gray; border-top:
1px solid black;">
Reg Price:<BR>
<strong>$24.00</strong>
</td>
<td width="259" align="center" style="border-left: 1px solid gray;
border-top: 1px solid black;">
Bundle:<BR>
A: <input type="checkbox" class="right" name="NB4300_A"
value="19.99" checked><BR>

B: <input type="checkbox" class="right" name="NB4300_B"
value="19.99" checked><BR>
C: <input type="checkbox" class="right" name="NB4300_C"
value="19.99" checked><BR>
</td>
</tr>
</table>
</td>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-bottom: 2px solid gray;" valign="top" width="*">
<table cellspacing="0" cellpadding="4" border="0" width="*">
<tr>

<td style="background: yellow; color: #000000; border-left: 1px
solid gray; font-family: arial, sans-serif, tahoma;" align="center"
colspan="2">Bundle Item</td>
</tr>
<tr>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-left: 1px solid gray;" valign="top" height="90" align="center"
colspan="2">
Kingston 2GB CompactFlash Memory Card
</td>
</tr>
<tr>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-left: 1px solid gray;" valign="top" align="center"
colspan="2">PHOTO</td>

</tr>
<tr>
<td width="119" align="center" style="font-size: 12px; font-family:
arial, sans-serif, tahoma; border-left: 1px solid gray; border-top:
1px solid black;">
Reg Price:<BR>
<strong>$49.95</strong>
</td>
<td width="217" align="center" style="border-left: 1px solid gray;
border-top: 1px solid black;">
Bundle:<BR>

A: <input type="checkbox" class="right" name="KINGCF2GB_A"
value="49.95" ><BR>
B: <input type="checkbox" class="right" name="KINGCF2GB_B"
value="49.95" checked><BR>
C: <input type="checkbox" class="right" name="KINGCF2GB_C"
value="49.95" checked><BR>
</td>
</tr>
</table>
</td>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-bottom: 2px solid gray;" valign="top" width="*">

<table cellspacing="0" cellpadding="4" border="0" width="*">
<tr>
<td style="background: yellow; color: #000000; border-left: 1px
solid gray; font-family: arial, sans-serif, tahoma;" align="center"
colspan="2">Bundle Item</td>
</tr>
<tr>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-left: 1px solid gray;" valign="top" height="90" align="center"
colspan="2">
Canon PSC-75 Deluxe Soft Case
</td>
</tr>

<tr>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-left: 1px solid gray;" valign="top" align="center"
colspan="2">PHOTO</td>
</tr>
<tr>
<td width="80" align="center" style="font-size: 12px; font-family:
arial, sans-serif, tahoma; border-left: 1px solid gray; border-top:
1px solid black;">Reg Price:<BR>
<strong>$19.95</strong>
</td>

<td width="259" align="center" style="border-left: 1px solid gray;
border-top: 1px solid black;">
Bundle:<BR>
A: <input type="checkbox" class="right" name="PSC75_A"
value="19.99"><BR>
B: <input type="checkbox" class="right" name="PSC75_B"
value="19.99"><BR>
C: <input type="checkbox" class="right" name="PSC75_C"
value="19.99" checked><BR>
</td>
</tr>
</table>

</td>
</tr>
<tr>
<td align="center" style="background: #C1C2E6;" colspan="5">
<table width="100%"><tr>
<td style="font-size: 11px; font-family: arial, helvetica, sans-
serif;">Bundle
A Title:
<input type="text" name="bundletitle" value="" size="35"
maxlength="75"></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Main
Item: <span style="color: #000000; font-weight: bold;">
$349.99</span></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Bundle:
<span style="color: #000000; font-weight: bold;">$24.00</
span></td>

<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Combined:
<span style="color: #000000; font-weight: bold;">
$373.99</span></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Bundle
Price:
<input type="text" name="bundleprice" value="Override"
size="10"></td>
</tr></table>
</td>
</tr>
<tr>
<td align="center" style="background: #C1C2E6;" colspan="5">
<table width="100%"><tr>

<td style="font-size: 11px; font-family: arial, helvetica, sans-
serif;">Bundle
B Title:
<input type="text" name="bundletitle" value="" size="35"
maxlength="75"></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Main
Item: <span style="color: #000000; font-weight: bold;">
$349.99</span></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Bundle:
<span style="color: #000000; font-weight: bold;">$73.95</
span></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Combined:
<span style="color: #000000; font-weight: bold;">
$423.94</span></td>
<td style="font-size: 12px; font-family: arial, helvetica,
sans-serif;">
Bundle Price:
<input type="text" name="bundleprice" value="Override"
size="10"></td>

</tr></table>
</td>
</tr>
<tr>
<td align="center" style="background: #C1C2E6;" colspan="5">
<table width="100%"><tr>
<td style="font-size: 11px; font-family: arial, helvetica, sans-
serif;">Bundle
C Title:
<input type="text" name="bundletitle" value="" size="35"
maxlength="75"></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Main
Item: <span style="color: #000000; font-weight: bold;">
$349.99</span></td>

<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Bundle:
<span style="color: #000000; font-weight: bold;">$93.90</
span></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Combined:
<span style="color: #000000; font-weight: bold;">
$443.89</span></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">
Bundle Price:
<input type="text" name="bundleprice" value="Override"
size="10"></td>
</tr></table>
</td>
</tr>

<tr>
<td align="center" style="background: #3D3F92; color: yellow;
font-size: 12px;" colspan="5">&nbsp;</td>
</tr><tr>
<td align="center" style="background: white; color: yellow; border-
bottom: 1px solid black; border-top: 1px solid black;"
colspan="5">&nbsp;</td>
</tr>
<tr>
<td valign="top" width="270" align="center" style="border-bottom: 2px
solid gray;">
<div style="background: #FFFFFF; color: #000000; font-family: arial,
sans-serif, tahoma; font-size: 25px; font-weight: bold; padding:
10px;" align="center">
<p>Canon Powershot S5 IS Digital Camera</p>
</div>
<input type="hidden" name="2077B001" value="499.99">

</td>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-bottom: 2px solid gray;" valign="top" width="*">
<table cellspacing="0" cellpadding="4" border="0" width="*">
<tr>
<td style="background: yellow; color: #000000; border-left: 1px
solid gray; font-family: arial, sans-serif, tahoma;" align="center"
colspan="2">Bundle Item</td>
</tr>
<tr>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-left: 1px solid gray;" valign="top" height="90" align="center"
colspan="2">
Canon NB4-300 Battery Pack
</td>

</tr>
<tr>
<td style="font-size: 12px; font-family: arial, sans-serif,
tahoma; border-left: 1px solid gray;" valign="top" align="center"
colspan="2">PHOTO</td>
</tr>
<tr>
<td width="80" align="center" style="font-size: 12px; font-family:
arial, sans-serif, tahoma; border-left: 1px solid gray; border-top:
1px solid black;">
Reg Price:<BR>
<strong>$24.00</strong>

</td>
<td width="259" align="center" style="border-left: 1px solid gray;
border-top: 1px solid black;">
Bundle:<BR>
A: <input type="checkbox" class="right" name="NB4300_A"
value="19.99" checked><BR>
B: <input type="checkbox" class="right" name="NB4300_B"
value="19.99" checked><BR>
C: <input type="checkbox" class="right" name="NB4300_C"
value="19.99" checked><BR>
</td>
</tr>

</table>
</td>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-bottom: 2px solid gray;" valign="top" width="*">
<table cellspacing="0" cellpadding="4" border="0" width="*">
<tr>
<td style="background: yellow; color: #000000; border-left: 1px
solid gray; font-family: arial, sans-serif, tahoma;" align="center"
colspan="2">Bundle Item</td>
</tr>
<tr>

<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-left: 1px solid gray;" valign="top" height="90" align="center"
colspan="2">
Kingston 2GB CompactFlash Memory Card
</td>
</tr>
<tr>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-left: 1px solid gray;" valign="top" align="center"
colspan="2">PHOTO</td>
</tr>
<tr>
<td width="119" align="center" style="font-size: 12px; font-family:
arial, sans-serif, tahoma; border-left: 1px solid gray; border-top:
1px solid black;">

Reg Price:<BR>
<strong>$49.95</strong>
</td>
<td width="217" align="center" style="border-left: 1px solid gray;
border-top: 1px solid black;">
Bundle:<BR>
A: <input type="checkbox" class="right" name="KINGCF2GB_A"
value="49.95" ><BR>
B: <input type="checkbox" class="right" name="KINGCF2GB_B"
value="49.95" checked><BR>
C: <input type="checkbox" class="right" name="KINGCF2GB_C"
value="49.95" checked><BR>
</td>

</tr>
</table>
</td>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-bottom: 2px solid gray;" valign="top" width="*">
<table cellspacing="0" cellpadding="4" border="0" width="*">
<tr>
<td style="background: yellow; color: #000000; border-left: 1px
solid gray; font-family: arial, sans-serif, tahoma;" align="center"
colspan="2">Bundle Item</td>
</tr>

<tr>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-left: 1px solid gray;" valign="top" height="90" align="center"
colspan="2">
Canon PSC-75 Deluxe Soft Case
</td>
</tr>
<tr>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-left: 1px solid gray;" valign="top" align="center"
colspan="2">PHOTO</td>
</tr>
<tr>

<td width="80" align="center" style="font-size: 12px; font-family:
arial, sans-serif, tahoma; border-left: 1px solid gray; border-top:
1px solid black;">Reg Price:<BR>
<strong>$19.95</strong>
</td>
<td width="259" align="center" style="border-left: 1px solid gray;
border-top: 1px solid black;">
Bundle:<BR>
A: <input type="checkbox" class="right" name="PSC75_A"
value="19.99"><BR>
B: <input type="checkbox" class="right" name="PSC75_B"
value="19.99"><BR>
C: <input type="checkbox" class="right" name="PSC75_C"
value="19.99" checked><BR>
</td>

</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="background: #C1C2E6;" colspan="5">
<table width="100%"><tr>
<td style="font-size: 11px; font-family: arial, helvetica, sans-
serif;">Bundle
ATitle:
<input type="text" name="bundletitle" value="" size="35"
maxlength="75"></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Main Item: <span style="color: #000000; font-weight: bold;">
$499.99</span></td>

<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Bundle:
<span style="color: #000000; font-weight: bold;">$24.00</
span></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Combined:
<span style="color: #000000; font-weight: bold;">
$523.99</span></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">
Bundle Price:
<input type="text" name="bundleprice" value="Override"
size="10"></td>
</tr></table>
</td>
</tr>

<tr>
<td align="center" style="background: #C1C2E6;" colspan="5">
<table width="100%"><tr>
<td style="font-size: 11px; font-family: arial, helvetica, sans-
serif;">Bundle
B Title:
<input type="text" name="bundletitle" value="" size="35"
maxlength="75"></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Main Item: <span style="color: #000000; font-weight: bold;">
$499.99</span></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Bundle:
<span style="color: #000000; font-weight: bold;">$73.95</
span></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Combined:
<span style="color: #000000; font-weight: bold;">
$573.94</span></td>

<td style="font-size: 12px; font-family: arial, helvetica,
sans-serif;">
Bundle Price:
<input type="text" name="bundleprice" value="Override"
size="10"></td>
</tr></table>
</td>
</tr>
<tr>
<td align="center" style="background: #C1C2E6;" colspan="5">
<table width="100%"><tr>
<td style="font-size: 11px; font-family: arial, helvetica, sans-
serif;">Bundle
C Title:
<input type="text" name="bundletitle" value="" size="35"
maxlength="75"></td>

<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Main Item: <span style="color: #000000; font-weight: bold;">
$499.99</span></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Bundle:
<span style="color: #000000; font-weight: bold;">$93.90</
span></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Combined:
<span style="color: #000000; font-weight: bold;">
$593.89</span></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">
Bundle Price:
<input type="text" name="bundleprice" value="Override"
size="10"></td>
</tr></table>

</td>
</tr>
<tr>
<td align="center" style="background: #3D3F92; color: yellow;
font-size: 12px;" colspan="5">&nbsp;</td>
</tr><tr>
<td align="center" style="background: white; color: yellow; border-
bottom: 1px solid black; border-top: 1px solid black;"
colspan="5">&nbsp;</td>
</tr>


</table>
</form>

----------------------------------------------------------------
 
D

David Mark

I forgot to attach the HTML.

Here is the graphic link as well:

http://mail.google.com/mail/?
realattid=file0&attid=0.1&disp=inline&view=att&th=1144be4a204c086d

----------------------------------------------------------------
Click to expand...

There's rather a lot of HTML (using that term loosely), but no
script. Re-post with the script and a pared down version of the form
that illustrates the problem.
<FORM name="cat1" ACTION="cat_1.cfm?recalc=true&cat3=1" METHOD="POST">
<table cellpadding="0" cellspacing="0" border="0" style="border: 1px
solid black;">
Click to expand...

Don't mix case (use lower-case.) Don't use inline attributes for
presentation (eg border, cellpadding, etc.) In this case, the border
attribute conflicts with the inline style. Don't use inline style
either (use classes.) I would guess this thing is ten times bigger
than it needs to be.
<tr>
Click to expand...

Don't use table rows and columns to group form fields. Use the
FIELDSET element.
<td valign="top" width="270" align="center" style="border-bottom: 2px
solid gray;">
<div style="background: #FFFFFF; color: #000000; font-family: arial,
sans-serif, tahoma; font-size: 25px; font-weight: bold; padding:
10px;" align="center">
Click to expand...

Don't size fonts with pixel units. They don't scale in IE.
<p>Canon Powershot S3 IS Digital Camera</p>
Click to expand...

Is this a paragraph? It looks more like a LEGEND, but it is hard to
tell.
</div>
<input type="hidden" name="1101B001" value="499.99">
</td>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-bottom: 2px solid gray;" valign="top" width="*">
<table cellspacing="0" cellpadding="4" border="0" width="*">
Click to expand...

I am not familiar with width="*". Don't use tables-in-tables. It
makes no sense semantically (in this case) and makes your source
indecipherable.
<tr>
<td style="background: yellow; color: #000000; border-left: 1px
solid gray; font-family: arial, sans-serif, tahoma;" align="center"
colspan="2">Bundle Item</td>
</tr>

<tr>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-left: 1px solid gray;" valign="top" height="90" align="center"
colspan="2">
Canon NB4-300 Battery Pack
</td>
</tr>
<tr>
<td style="font-size: 12px; font-family: arial, sans-serif,
tahoma; border-left: 1px solid gray;" valign="top" align="center"
colspan="2">PHOTO</td>
</tr>
<tr>

<td width="80" align="center" style="font-size: 12px; font-family:
arial, sans-serif, tahoma; border-left: 1px solid gray; border-top:
1px solid black;">
Reg Price:<BR>
<strong>$24.00</strong>
Click to expand...

Are you making a STRONG point about this price or did you just want it
to appear bold? If the latter, use CSS.
</td>
<td width="259" align="center" style="border-left: 1px solid gray;
border-top: 1px solid black;">
Bundle:<BR>
A: <input type="checkbox" class="right" name="NB4300_A"
value="19.99" checked><BR>
Click to expand...

So you do use classes for CSS in some cases, but class="right" makes
no sense. What if you wanted to change the alignment (assuming that
is what this refers to) to left or center in a future version. Are
you going to rename the class and change it in all of your pages?
B: <input type="checkbox" class="right" name="NB4300_B"
value="19.99" checked><BR>
C: <input type="checkbox" class="right" name="NB4300_C"
value="19.99" checked><BR>
Click to expand...

You've used BR's to simulate an ordered list. Use an OL as that is
what it is for.
</td>
</tr>
</table>
</td>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-bottom: 2px solid gray;" valign="top" width="*">
<table cellspacing="0" cellpadding="4" border="0" width="*">
<tr>

<td style="background: yellow; color: #000000; border-left: 1px
solid gray; font-family: arial, sans-serif, tahoma;" align="center"
colspan="2">Bundle Item</td>
</tr>
<tr>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-left: 1px solid gray;" valign="top" height="90" align="center"
colspan="2">
Kingston 2GB CompactFlash Memory Card
</td>
</tr>
<tr>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-left: 1px solid gray;" valign="top" align="center"
colspan="2">PHOTO</td>

</tr>
<tr>
<td width="119" align="center" style="font-size: 12px; font-family:
arial, sans-serif, tahoma; border-left: 1px solid gray; border-top:
1px solid black;">
Reg Price:<BR>
<strong>$49.95</strong>
</td>
<td width="217" align="center" style="border-left: 1px solid gray;
border-top: 1px solid black;">
Bundle:<BR>

A: <input type="checkbox" class="right" name="KINGCF2GB_A"
value="49.95" ><BR>
B: <input type="checkbox" class="right" name="KINGCF2GB_B"
value="49.95" checked><BR>
C: <input type="checkbox" class="right" name="KINGCF2GB_C"
value="49.95" checked><BR>
</td>
</tr>
</table>
</td>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-bottom: 2px solid gray;" valign="top" width="*">

<table cellspacing="0" cellpadding="4" border="0" width="*">
<tr>
<td style="background: yellow; color: #000000; border-left: 1px
solid gray; font-family: arial, sans-serif, tahoma;" align="center"
colspan="2">Bundle Item</td>
</tr>
<tr>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-left: 1px solid gray;" valign="top" height="90" align="center"
colspan="2">
Canon PSC-75 Deluxe Soft Case
</td>
</tr>

<tr>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-left: 1px solid gray;" valign="top" align="center"
colspan="2">PHOTO</td>
</tr>
<tr>
<td width="80" align="center" style="font-size: 12px; font-family:
arial, sans-serif, tahoma; border-left: 1px solid gray; border-top:
1px solid black;">Reg Price:<BR>
<strong>$19.95</strong>
</td>

<td width="259" align="center" style="border-left: 1px solid gray;
border-top: 1px solid black;">
Bundle:<BR>
A: <input type="checkbox" class="right" name="PSC75_A"
value="19.99"><BR>
B: <input type="checkbox" class="right" name="PSC75_B"
value="19.99"><BR>
C: <input type="checkbox" class="right" name="PSC75_C"
value="19.99" checked><BR>
</td>
</tr>
</table>

</td>
</tr>
<tr>
<td align="center" style="background: #C1C2E6;" colspan="5">
<table width="100%"><tr>
<td style="font-size: 11px; font-family: arial, helvetica, sans-
serif;">Bundle
Click to expand...

Most users will see arial fonts throughout, but those without that
font will see a mix of tahoma and helvetica. I assume that isn't by
design. Once again, CSS classes would help out here.
A Title:
<input type="text" name="bundletitle" value="" size="35"
maxlength="75"></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Main
Item: <span style="color: #000000; font-weight: bold;">
$349.99</span></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Bundle:
<span style="color: #000000; font-weight: bold;">$24.00</
span></td>

<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Combined:
<span style="color: #000000; font-weight: bold;">
$373.99</span></td>
Click to expand...

No STRONG for this one? How many different authors collaborated on
this form?
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Bundle
Price:
<input type="text" name="bundleprice" value="Override"
size="10"></td>
</tr></table>
</td>
</tr>
<tr>
<td align="center" style="background: #C1C2E6;" colspan="5">
<table width="100%"><tr>

<td style="font-size: 11px; font-family: arial, helvetica, sans-
serif;">Bundle
B Title:
<input type="text" name="bundletitle" value="" size="35"
maxlength="75"></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Main
Item: <span style="color: #000000; font-weight: bold;">
$349.99</span></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Bundle:
<span style="color: #000000; font-weight: bold;">$73.95</
span></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Combined:
<span style="color: #000000; font-weight: bold;">
$423.94</span></td>
<td style="font-size: 12px; font-family: arial, helvetica,
sans-serif;">
Bundle Price:
<input type="text" name="bundleprice" value="Override"
size="10"></td>

</tr></table>
</td>
</tr>
<tr>
<td align="center" style="background: #C1C2E6;" colspan="5">
<table width="100%"><tr>
<td style="font-size: 11px; font-family: arial, helvetica, sans-
serif;">Bundle
C Title:
<input type="text" name="bundletitle" value="" size="35"
maxlength="75"></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Main
Item: <span style="color: #000000; font-weight: bold;">
$349.99</span></td>
Click to expand...

No background color? What if the user's default is black?
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Bundle:
<span style="color: #000000; font-weight: bold;">$93.90</
span></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Combined:
<span style="color: #000000; font-weight: bold;">
$443.89</span></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">
Bundle Price:
<input type="text" name="bundleprice" value="Override"
size="10"></td>
</tr></table>
</td>
</tr>

<tr>
<td align="center" style="background: #3D3F92; color: yellow;
font-size: 12px;" colspan="5">&nbsp;</td>
</tr><tr>
<td align="center" style="background: white; color: yellow; border-
bottom: 1px solid black; border-top: 1px solid black;"
colspan="5">&nbsp;</td>
Click to expand...

Tables-in-tables-with-spacers are as low as you can get. What would a
screen reader or text-only browser make of this mess?
</tr>
<tr>
<td valign="top" width="270" align="center" style="border-bottom: 2px
solid gray;">
<div style="background: #FFFFFF; color: #000000; font-family: arial,
sans-serif, tahoma; font-size: 25px; font-weight: bold; padding:
10px;" align="center">
Click to expand...

Back to tahoma.
<p>Canon Powershot S5 IS Digital Camera</p>
</div>
<input type="hidden" name="2077B001" value="499.99">

</td>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-bottom: 2px solid gray;" valign="top" width="*">
<table cellspacing="0" cellpadding="4" border="0" width="*">
<tr>
<td style="background: yellow; color: #000000; border-left: 1px
solid gray; font-family: arial, sans-serif, tahoma;" align="center"
colspan="2">Bundle Item</td>
</tr>
<tr>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-left: 1px solid gray;" valign="top" height="90" align="center"
colspan="2">
Canon NB4-300 Battery Pack
</td>

</tr>
<tr>
<td style="font-size: 12px; font-family: arial, sans-serif,
tahoma; border-left: 1px solid gray;" valign="top" align="center"
colspan="2">PHOTO</td>
</tr>
<tr>
<td width="80" align="center" style="font-size: 12px; font-family:
arial, sans-serif, tahoma; border-left: 1px solid gray; border-top:
1px solid black;">
Reg Price:<BR>
<strong>$24.00</strong>

</td>
<td width="259" align="center" style="border-left: 1px solid gray;
border-top: 1px solid black;">
Bundle:<BR>
A: <input type="checkbox" class="right" name="NB4300_A"
value="19.99" checked><BR>
B: <input type="checkbox" class="right" name="NB4300_B"
value="19.99" checked><BR>
C: <input type="checkbox" class="right" name="NB4300_C"
value="19.99" checked><BR>
</td>
</tr>

</table>
</td>
Click to expand...

All of these extraneous table-related tags are a maintenance
nightmare, not to mention a waste of bandwidth.
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-bottom: 2px solid gray;" valign="top" width="*">
<table cellspacing="0" cellpadding="4" border="0" width="*">
<tr>
<td style="background: yellow; color: #000000; border-left: 1px
solid gray; font-family: arial, sans-serif, tahoma;" align="center"
colspan="2">Bundle Item</td>
</tr>
<tr>

<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-left: 1px solid gray;" valign="top" height="90" align="center"
colspan="2">
Kingston 2GB CompactFlash Memory Card
</td>
</tr>
<tr>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-left: 1px solid gray;" valign="top" align="center"
colspan="2">PHOTO</td>
</tr>
<tr>
<td width="119" align="center" style="font-size: 12px; font-family:
arial, sans-serif, tahoma; border-left: 1px solid gray; border-top:
1px solid black;">

Reg Price:<BR>
<strong>$49.95</strong>
</td>
<td width="217" align="center" style="border-left: 1px solid gray;
border-top: 1px solid black;">
Bundle:<BR>
A: <input type="checkbox" class="right" name="KINGCF2GB_A"
value="49.95" ><BR>
B: <input type="checkbox" class="right" name="KINGCF2GB_B"
value="49.95" checked><BR>
C: <input type="checkbox" class="right" name="KINGCF2GB_C"
value="49.95" checked><BR>
</td>

</tr>
</table>
</td>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-bottom: 2px solid gray;" valign="top" width="*">
<table cellspacing="0" cellpadding="4" border="0" width="*">
<tr>
<td style="background: yellow; color: #000000; border-left: 1px
solid gray; font-family: arial, sans-serif, tahoma;" align="center"
colspan="2">Bundle Item</td>
</tr>

<tr>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-left: 1px solid gray;" valign="top" height="90" align="center"
colspan="2">
Canon PSC-75 Deluxe Soft Case
</td>
</tr>
<tr>
<td style="font-size: 12px; font-family: arial, sans-serif, tahoma;
border-left: 1px solid gray;" valign="top" align="center"
colspan="2">PHOTO</td>
</tr>
<tr>

<td width="80" align="center" style="font-size: 12px; font-family:
arial, sans-serif, tahoma; border-left: 1px solid gray; border-top:
1px solid black;">Reg Price:<BR>
<strong>$19.95</strong>
Click to expand...

Back to STRONG.
</td>
<td width="259" align="center" style="border-left: 1px solid gray;
border-top: 1px solid black;">
Bundle:<BR>
A: <input type="checkbox" class="right" name="PSC75_A"
value="19.99"><BR>
B: <input type="checkbox" class="right" name="PSC75_B"
value="19.99"><BR>
C: <input type="checkbox" class="right" name="PSC75_C"
value="19.99" checked><BR>
</td>

</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="background: #C1C2E6;" colspan="5">
<table width="100%"><tr>
<td style="font-size: 11px; font-family: arial, helvetica, sans-
serif;">Bundle
Click to expand...

Back to helvetica.
ATitle:
<input type="text" name="bundletitle" value="" size="35"
maxlength="75"></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Main Item: <span style="color: #000000; font-weight: bold;">
$499.99</span></td>

<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Bundle:
<span style="color: #000000; font-weight: bold;">$24.00</
span></td>
Click to expand...
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Combined:
<span style="color: #000000; font-weight: bold;">
$523.99</span></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">
Bundle Price:
<input type="text" name="bundleprice" value="Override"
size="10"></td>
</tr></table>
</td>
</tr>

<tr>
<td align="center" style="background: #C1C2E6;" colspan="5">
<table width="100%"><tr>
<td style="font-size: 11px; font-family: arial, helvetica, sans-
serif;">Bundle
B Title:
<input type="text" name="bundletitle" value="" size="35"
maxlength="75"></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Main Item: <span style="color: #000000; font-weight: bold;">
$499.99</span></td>
Click to expand...

Back to CSS for boldface.
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Bundle:
<span style="color: #000000; font-weight: bold;">$73.95</
span></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Combined:
<span style="color: #000000; font-weight: bold;">
$573.94</span></td>

<td style="font-size: 12px; font-family: arial, helvetica,
sans-serif;">
Bundle Price:
<input type="text" name="bundleprice" value="Override"
size="10"></td>
</tr></table>
</td>
</tr>
<tr>
<td align="center" style="background: #C1C2E6;" colspan="5">
<table width="100%"><tr>
<td style="font-size: 11px; font-family: arial, helvetica, sans-
serif;">Bundle
C Title:
<input type="text" name="bundletitle" value="" size="35"
maxlength="75"></td>

<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Main Item: <span style="color: #000000; font-weight: bold;">
$499.99</span></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Bundle:
<span style="color: #000000; font-weight: bold;">$93.90</
span></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">Combined:
<span style="color: #000000; font-weight: bold;">
$593.89</span></td>
<td style="font-size: 12px; font-family: arial, helvetica, sans-
serif;">
Bundle Price:
<input type="text" name="bundleprice" value="Override"
size="10"></td>
</tr></table>

</td>
</tr>
<tr>
<td align="center" style="background: #3D3F92; color: yellow;
font-size: 12px;" colspan="5">&nbsp;</td>
</tr><tr>
<td align="center" style="background: white; color: yellow; border-
bottom: 1px solid black; border-top: 1px solid black;"
colspan="5">&nbsp;</td>
</tr>

</table>
</form>
Click to expand...

I thought that would never end. My advice to you is to rewrite this
properly as a static form before concerning yourself with scripted
enhancements.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to add dropdown selected data to table using jquery 2
How to add augmented reality content to a website? 3
Unable to figure out ' invalid matrix input type -- ', u'1' 1
ASP .NET Beginner trying to figure out <asp:Repeater and checkboxes 2
Can't Figure Out How To Sort On Bind 2
GPGME gem - cannot figure out how to decrypt data 8
Learning JS, trying to figure out createelement 3
Compiler returns error, can't figure out why 6

Members online

No members online now.
Total: 60 (members: 1, guests: 59)
Robots: 461

Forum statistics

Threads
473,995
Messages
2,570,230
Members
46,816
Latest member
SapanaCarpetStudio

Latest Threads

Top