...
PDA

Looking 4 short and good solution!

ClueLess
02-25-2003, 12:04 AM
Hi all,

I have a form below, the onchange event is working good, but the code is too long. I am looking for a short and good solution. If you have one, please let me know me.

Basically, I would like the value of the textboxes changes, when I select different Plan in the dropdown list.



<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<script language="javascript">
function changeValue()
{
if (document.all.select.selectedIndex==0)
{
document.getElementById("planA").style.visibility='visible';
}
else
{
document.getElementById("planA").style.visibility='hidden';
}

if (document.all.select.selectedIndex==1)
{
document.getElementById("planB").style.visibility='visible';
}
else
{
document.getElementById("planB").style.visibility='hidden';
}

if (document.all.select.selectedIndex==2)
{
document.getElementById("planC").style.visibility='visible';
}
else
{
document.getElementById("planC").style.visibility='hidden';
}

if (document.all.select.selectedIndex==3)
{
document.getElementById("planD").style.visibility='visible';
}
else
{
document.getElementById("planD").style.visibility='hidden';
}

if (document.all.select.selectedIndex==4)
{
document.getElementById("planE").style.visibility='visible';
}
else
{
document.getElementById("planE").style.visibility='hidden';
}
}

</script>

</HEAD>
<BODY>

<form name="formName3">

<table width=100%>
<tr>
<td>
<select name="select" onchange="changeValue()">
<option>PLAN A</option>
<option>PLAN B</option>
<option>PLAN C</option>
<option>PLAN D</option>
<option>PLAN E</option>
</select>
</td>
</tr>
<tr>
<td>

<SPAN ID="planA" STYLE="visibility:hidden;position:absolute">
<table>
<tr>
<td width="30">&nbsp;</td>
<td class="SmallHeadingBurg" width="180">Maximum Medical Expense:&nbsp;</td>
<td class="regularParagraph" align="left">$
<INPUT style="border:1 solid #000000" type="text" id="MaxMedExp" name="MaxMedExp" value="2000" maxlength="9" size="30">
</td>
</tr>
<tr>
<td width="30">&nbsp;</td>
<td class="SmallHeadingBurg" width="180">Maximum Non-Med Expense:&nbsp;</td>
<td class="regularParagraph" align="left">$
<INPUT style="border:1 solid #000000" type="text" id="MaxNonMedExp" name="MaxNonMedExp" value="2000 " maxlength="9" size="30">
</td>
</tr>
<tr>
<td width="30">&nbsp;</td>
<td class="SmallHeadingBurg" width="180">Maximum Work Loss:&nbsp;</td>
<td class="regularParagraph" align="left">$
<INPUT style="border:1 solid #000000" type="text" id="MaxWorkLoss" name="MaxWorkLoss" value="250 " maxlength="9" size="30">
</td>
</tr>
</table>
</SPAN>

<SPAN ID="planB" STYLE="visibility:hidden;position:absolute">
<table>
<tr>
<td width="30">&nbsp;</td>
<td class="SmallHeadingBurg" width="180">Maximum Medical Expense:&nbsp;</td>
<td class="regularParagraph" align="left">$
<INPUT style="border:1 solid #000000" type="text" id="MaxMedExp" name="MaxMedExp" value="B" maxlength="9" size="30">
</td>
</tr>
<tr>
<td width="30">&nbsp;</td>
<td class="SmallHeadingBurg" width="180">Maximum Non-Med Expense:&nbsp;</td>
<td class="regularParagraph" align="left">$
<INPUT style="border:1 solid #000000" type="text" id="MaxNonMedExp" name="MaxNonMedExp" value=" " maxlength="9" size="30">
</td>
</tr>
<tr>
<td width="30">&nbsp;</td>
<td class="SmallHeadingBurg" width="180">Maximum Work Loss:&nbsp;</td>
<td class="regularParagraph" align="left">$
<INPUT style="border:1 solid #000000" type="text" id="MaxWorkLoss" name="MaxWorkLoss" value=" " maxlength="9" size="30">
</td>
</tr>
</table>
</SPAN>

<SPAN ID="planC" STYLE="visibility:hidden;position:absolute">
<table>
<tr>
<td width="30">&nbsp;</td>
<td class="SmallHeadingBurg" width="180">Maximum Medical Expense:&nbsp;</td>
<td class="regularParagraph" align="left">$
<INPUT style="border:1 solid #000000" type="text" id="MaxMedExp" name="MaxMedExp" value=" C" maxlength="9" size="30">
</td>
</tr>
<tr>
<td width="30">&nbsp;</td>
<td class="SmallHeadingBurg" width="180">Maximum Non-Med Expense:&nbsp;</td>
<td class="regularParagraph" align="left">$
<INPUT style="border:1 solid #000000" type="text" id="MaxNonMedExp" name="MaxNonMedExp" value=" " maxlength="9" size="30">
</td>
</tr>
<tr>
<td width="30">&nbsp;</td>
<td class="SmallHeadingBurg" width="180">Maximum Work Loss:&nbsp;</td>
<td class="regularParagraph" align="left">$
<INPUT style="border:1 solid #000000" type="text" id="MaxWorkLoss" name="MaxWorkLoss" value=" " maxlength="9" size="30">
</td>
</tr>
</table>
</SPAN>

<SPAN ID="planD" STYLE="visibility:hidden;position:absolute">
<table>
<tr>
<td width="30">&nbsp;</td>
<td class="SmallHeadingBurg" width="180">Maximum Medical Expense:&nbsp;</td>
<td class="regularParagraph" align="left">$
<INPUT style="border:1 solid #000000" type="text" id="MaxMedExp" name="MaxMedExp" value="D" maxlength="9" size="30">
</td>
</tr>
<tr>
<td width="30">&nbsp;</td>
<td class="SmallHeadingBurg" width="180">Maximum Non-Med Expense:&nbsp;</td>
<td class="regularParagraph" align="left">$
<INPUT style="border:1 solid #000000" type="text" id="MaxNonMedExp" name="MaxNonMedExp" value=" " maxlength="9" size="30">
</td>
</tr>
<tr>
<td width="30">&nbsp;</td>
<td class="SmallHeadingBurg" width="180">Maximum Work Loss:&nbsp;</td>
<td class="regularParagraph" align="left">$
<INPUT style="border:1 solid #000000" type="text" id="MaxWorkLoss" name="MaxWorkLoss" value=" " maxlength="9" size="30">
</td>
</tr>
</table>
</SPAN>

<SPAN ID="planE" STYLE="visibility:hidden;position:absolute">
<table>
<tr>
<td width="30">&nbsp;</td>
<td class="SmallHeadingBurg" width="180">Maximum Medical Expense:&nbsp;</td>
<td class="regularParagraph" align="left">$
<INPUT style="border:1 solid #000000" type="text" id="MaxMedExp" name="MaxMedExp" value="E " maxlength="9" size="30">
</td>
</tr>
<tr>
<td width="30">&nbsp;</td>
<td class="SmallHeadingBurg" width="180">Maximum Non-Med Expense:&nbsp;</td>
<td class="regularParagraph" align="left">$
<INPUT style="border:1 solid #000000" type="text" id="MaxNonMedExp" name="MaxNonMedExp" value=" " maxlength="9" size="30">
</td>
</tr>
<tr>
<td width="30">&nbsp;</td>
<td class="SmallHeadingBurg" width="180">Maximum Work Loss:&nbsp;</td>
<td class="regularParagraph" align="left">$
<INPUT style="border:1 solid #000000" type="text" id="MaxWorkLoss" name="MaxWorkLoss" value=" " maxlength="9" size="30">
</td>
</tr>
</table>
</SPAN>


</td>
</tr>
</table>
</form>
<SCRIPT LANGUAGE="JavaScript">
<!--
changeValue(document.formName3);
//-->
</SCRIPT>



</BODY>
</HTML>
Skyzyx
02-25-2003, 01:58 AM
function changeValue()
{
var sel=document.getElementsByName('select')[0];

if (sel.selectedIndex==0) document.getElementById("planA").style.visibility='visible';
else document.getElementById("planA").style.visibility='hidden';

if (sel.selectedIndex==1) document.getElementById("planB").style.visibility='visible';
else document.getElementById("planB").style.visibility='hidden';

if (sel.selectedIndex==2) document.getElementById("planC").style.visibility='visible';
else document.getElementById("planC").style.visibility='hidden';

if (sel.selectedIndex==3) document.getElementById("planD").style.visibility='visible';
else document.getElementById("planD").style.visibility='hidden';

if (sel.selectedIndex==4) document.getElementById("planE").style.visibility='visible';
else document.getElementById("planE").style.visibility='hidden';
}
Graeme Hackston
02-25-2003, 02:18 AM
A bit like a coding challenge :D

<script language="javascript">
function changeValue() {
f = document.getElementById('select')
v = f.options.value
document.getElementById("plan" + v).style.visibility='visible';
for (var i=0;i<f.options.length;i++) {
if (v != f.options[i].value) {
document.getElementById("plan" + f.options[i].value).style.visibility='hidden';
}
}
}

</script>

</HEAD>
<BODY>

<form name="formName3">

<table width=100%>
<tr>
<td>
<select name="select" onchange="changeValue()">
<option value="A">PLAN A</option>
<option value="B">PLAN B</option>
<option value="C">PLAN C</option>
<option value="D">PLAN D</option>
<option value="E">PLAN E</option>
</select>
ClueLess
02-25-2003, 02:09 PM
Thanks all. Can we reduce the HMTL code?
Graeme Hackston
02-26-2003, 03:56 AM
You can move all of the style into the head and use style instead of attributes

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum