Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Nov 2002
    Posts
    184
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Looking 4 short and good solution!

    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>

  • #2
    Regular Coder Skyzyx's Avatar
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    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';
    }

    Creator of SimplePie and Tarzan AWS, co-founder of WarpShare, co-built the Y! Messenger website, usability-focused, and an INFJ personality.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    624
    Thanks
    0
    Thanked 0 Times in 0 Posts
    A bit like a coding challenge

    <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>

  • #4
    Regular Coder
    Join Date
    Nov 2002
    Posts
    184
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks all. Can we reduce the HMTL code?

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Posts
    624
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can move all of the style into the head and use style instead of attributes


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •