Thursday 6 September 2012

Display Hidden Value using Radio Button


Blue Text - Radio button
Green Text - Javascript 

-----------------------------------------------------------------------------------------------------------

<table width="600" height="65" border="0" bordercolor="#3366FF" cellpadding=
                                                                                                                   "1" cellspacing="1">
                                                                                                                <tr>            <td >width="115"><input type="radio" name="certificate_required" value="Individual Certificate" onclick="doClick2(this)">
                                                                                                                            Individual Certificate</td>
                                                                                                                  <td width="133"><input type="radio" name="certificate_required" value="Time Stamping" onclick="doClick2(this)">
                                                                                                                  Time Stamping</td>
                                                                                                                  <td width="147"><input type="radio" name="certificate_required" value="Code Signing" onclick="doClick2(this)">
                                                                                                                    Code Signing</td>
                                                                                                                    <td width="192">
                                                                                                                        <input type="radio" name="certificate_required" value="SSL Server" onclick="doClick2(this)">
                                                                                                                            SSL Server


                                                                                                                    </td>
                                                                                                                </tr>
                                                                                                                <tr>

                                                                                                                </tr>
                                                                                                            </table></td>
                                                                                                    </tr>
                                                                                                    <tr>


                                                                                                        <td colspan="2">

                                                                                                        </td>

                                                                                                    </tr>
                                                                                                    <tr>
                                                                                                        <td>&nbsp;</td>
                                                                                                        <td><table width="413" height="31" border="0" cellpadding="1" cellspacing="1">
                                                                                                                <tr>
                                                                                                                    <td bordercolorlight="#6699FF"> 
                                                                                                                        <div id="otherOpt2" style="display:none">


                                                                                                                            <input type="radio" name="Encryption_Certificate" value="Individual Signing">Individual Signing 
                                                                                                                                <br/>
                                                                                                                                <input type="radio" name="Encryption_Certificate" value="Singning Encryption"> Singning Encryption </div></td>
                                                                                                                                    <td bordercolorlight="#6699FF"><div id="textbox2" style="display:none"> <br/>
                                                                                                                                            Web Server<font color="red">*</font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                                                                                                            <input type="text" class="header1" name="abc1">
                                                                                                                                                <br/>
                                                                                                                                                <br/>
                                                                                                                                                Service<font color="red">*</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="header1" type="text" name="abc2">
                                                                                                                                                    <br/>
                                                                                                                                                    <br/>
                                                                                                                                                    IP Address<font color="red">*</font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                                                                                                                    <input type="text" class="header1" name="abc3">
                                                                                                                                                        <br/>
                                                                                                                                                        <br/>
                                                                                                                                                        Domain Name<font color="red">*</font> &nbsp;&nbsp;&nbsp;
                                                                                                                                                        <input type="text" class="header1" name="abc4">
                                                                                                                                                            <br/>
                                                                                                                                                            <br/>
                                                                                                                                                            Physical Location<font color="red">*</font> 
                                                                                                                                                            <input class="header1" type="text" name="abc5">
                                                                                                                                                                </div>    </td>
                                                                                                                                                                </tr>
                                                                                                                                                                </table>




        <script type="text/javascript">
            function doClick2(objRad){
                if (objRad.value=="Individual Certificate"){
                    document.getElementById("textbox2").style.display='none'; //hide textbox

                    document.getElementById("otherOpt2").style.display='block'; //show other options
                }
                else if (objRad.value=="SSL Server"){
                    document.getElementById("otherOpt2").style.display='none'; //hide other options
                    document.getElementById("textbox2").style.display='block'; //show textbox
                }
else if (objRad.value=="Time Stamping"){
                    document.getElementById("otherOpt2").style.display='none'; //hide other options
                    document.getElementById("textbox2").style.display='none'; //show textbox
                }
else if (objRad.value=="Code Signing"){
                    document.getElementById("otherOpt2").style.display='none'; //hide other options
                    document.getElementById("textbox2").style.display='none'; //show textbox
                }

            }
        </script>

No comments:

Post a Comment