Reference mellem Java Script og HTML
Hej AlleJeg er ikke den store Java-haj, og håber derfor at der måske er en som kan hjælpe mig med et ret specifikt problem.
Jeg har nedenstående HTML som jeg ikke har mulighed for at ændre i, men jeg vil gerne lave et script der når man vælger ’Main option 3’ også tilvælger alle ’Secondary Options’:
<HTML>
<HEAD>
<LINK rel='stylesheet' href='/styles/collect.css' type='text/css' >
</HEAD>
<BODY>
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="100%" class=text>
<TABLE width='100%' border='0' >
<TR>
<TD class=text>
<P align=right><IMG src="/images/uploaded/DYHA751PC592"></P>
</TD>
</TR>
<TR>
<TD class=text>
<table width="100%" cellspacing="0" border="0"><tr><td><form method=post action="/answer"><input type=hidden name="key" value="MU5CY84FY195"><input type=hidden name="questionnaireid" value="27409"><input type=hidden name="pageindex" value="0"><input type=hidden name=fv value=no><table width="100%" border=0><tr><td width="10%"> </td><td width="80%"><table width="100%" style="margin-top: 10px; margin-bottom: 10px;" >
<tr>
<td align="left" valign="top" width=100%><font size="7">Product One</font><br></td>
</tr>
</table>
<table width="100%" style="margin-top: 10px; margin-bottom: 10px;" >
<tr>
<td align="center" valign="top" width=100%><img src="/images/uploaded/1NS8F11K96C1"</td>
</tr>
</table>
<table class="clt-single" border=0><tr class="clt-single-hdr-tr"><td class="clt-single-hdr-td">Main Options</td></tr><tr class="clt-single-data-tr"><td class="clt-single-data-td"><input class="clt-check" type="checkbox" name="c1276500" value="3777949" checked>Main option 1<br><input class="clt-check" type="checkbox" name="c1276500" value="3777950" checked>Main option 2<br><input class="clt-check" type="checkbox" name="c1276500" value="3778083" >Main option 3<br></td></tr></table><br><table class="clt-single" border=0><tr class="clt-single-hdr-tr"><td class="clt-single-hdr-td">Secondary options</td></tr><tr class="clt-single-data-tr"><td class="clt-single-data-td"><input class="clt-check" type="checkbox" name="c1276501" value="3777951" >Secondary option 1<br><input class="clt-check" type="checkbox" name="c1276501" value="3777952" >Secondary option 2<br><input class="clt-check" type="checkbox" name="c1276501" value="3777953" >Secondary option 3<br><input class="clt-check" type="checkbox" name="c1276501" value="3777954" >Secondary option 4<br><input class="clt-check" type="checkbox" name="c1276501" value="3778088" >Secondary option 5<br></td></tr></table><br><table class="clt-single" border=0><tr class="clt-single-hdr-tr"><td class="clt-single-hdr-td">Comments:</td></tr><tr class="clt-single-data-tr"><td class="clt-single-data-td"> <textarea rows=6 cols=40 class="clt-open" name="t1276590"></textarea></td></tr></table><br></td><td width="10%"> </td></tr></table><input type=image src="/images/spacer.gif" name="next" width="1" height="1" border="0"><table width="100%" cellspacing="0" border="0"><tr><td align="right" width="10%"><img src="/images/ikoner/ikon_back_dimmed.gif" alt='previous'></td><td align="left" width="80%"><table width='100%' border='0'><tr><td bgcolor='D7E6EA' ><input type="image" src="/images/grafer/block_06.gif" name="progress" width='100%' height='12'></td></tr></table></td><td align="left" width="10%"><input type="image" src="/images/ikoner/ikon_close.gif" name="next"></td></tr>
<TR><TD colspan="3">
<TABLE border="0" width="100%" cellspacing="0" cellpadding="0">
<TR>
<TD class="text" width="90%" align="right"><TABLE width="100%" cellspacing="0" align="center" cellpadding="0" border=0><TR ><td width="100%" > </td><TD align="right" ><input type="image" border="0" src="/images/flags/da.gif" name="flag.da"></TD></TR></TABLE>
</TD>
<TD class="text" width="10%">
</TD>
</TR>
</TABLE>
</TD></TR></TABLE></form></td></tr></table>
</TD>
</TR>
</TABLE>
</td>
</tr>
</table>
</BODY>
</HTML>
Jeg kan godt lave scriptet, hvis jeg også selv har mulighed for at lave checkboxene:
<SCRIPT TYPE="text/javascript">
<!--
function checkAll(optionForm)
{
if(optionForm.mainoption3.checked)
{
optionForm.secondaryoption1.checked = true;
optionForm.secondaryoption2.checked = true;
optionForm.secondaryoption3.checked = true;
optionForm.secondaryoption4.checked = true;
optionForm.secondaryoption5.checked = true;
}
}
//-->
</SCRIPT>
<FORM ACTION="../cgi-bin/mycgi.pl">
<INPUT TYPE=CHECKBOX NAME="mainoption3" onClick="checkAll(this.form)">Main option 3<P>
<INPUT TYPE=CHECKBOX NAME="secondaryoption1" onClick="checkAll(this.form)">Secondary Option 1<BR>
<INPUT TYPE=CHECKBOX NAME="secondaryoption2" onClick="checkAll(this.form)">Secondary Option 2<BR>
<INPUT TYPE=CHECKBOX NAME="secondaryoption3" onClick="checkAll(this.form)">Secondary Option 3<BR>
<INPUT TYPE=CHECKBOX NAME="secondaryoption4" onClick="checkAll(this.form)">Secondary Option 4<BR>
<INPUT TYPE=CHECKBOX NAME="secondaryoption5" onClick="checkAll(this.form)">Secondary Option 5
<P><INPUT TYPE=SUBMIT VALUE="submit">
</FORM>
Problemet er at jeg ikke kan finde ud af hvordan man laver referencen til den HTML jeg ikke kan ændre i. Jeg kan ikke finde et unikt ’tag’ jeg kan referere til. Jeg tror jeg skal bruge document.getElementByName, men jeg kan ikke få det til at virke.
Jeg håber der er det geni i blandt jer, der kan hjælpe.
