Marrying multiple checkboxes 1

[rshandy]

Hi:

Rookie in need of help.

I'm trying to call the same function from an onclick of multiple checkboxes so it can add the value to the total when checked (and a descriptive line) and remove it from the total when unchecked.

the start of the function looks like this:

function changeTotal(checkbox,index) {
var text1 = 55.99;
var text2 = 0;
var text3 = 7765.09;
for (i=1; i <=11; i++) {
index=i;
if(index = 1) {
var prodtotal1 = (checkbox.checked,1) ? text1 : text2;
}
if (index = 2) {

var prodtotal2 = (checkbox.checked,2) ? text3 : text2;
}

var prodtotal3 = prodtotal1 + prodtotal2;

if (document.getElementById) {



document.getElementById(12).innerHTML = prodtotal3;
}

else if (document.all) {


document.all[12].innerHTML = prodtotal3;

}

else if (document.layers){


document.layers["ns"+12].document.write(prodtotal3);

document.layers["ns"+12].document.close();


}
}
}


the code for 2 checkboxes in the body looks like this:

<input type="checkbox" name="checkbox" value="checkbox" onclick="changeTotal(this,1);">

<input type="checkbox" name="checkbox" value="checkbox" onclick="changeTotal(this,2);">


I was able to make it work without the index variable and using on 1 checkbox, but not sure how to incorporate 2 or more checkboxes.

Your help would be greatly appreciated.

Thanks,

Rich

 

[trollacious]

First, don't name your checkboxes "checkbox". Second, put the value in the value for all the checkboxes.

To total values, loop through all the checkboxes in a group (name them similarly, and check for the similarity in name) and total the values of those that are checked.

Lee

 

[rshandy]

Thanks Lee,

Could you give me an example? Not sure how to properly structure the names and loop through the values of using similar name checkboxes

 

[trollacious]

This should work, though you may have to modify it to fit the details you didn't show in your code.

function changeTotal()
{
var el=document.forms['your form name here'].elements;
var total = 0;

for (ei=0;ei<el.length;ei++)
  {
  if (el[ei].name.indexOf('chk')==0 && el[ei].type=='checkbox')
    {
    if (el[ei].checked) total += el[ei].value * 1;
    }
  }
document.getElementById('your div id here').innerHTML = total;
}

<form name="your form name here">
<input type="checkbox" name="chk1" value="1" onclick="changeTotal();">

<input type="checkbox" name="chk2" value="2" onclick="changeTotal();">
</form>
<div id="your div id here"></div>

Don't start an element or id with a number, either.

When you want help here, don't use contrived examples.

Show us your REAL code and include the parts that are related to the scripting. You didn't show anything about where you write the total, so I just made up something reasonable that will work.

Lee

 

[rshandy]

Lee,

Thank you so much for your help. I didn't mean to be contrived, it was just the beginning of some code that I have to put inside a more complicated (probably convoluted) form code, which I thought would confuse things more.

I going to work through the entire form code and integrate your solution and see if all works out.

thanks again.

Rich

 

[rshandy]

Hi again :

The code snippet above worked! I also add another function; namely displaying some text and the value of each checkbox.

For some reason, in Netscape it works fine as the 3 id's/layers update as you check and uncheck but in IE, only the variable "total" updates, the other 2, "floorpan" and "dividerpane" do not update.

Here's what the code looks like:

function changeTotal() {
var addon=document.forms['CheckingOut'].elements;
var total = 0;
var floorpan = "yo, over here";
var dividerpanel = "nothing to report";

for (elindex=0; elindex<addon.length;elindex++) {

if (addon[elindex].name.indexOf('chk')==0 && addon[elindex].type=='checkbox')
{
if (addon[elindex].checked) total += addon[elindex].value * 1;

if (addon[elindex].checked && addon[elindex].name=='chk1') {
dividerpanel = "<font color=\"#3300FF\" face=\"Arial, Helvetica, sans-serif\" size=\"2\">Divider Panel<img src=\"/images/transparent.gif\" width=\"10\" height=\"1\">$ " + addon[elindex].value +"</font>";
}

if (addon[elindex].checked && addon[elindex].name=='chk2') {
floorpan = "<font color=\"#3300FF\" face=\"Arial, Helvetica, sans-serif\" size=\"2\">Floor Pan<img src=\"/images/transparent.gif\" width=\"29\" height=\"1\">$ " + addon[elindex].value +"</font>";
}

}


}
document.getElementById('12').innerHTML = total;
document.getElementById('13').innerHTML = dividerpanel;
document.getElementById('14').innerHTML = floorpan;
}

Any suggestions of what's wrong???

Thanks again,

Rich

 

[trollacious]

Why are you using numbers to start the names of elements or IDs? You're going to end up with problems doing that.

Do you actually HAVE a div or span or something else with the id 13 and 14? You didn't show that part of your code, so I can't tell what you have.

Since the code checks to see if the checkbox is checked in the if statement, you don't need to do that again:


if (addon[elindex].name=='chk1')
{
dividerpanel = '<font color="#3300FF" face="Arial, Helvetica, sans-serif" size="2">Divider Panel<img src="/images/transparent.gif" width="10" height="1">$ ' + addon[elindex].value + '</font>';
}

if (addon[elindex].name=='chk2')
{
floorpan = '<font color="#3300FF" face="Arial, Helvetica, sans-serif" size="2">Floor Pan<img src="/images/transparent.gif" width="29" height="1">$ ' + addon[elindex].value + '</font>';
}


Lee

 

[rshandy]

Sorry about that.

here's the code for the div:

<TR>
<TD>
<layer id="ns13">
<div id="13"></div>
</layer>
</TD>
</TR>
<TR>
<TD COLSPAN="2"><img src="images/transparent.gif" width="1" height="5"> </TD>
</TR>

<TR>
<TD COLSPAN="2"><layer id="ns14">
<div id="14"></div>
</layer>
</TD>
</TR>
<TR>
<TD COLSPAN="2"><img src="images/transparent.gif" width="1" height="5"> </TD>
</TR>
<TR>
<TD COLSPAN="2">
<layer id="ns12">
<div id="12"></div>
</layer>
</TD>
</TR>


Why are numbers bad for ids? I have another function that I loop through all the div/layers but I guess I can prefix them with a name.

In your example, you only use the div tag. In the other function I have, the only way I could get the replacement of data to work was to use the div and layer tag in concert.

Here's the other function call (when I fix the above problem I'm going to marry the 2 functions) Its pretty ugly but it seems work ok:

here's the code in the header:

function productselect1(b1,b2,b3,b4,b5,b6,b7,sku) {

document.mw_1622_sw.border=(b1);

document.mw_1624_sw.border=(b2);

document.mw_1630_sw.border=(b3);

document.mw_1636_sw.border=(b4);

document.mw_1642_sw.border=(b5);

document.mw_1648_sw.border=(b6);

var firstDim= 11;

var secondDim = 11;

var prodtotal = 0;

var prodchar = new Array(firstDim) ;
var justprice = new Array(firstDim) ;




for (i=1; i <=11; i++) {

prodchar = new Array(secondDim) ;
justprice = new Array(secondDim) ;

}



// ... set array values outside the loop here ...



prodchar[1][1] = "$ 100.00";

prodchar[1][2] = "$ 200.00";

prodchar[1][3] = "$ 175.00";

prodchar[1][4] = "$ 175.00";

prodchar[1][5] = "$ 575.00";

prodchar[1][6] = "$ 135.00";

prodchar[1][7] = "--------";

prodchar[1][8] = "$ 227.00";

prodchar[1][9] = "$ 425.00";

justprice[1][1] = "$ 375.00";

justprice[1][2] = "$ 375.00";

justprice[1][3] = "$ 875.00";

justprice[1][4] = "$ 375.00";

justprice[1][5] = "$ 145.00";

justprice[1][6] = "$ 425.00";

justprice[1][7] = "----------";

justprice[1][8] = "$ 227.00";

justprice[1][9] = "$ 425.00";

prodchar[2][1] = "$ 375.00";

prodchar[2][2] = "$ 375.00";

prodchar[2][3] = "$ 375.00";

prodchar[2][4] = "$ 375.00";

prodchar[2][5] = "$ 375.00";

prodchar[2][6] = "$ 375.00";

prodchar[2][7] = "-----";

prodchar[2][8] = "$ 375.00";

prodchar[2][9] = "$ 375.00";

prodchar[3][1] = "<input type='text' name='QUANTITY99901BB' size='3' value='1'><input type=hidden name='product99901BB' value='99901BB'>";

prodchar[3][2] = "<input type='text' name='QUANTITY99902BB' size='3' value='1'><input type=hidden name='product99902BB' value='99902BB'>";

prodchar[3][3] = "<input type='text' name='QUANTITY99903BB' size='3' value='1'><input type=hidden name='product99903BB' value='99903BB'>";

prodchar[3][4] = "<input type='text' name='QUANTITY99904BB' size='3' value='1'><input type=hidden name='product99904BB' value='99904BB'>";

prodchar[3][5] = "<input type='text' name='QUANTITY99905BB' size='3' value='1'><input type=hidden name='product99905BB' value='99905BB'>";

prodchar[3][6] = "<input type='text' name='QUANTITY99906BB' size='3' value='1'><input type=hidden name='product99906BB' value='99906BB'>";

prodchar[3][7] = "-----";

prodchar[3][8] = "<input type='text' name='QUANTITY99901BB' size='3' value='1'><input type=hidden name='product99901BB' value='99901BB'>";

prodchar[3][9] = "<input type='text' name='QUANTITY99901BB' size='3' value='1'><input type=hidden name='product99901BB' value='99901BB'>";

prodchar[4][1] = "<input type=\"checkbox\" name=\"chk2\" value=\"45.09\" onclick=\"changeTotal();\"> Add Floor Pan";

prodchar[4][2] = "<input type=\"checkbox\" name=\"chk2\" value=\"45.09\" onclick=\"changeTotal();\"> Add Floor Pan";

prodchar[4][3] = "<font face=\"Arial, Helvetica, sans-serif\" size=\"1\">Floor Pan Included</font>";

prodchar[4][4] = "<input type=\"checkbox\" name=\"chk2\" value=\"45.09\" onclick=\"changeTotal();\"> Add Floor Pan";

prodchar[4][5] = "<font face=\"Arial, Helvetica, sans-serif\" size=\"1\">Floor Pan Included</font>";

prodchar[4][6] = "<input type=\"checkbox\" name=\"chk2\" value=\"45.09\" onclick=\"changeTotal();\"> Add Floor Pan";

prodchar[4][7] = "-----";

prodchar[4][8] = "<font face=\"Arial, Helvetica, sans-serif\" size=\"1\">Floor Pan Included</font>";

prodchar[4][9] = "<font face=\"Arial, Helvetica, sans-serif\" size=\"1\">Floor Pan Included</font>";

prodchar[5][1] = "Model 1622";

prodchar[5][2] = "Model 1624";

prodchar[5][3] = "Model 1630";

prodchar[5][4] = "Model 1636";

prodchar[5][5] = "Model 1642";

prodchar[5][6] = "Model 1648";

prodchar[5][7] = "";

prodchar[5][8] = "Model 1622-2";

prodchar[5][9] = "Model 1622-3";

prodchar[6][1] = "<a onClick=\"MM_openBrWindow(\'mthn_ac_x.html\',\'\',\'scrollbars=no, width=340, height=460\');\"><img src=images/peek.gif border=0></a><a onClick=\"MM_openBrWindow(\'TWR_2750_ac_x.html\',\'\',\'scrollbars=no, width=340, height=460\');\"><font face=\"Arial, Helvetica, sans-serif\" size=\"1\"><b>Click here for larger image</b></font></a>";

prodchar[6][2] = "<a onClick=\"MM_openBrWindow(\'TWR_2750_fp_x.html\',\'\',\'scrollbars=no, width=340, height=460\');\"><img src=images/peek.gif border=0></a><a onClick=\"MM_openBrWindow(\'TWR_2750_fp_x.html\',\'\',\'scrollbars=no, width=340, height=460\');\"><font face=\"Arial, Helvetica, sans-serif\" size=\"1\"><b>Click here for larger image</b></font></a>";

prodchar[6][3] = "<a onClick=\"MM_openBrWindow(\'TWR_2750_cb_x.html\',\'\',\'scrollbars=no, width=340, height=460\');\"><img src=images/peek.gif border=0></a><a onClick=\"MM_openBrWindow(\'TWR_2750_cb_x.html\',\'\',\'scrollbars=no, width=340, height=460\');\"><font face=\"Arial, Helvetica, sans-serif\" size=\"1\"><b>Click here for larger image</b></font></a>";

prodchar[6][4] = "<a onClick=\"MM_openBrWindow(\'TWR_2750_nb_x.html\',\'\',\'scrollbars=no, width=340, height=460\');\"><img src=images/peek.gif border=0></a><a onClick=\"MM_openBrWindow(\'TWR_2750_nb_x.html\',\'\',\'scrollbars=no, width=340, height=460\');\"><font face=\"Arial, Helvetica, sans-serif\" size=\"1\"><b>Click here for larger image</b></font></a>";

prodchar[6][5] = "<a onClick=\"MM_openBrWindow(\'TWR_2750_sm_x.html\',\'\',\'scrollbars=no, width=340, height=460\');\"><img src=images/peek.gif border=0></a><a onClick=\"MM_openBrWindow(\'TWR_2750_sm_x.html\',\'\',\'scrollbars=no, width=340, height=460\');\"><font face=\"Arial, Helvetica, sans-serif\" size=\"1\"><b>Click here for larger image</b></font></a>";

prodchar[6][6] = "<a onClick=\"MM_openBrWindow(\'TWR_2750_ht_x.html\',\'\',\'scrollbars=no, width=340, height=460\');\"><img src=images/peek.gif border=0></a><a onClick=\"MM_openBrWindow(\'TWR_2750_ht_x.html\',\'\',\'scrollbars=no, width=340, height=460\');\"><font face=\"Arial, Helvetica, sans-serif\" size=\"1\"><b>Click here for larger image</b></font></a>";

prodchar[6][7] = "<a onClick=\"MM_openBrWindow(\'TWR_2750_mt_x.html\',\'\',\'scrollbars=no, width=340, height=460\');\"><img src=images/peek.gif border=0></a><a onClick=\"MM_openBrWindow(\'TWR_2750_mt_x.html\',\'\',\'scrollbars=no, width=340, height=460\');\"><font face=\"Arial, Helvetica, sans-serif\" size=\"1\"><b>Click here for larger image</b></font></a>";

prodchar[6][8] = "<a onClick=\"MM_openBrWindow(\'TWR_2750_ac_x.html\',\'\',\'scrollbars=no, width=340, height=460\');\"><img src=images/peek.gif border=0></a><a onClick=\"MM_openBrWindow(\'TWR_2750_ac_x.html\',\'\',\'scrollbars=no, width=340, height=460\');\"><font face=\"Arial, Helvetica, sans-serif\" size=\"1\"><b>Click here for larger image</b></font></a>";

prodchar[6][9] = "<a onClick=\"MM_openBrWindow(\'TWR_2750_ac_x.html\',\'\',\'scrollbars=no, width=340, height=460\');\"><img src=images/peek.gif border=0></a><a onClick=\"MM_openBrWindow(\'TWR_2750_ac_x.html\',\'\',\'scrollbars=no, width=340, height=460\');\"><font face=\"Arial, Helvetica, sans-serif\" size=\"1\"><b>Click here for larger image</b></font></a>";

prodchar[7][1] = "<input type=\"checkbox\" name=\"chk1\" value=\"65.88\" onclick=\"changeTotal();\"> Add Divider Panel";

prodchar[7][2] = "<input type=\"checkbox\" name=\"chk1\" value=\"65.88\" onclick=\"changeTotal();\"> Add Divider Panel";

prodchar[7][3] = "Divider Panel Included";

prodchar[7][4] = <input type=\"checkbox\" name=\"chk1\" value=\"65.88\" onclick=\"changeTotal();\"> Add Divider Panel";

prodchar[7][5] = "Divider Panel Included";

prodchar[7][6] = <input type=\"checkbox\" name=\"chk1\" value=\"65.88\" onclick=\"changeTotal();\"> Add Divider Panel";

prodchar[7][7] = "-----";

prodchar[7][8] = "Divider Panel Included";

prodchar[7][9] = "Divider Panel Included";

prodchar[8][1] = "<font face=\"Arial, Helvetica, sans-serif\" size=\"2\"><b>Single Door</b></font>";

prodchar[8][2] = "<font face=\"Arial, Helvetica, sans-serif\" size=\"2\"><b>Single Door</b></font>";

prodchar[8][3] = "<font face=\"Arial, Helvetica, sans-serif\" size=\"2\"><b>Single Door</b></font>";

prodchar[8][4] = "<font face=\"Arial, Helvetica, sans-serif\" size=\"2\"><b>Single Front Door</b></font>";

prodchar[8][5] = "<font face=\"Arial, Helvetica, sans-serif\" size=\"2\"><b>Single Front Door</b></font>";

prodchar[8][6] = "<font face=\"Arial, Helvetica, sans-serif\" size=\"2\"><b>Single Front Door</b></font>";

prodchar[8][7] = "-----";

prodchar[8][8] = "<font face=\"Arial, Helvetica, sans-serif\" size=\"2\"><b>Double Door</b></font>";

prodchar[8][9] = "<font face=\"Arial, Helvetica, sans-serif\" size=\"2\"><b>Triple Door</b></font>";

prodchar[9][1] = "1622";

prodchar[9][2] = "1624";

prodchar[9][3] = "1630";

prodchar[9][4] = "1636";

prodchar[9][5] = "1642";

prodchar[9][6] = "1648";

prodchar[9][7] = "-----";

prodchar[9][8] = "1622-2";

prodchar[9][9] = "1622-3";

prodchar[10][1] = "description 1";

prodchar[10][2] = "description 2";

prodchar[10][3] = "description 3";

prodchar[10][4] = "description 4";

prodchar[10][5] = "description 5";

prodchar[10][6] = "description 6";

prodchar[10][7] = " ";

prodchar[10][8] = "Look ma 2 doors for Buffie ";

prodchar[10][9] = " Yeah but check this one out, its got 3 doors, but the color is uuugly";

prodchar[11][1] = "<font face=\"Arial, Helvetica, sans-serif\" size=\"1\" color=\"#CCFF00\"><b><font color=\"#3300FF\">Select # of Doors Below:</font></b><br><img src=\"images/transparent.gif\" width=\"20\" height=\"6\"><br><a href='javascript:createHide1(2,0,0,0,0,0,0,\"1\");MM_swapImage(\"mwlife_familypic\",\" \", \"graphics/mw_1622g.jpg\",0);'><img src=\"graphics/1door.gif\" border=\"1\" ></a><img src=\"images/transparent.gif\" width=\"20\" height=\"6\"><a href='javascript:createHide1(2,0,0,0,0,0,0,\"8\");MM_swapImage(\"mwlife_familypic\",\" \", \"graphics/mw1622_2.jpg\",1);'><img src=\"/graphics/2door.gif\" border=\"0\" ></a><img src=\"images/transparent.gif\" width=\"20\" height=\"6\"><a href='javascript:createHide1(2,0,0,0,0,0,0,\"9\");MM_swapImage(\"mwlife_familypic\",\" \", \"graphics/mw1622_3.jpg\",2);'><img src=\"graphics/3door.gif\" border=\"0\" ></a></div>";

prodchar[11][2] = "<img src=\"images/spacer.gif\" width=\"1\" height=\"1\" border=\"0\" >";

prodchar[11][3] = "<img src=\"images/spacer.gif\" width=\"1\" height=\"1\" border=\"0\" >";

prodchar[11][4] = "<img src=\"images/spacer.gif\" width=\"1\" height=\"1\" border=\"0\" >";

prodchar[11][5] = "<img src=\"images/spacer.gif\" width=\"1\" height=\"1\" border=\"0\" >";

prodchar[11][6] = "<img src=\"images/spacer.gif\" width=\"1\" height=\"1\" border=\"0\" >";

prodchar[11][7] = "<img src=\"images/spacer.gif\" width=\"1\" height=\"1\" border=\"0\" >";

prodchar[11][8] = "<font face=\"Arial, Helvetica, sans-serif\" size=\"1\" color=\"#CCFF00\"><b><font color=\"#3300FF\">Select # of Doors Below:</font></b><br><img src=\"images/transparent.gif\" width=\"20\" height=\"6\"><br></font><a href='javascript:createHide1(2,0,0,0,0,0,0,\"1\");MM_swapImage(\"mwlife_familypic\",\" \", \"graphics/mw_1622g.jpg\",0);'><img src=\"graphics/1door.gif\" border=\"0\" ></a><img src=\"images/transparent.gif\" width=\"20\" height=\"6\"><a href='javascript:createHide1(2,0,0,0,0,0,0,\"8\");MM_swapImage(\"mwlife_familypic\",\" \", \"graphics/mw1622_2.jpg\",1);'><img src=\"graphics/2door.gif\" border=\"1\" ></a><img src=\"images/transparent.gif\" width=\"20\" height=\"6\"><a href='javascript:createHide1(2,0,0,0,0,0,0,\"9\");MM_swapImage(\"mwlife_familypic\",\" \", \"graphics/mw1622_3.jpg\",2);'><img src=\"graphics/3door.gif\" border=\"0\" ></a></div>";

prodchar[11][9] = "<font face=\"Arial, Helvetica, sans-serif\" size=\"1\" color=\"#CCFF00\"><b><font color=\"#3300FF\">Select # of Doors Below:</font></b><br><img src=\"images/transparent.gif\" width=\"20\" height=\"6\"><br><a href='javascript:createHide1(2,0,0,0,0,0,0,\"1\");MM_swapImage(\"mwlife_familypic\",\" \", \"graphics/mw_1622g.jpg\",0);'><img src=\"graphics/1door.gif\" border=\"0\" ></a><img src=\"images/transparent.gif\" width=\"20\" height=\"6\"><a href='javascript:createHide1(2,0,0,0,0,0,0,\"8\");MM_swapImage(\"mwlife_familypic\",\" \", \"graphics/mw1622_2.jpg\",1);'><img src=\"graphics/2door.gif\" border=\"0\" ></a><img src=\"images/transparent.gif\" width=\"20\" height=\"6\"><a href='javascript:createHide1(2,0,0,0,0,0,0,\"9\");MM_swapImage(\"mwlife_familypic\",\" \", \"graphics/mw1622_3.jpg\",2);'><img src=\"graphics/3door.gif\" border=\"1\" ></a></div>";




for (i=1; i <= 11; i++) {

if (document.getElementById) {

document.getElementById(i).innerHTML = (prodchar[sku]);

prodtotal = justprice[1][sku];

document.getElementById(12).innerHTML = prodtotal;
}

else if (document.all) {

document.all.innerHTML = prodchar[sku];
document.all[12].innerHTML = prodtotal;

}

else if (document.layers){

document.layers["ns"+i].document.write(prodchar[sku]);

document.layers["ns"+i].document.close();

document.layers["ns"+12].document.write(prodtotal);

document.layers["ns"+12].document.close();



}

}



}






