I have a table on a form containing 2 columns - size type and size. Depending on the size type (Mens, womens, Youth) I want to change the set of sizes available (in an option box). I have been able to do this (in Mozilla - haven't tested in IE yet) for a single row, and have been able to set the size list for an indexed row but cannot figure out how to tell on which row the size type has been changed.
My function follows : (when I set j = 1, I do set the size options for the 2nd row but I want to set j according to which "item" has been changed)
[CODE=javascript]function setsize(item){
var c = item.value;
var j = item.index; ### this statement does not work - is there a way to set j correctly?
if (c == "W") {
document.indiv. size[j].options[1].text = "X-Small";
document.indiv. size[j].options[2].text = "Small";
document.indiv. size[j].options[3].text = "Medium";
document.indiv. size[j].options[4].text = "Large";
document.indiv. size[j].options[5].text = "X-Large";
}
else if (c == "M") {
document.indiv. size[j].options[1].text = "Small";
document.indiv. size[j].options[2].text = "Medium";
document.indiv. size[j].options[3].text = "Large";
document.indiv. size[j].options[4].text = "X-Large";
document.indiv. size[j].options[5].text = "XX-Large";}
else if (c == "Y") {
document.indiv. size[j].options[1].text = "Youth - 8";
document.indiv. size[j].options[2].text = "Youth - 10 ";
document.indiv. size[j].options[3].text = "Youth - 12";
document.indiv. size[j].options[4].text = "Youth - 14";
document.indiv. size[j].options[5].text = "Youth - 16";}
}[/CODE]
My form elements and call to the function:
[HTML]<td><select name="sizeType" onchange = "setsize(this)" ;>
<option value="0" selected>select </option>
<option value="M" > Mens</option>
<option value="W" > Womens </option>
<option value="Y" > Youth </option>
</select></td>
<td><select name="size">
<option value="0" selected> select</option>
<option value="1" display="none"> Small</option>
<option value="2" display="none"> Medium</option>
<option value="3" display="none"> Large</option>
<option value="4" display="none"> X-Large</option>
<option value="5" display="none"> XX-Large</option>
</select></td>[/HTML]
At this point I am just working in html and repeat this row. In Perl it would be in a for loop.
Thanks in advance. Help from this forum has always been useful.
My function follows : (when I set j = 1, I do set the size options for the 2nd row but I want to set j according to which "item" has been changed)
[CODE=javascript]function setsize(item){
var c = item.value;
var j = item.index; ### this statement does not work - is there a way to set j correctly?
if (c == "W") {
document.indiv. size[j].options[1].text = "X-Small";
document.indiv. size[j].options[2].text = "Small";
document.indiv. size[j].options[3].text = "Medium";
document.indiv. size[j].options[4].text = "Large";
document.indiv. size[j].options[5].text = "X-Large";
}
else if (c == "M") {
document.indiv. size[j].options[1].text = "Small";
document.indiv. size[j].options[2].text = "Medium";
document.indiv. size[j].options[3].text = "Large";
document.indiv. size[j].options[4].text = "X-Large";
document.indiv. size[j].options[5].text = "XX-Large";}
else if (c == "Y") {
document.indiv. size[j].options[1].text = "Youth - 8";
document.indiv. size[j].options[2].text = "Youth - 10 ";
document.indiv. size[j].options[3].text = "Youth - 12";
document.indiv. size[j].options[4].text = "Youth - 14";
document.indiv. size[j].options[5].text = "Youth - 16";}
}[/CODE]
My form elements and call to the function:
[HTML]<td><select name="sizeType" onchange = "setsize(this)" ;>
<option value="0" selected>select </option>
<option value="M" > Mens</option>
<option value="W" > Womens </option>
<option value="Y" > Youth </option>
</select></td>
<td><select name="size">
<option value="0" selected> select</option>
<option value="1" display="none"> Small</option>
<option value="2" display="none"> Medium</option>
<option value="3" display="none"> Large</option>
<option value="4" display="none"> X-Large</option>
<option value="5" display="none"> XX-Large</option>
</select></td>[/HTML]
At this point I am just working in html and repeat this row. In Perl it would be in a for loop.
Thanks in advance. Help from this forum has always been useful.
Comment