here's the call in the body (all the div/layer tag code are the same for all 14 ids):

<td align="left" valign="top">
<div align="center"><a href='javascriptrodselect1(2,0,0,0,0,0,0,"1");MM_swapImage("mwlife_familypic"," ", "

http://www.mydomain/graphics/mw_1622g.jpg",0);'><img

name="mw_1622_sw" src="graphics/mw_1622_sw.jpg" width="75" height="64" border="0" alt=""></a></div>
</td>


Thanks again Lee. Please bear in mind that this is all a work in progress.

Rich

 

[trollacious]

According to W3C standards:

http://www.w3.org/TR/REC-html40/types.html#type-name

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

The layer tag was generally used for Netscape 4.x, but it's pretty much standard now to not code specifically for that old of a version unless your target audience is known to resist more modern technology.

You're right about that other function being rough. I'm generally not inclined to go over a large amount of code to fix things because I believe web designers and programmers should take care of learning things on their own more. I would figure a way to write things a lot more cleanly, but am one who uses the object-oriented features of Javascript as much as possible.

Lee

 

[rshandy]

Yes,

I agree with you. Believe or not, I've come a long way from where I was. I'm a little bit more well versed in Perl, but I've just been learning html, javascript et al by doing things on my own.

Question though, is there an effective way to place that array I created prodchar[][] and place it in a file on my server and call instead of writing it all out in the header?

Rich

 

[trollacious]

If you would organize it into objects, it'd be a lot neater looking. It'd be an array of objects rather than a 2-dimensional array, and you'd access the object property in the array. You can always put it all in an external Javascript file and load that, which means that if you make any changes, you make them in the central file and that takes care of every page that loads the script.

Lee

 

[rshandy]

Hi Lee:

I'm back again. Thanks for all your posts. here's where I am right now. I was able to create an external .js script to handle the function but, I then realized that my ecommerce software (softcart) won't interpret my SoftCart datatags.

I have not tried creating an object array yet, so the 2 dimensional array is essentially the same.

I then tried to change my "ids" to the proper protocol you mentioned, but I keep getting the same error:

"document.getElementById(...) is null or not an object":

I changed the code by adding 'prod' to following code as well as the old div tags (i.e. <div id="prod10">:

for (i=1; i <= 12; i++) {
if (document.getElementById) {
document.getElementById('prod'+i).innerHTML = (prodchar[sku]);
var prodprice = prodchar[1][sku];
var prodmod = prodchar[9][sku];
document.getElementById(prod15).innerHTML = "Model " + prodmod + '<img src=\"

http://www.mydomain.com/images/transparent.gif\"

border=\"0\ width=\"20\" height=\"22\">' + prodprice ;
document.getElementById(prod13).innerHTML = "<img src=\"

http://www.mydomain.com/images/spacer.gif\"

width=\"1\" height=\"1\" border=\"0\">";
document.getElementById(prod14).innerHTML = "<img src=\"

http://www.mydomain.com/images/spacer.gif\"

width=\"1\" height=\"1\" border=\"0\">";
}
else if (document.all) {
document.all['prod'+i].innerHTML = prodchar[sku];

document.all[prod13].innerHTML = "<img src=\"

http://www.mydomain.com/images/spacer.gif\"

width=\"1\" height=\"1\" border=\"0\">";
document.all[prod14].innerHTML = "<img src=\"

http://www.mydomain.com/images/spacer.gif\"

width=\"1\" height=\"1\" border=\"0\">";
}

}


Thanks,

Rich

 

[trollacious]

Use quotes when referring to ids:

document.getElementById('prod14').innerHTML=

You have this on several lines without quotes, including in the old document.all[] stuff:

document.all['prod13'].innerHTML=

Lee

 

[rshandy]

Outstanding!! thank you very much. things are really starting to come together.

one more thing...I think - you mentioned setting up an array of objects rather than a 2-dimensional array, could you give me a quick example?

Rich

 

[trollacious]

Here's the first set of the ProdChar object that I put together real fast. I looked for patterns in the arrays you had, and wrote it in conjunction with the things I found. I ignored your spacers and figured you can put those in manually in the loop.

function ProdChar(price1, price2, productID, floorpanprice, model, popup, dividerpanel, door, number, description, numdoors)
{
this.price1 = price1;
this.price2 = price2;
this.productID = '<input type="text" name="QUANTITY' + productID + '" size="3" value="1"><input type="hidden" name="product' + productID + '" value="' + productID + '">';
if (floorpanprice.length='')
  {
  this.floorpanprice='"<font face=\"Arial, Helvetica, sans-serif\" size=\"1\">Floor Pan Included</font>"';
  }
else
  {
  this.floorpanprice = '<input type="checkbox" name="chk2' + productID + '" value="' + floorpanprice + '" onclick="changeTotal();"> Add Floor Pan';
  }
this.model = model;
this.popup = '<a onClick="MM_openBrWindow(\'' + popup + '_ac_x.html\',\'\',\'scrollbars=no,width=340,height=460\');"><img src="images/peek.gif" border="0"></a><a onClick="MM_openBrWindow(\'' + popup + '_ac_x.html\',\'\',\'scrollbars=no,width=340,height=460\');"><font face="Arial, Helvetica, sans-serif" size="1"><b>Click here for larger image</b></font></a>';
if (dividerpanel.length == 0)
  {
  this.dividerpanel = 'Divider Panel Included';
  }
else
  {
  this.dividerpanel = '<input type="checkbox" name="chk1' + productID + '" value="' + dividerpanel + '" onclick="changeTotal();"> Add Divider Panel';
  }
this.door = '<font face="Arial, Helvetica, sans-serif" size="2"><b>' + door + '</b></font>';
this.number = number;
if (numdoors==false)
  {
  this.numdoors = '<img src="images/spacer.gif" width="1" height="1" border="0">';  
  }
else
  {
  this.numdoors = '<font face="Arial, Helvetica, sans-serif" size="1" color="#CCFF00"><b><font color="#3300FF">Select # of Doors Below:</font></b><br><img src="images/transparent.gif" width="20" height="6"><br><a href="javascript:createHide1(2,0,0,0,0,0,0,\'1\');MM_swapImage(\'mwlife_familypic\',\' \', \'graphics/mw_1622g.jpg\',0);\"><img src="graphics/1door.gif" border="0" ></a><img src="images/transparent.gif" width="20" height="6"><a href="javascript:createHide1(2,0,0,0,0,0,0,\'8\');MM_swapImage(\'mwlife_familypic\',\' \', \'graphics/mw1622_2.jpg\',1);"><img src="graphics/2door.gif" border="0" ></a><img src="images/transparent.gif" width="20" height="6"><a href="javascript:createHide1(2,0,0,0,0,0,0,\'9\');MM_swapImage(\'mwlife_familypic\',\' \', \'graphics/mw1622_3.jpg\',2);"><img src="graphics/3door.gif" border="0" ></a></div>';
  }
return this;
}

var prodchar=new Array(), pi=0, ji=0;

prodchar[pi++]=new ProdChar('$ 100.00', '$ 375.00', '99901BB','45.09', 'Model 1622', 'TWR_2750', '65.88','Single Door','1622','description 1', true);

justprice[ji++] = "$ 375.00";

I would have written all the Javascript-generated HTML code in the loop rather than add it to the object properties, but this is a relatively quick and dirty example. I noticed that some of the code wasn't consistent, like some elements having graphics with borders where the same element for a different item didn't. Doing it this way makes the repetitive parts consistent, and if you want to modify something, you can modify all the items with one change.

Lee

 

[rshandy]

Slick! Definitely reduces my code length. Some dumb questions though:

how do I write to the div tags? I used this code to call the function but it only swaps the picture(is this ok?):

<a href='javascriptrodChar("$ 100.00", "$ 375.00", "99901BB","45.09", "Model 1622", "TWR_2750", "65.88","Single Door","1622","description 1", true);MM_swapImage("mwlife_familypic"," ", "

http://www.mydomain.com/scstore/graphics/mw_1624g.jpg",1);'><img

name="mw_1624_sw" src="graphics/mw_1624_sw.jpg" width="80" border="0" ></a>

------

What do I need to modify in the prodchar function write to the div tags?

------

I may have to add maybe 5 - 10 product attributes (div tags) that I will need to change using this same function, the call of this function may get pretty long, is that ok as well?

Rich

 

[trollacious]

You have to define the prodchar array items first, and put them in an array. The way you set up your <a> you send values to the ProdChar object/function, but you don't store the return result in anything. That's like calling a Perl function to calculate something and return the result, but not using a variable to store the result in.

You need to go through some tutorials on Javascript, or get yourself a good book on writing Javascript, and make sure it covers using objects. All my books are dictionary/encyclopedia type references, so I don't know what's out there that's good and what isn't. You have to learn some of this stuff yourself, and my example was to show you what JS is capable of with what you want to do.

Lee

 

[rshandy]

Roger that! I have things all over the place and have to distill it down - Up against a deadline - sorry for being lazy.

Thanks again for all your help.

Rich