Link to home
Start Free TrialLog in
Avatar of Rajar Ahmed
Rajar AhmedFlag for India

asked on

Hideshow action on radio onclick

hi want to do a hide show concept in asp.net for radio button ,
Actually ..
i have a two radio button , on clicking one radio button ,

 it should open one text box .
if its clicked on other radio button this should
open two radiobutton with text box each and in this two radio button
 only  one  the radio button should be clicked and
that text control should be entered with values.......
.i tried like this but shows many js errors like objext expected  and syntax errors..
also i want to validate this form plz suggest..?
<script type="text/javascript">
function check()
{ if(document.forms[0].yes[0].checked == true && document.forms[0].yes[0].value == "video")
 { 
 document.forms[0].mess.style.display = "none"; 
 document.forms[0].video.style.display = "block";
 document.forms[0].audio.style.display = "block";
  document.forms[0].txtvideo.style.display = "block"; 
  document.forms[0].txtaudio.style.display = "block"; 
  else if(document.forms[0].yes[1].checked == true && document.forms[0].yes[1].value == "audio") 
 {
 document.forms[0].mess.style.display = "block"; 
 document.forms[0].video.style.display = "none";
 document.forms[0].audio.style.display = "none";
  document.forms[0].txtvideo.style.display = "none"; 
  document.forms[0].txtaudio.style.display = "none"; 
   }
   } 
   </script>
</head>
<body>
    <form id="Form2"  runat="server">
    <div>
        <input id="yes" name ="yes" type="radio" value="video" onclick="check();" />
        <input id="no" type="radio" name="yes" value="audio" onclick="check();"/>
        <input id="mess" name="mess" type="text" />
        <input id="video" name="video" type="radio" />
        <input id="audio" name="audio" type="radio" /><input name="txtvideo" id="txtvideo" type="text" />
        <input id="txtaudio" type="text"  name="txtvideo" />
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>
    </form>
</body>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of mahadevan_v
mahadevan_v

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of mahadevan_v
mahadevan_v

add a closing } after
document.getElementByID('txtaudio').style.display = "block";

it was there in code but its not displayed after posting...
Avatar of Rajar Ahmed

ASKER

i still get the js errors like object expected and syntax error , plz suggest...thanks ..

 <SCRIPT LANGUAGE="JavaScript">
function check()
{
if(document.getElementByID('yes').checked == true && document.getElementByID('yes').value == "video")
 {
 document.getElementByID('mess').style.display = "none";
document.getElementByID('video').style.display = "block";
 document.getElementByID('audio').style.display = "block";
 document.getElementByID('txtvideo').style.display = "block";
 document.getElementByID('txtaudio').style.display = "block";
  else if(document.getElementByID('no').checked == true && document.getElementByID('no').value == "audio")
 {
 document.getElementByID('mess').style.display = "block";
 document.getElementByID('video').style.display = "none";
 document.getElementByID('audio').style.display = "none";
document.getElementByID('txtvideo').style.display = "none";
document.getElementByID('txtaudio').style.display = "none";
   }
}
}
</SCRIPT>
</head>
<body>
     <form id="Form2"  runat="server">
    <div>
        <input id="yes" name ="yes" type="radio" value="video" onclick="javascript:check();" />
        <input id="no" type="radio" name="yes" value="audio" onclick="javascript:check();"/>
        <input id="mess" name="mess" type="text" />
        <input id="video" name="video" type="radio" />
        <input id="audio" name="audio" type="radio" />
            <input name="txtvideo" id="txtvideo" type="text" />
        <input id="txtaudio" type="text"  name="txtvideo" />
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>
    </form>

Open in new window

think you added } at line number 19 at it after line number 10, and remove it from 19

 document.getElementByID('txtaudio').style.display = "block";
 }
  else if(document.getElementByID('no').checked == true && document.getElementByID('no').value == "audio")
this will remove your syntax error
 <SCRIPT LANGUAGE="JavaScript">
function check()
{
if(document.getElementByID('yes').checked == true && document.getElementByID('yes').value == "video")
 {
 document.getElementByID('mess').style.display = "none";
document.getElementByID('video').style.display = "block";
 document.getElementByID('audio').style.display = "block";
 document.getElementByID('txtvideo').style.display = "block";
 document.getElementByID('txtaudio').style.display = "block";
 }
  else
  {
      if(document.getElementByID('no').checked == true && document.getElementByID('no').value == "audio")
     {
     document.getElementByID('mess').style.display = "block";
     document.getElementByID('video').style.display = "none";
     document.getElementByID('audio').style.display = "none";
    document.getElementByID('txtvideo').style.display = "none";
    document.getElementByID('txtaudio').style.display = "none";
       }
      
}
}
</SCRIPT>
</head>
<body>
     <form id="Form2"  runat="server">
    <div>
        <input id="yes" name ="yes" type="radio" value="video" onclick="javascript:check();" />
        <input id="no" type="radio" name="yes" value="audio" onclick="javascript:check();"/>
        <input id="mess" name="mess" type="text" />
        <input id="video" name="video" type="radio" />
        <input id="audio" name="audio" type="radio" />
            <input name="txtvideo" id="txtvideo" type="text" />
        <input id="txtaudio" type="text"  name="txtvideo" />
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>
    </form>

Open in new window

getting this errror ,
object doesnot support this property or method ...
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
it worked well ,plz suggest how to do validation for this form ..as i mentioned in the question , cliennt side validation....on clicking submit button....also initially its enough to show only two radio button ,after clickin i need to show their respective control, which does well .....



function validate()
{
//add your validation code here
//if validationpassed
//return true;
//else
//return false;
}

in your form add the following attribute
<form name='test' onsubmit="return validate()">

check this link for more details

http://www.w3schools.com/jS/js_form_validation.asp

Take the control that u want to show/hide in a DIV. Give each DIV a seperate ID then use this function to show/hide the DIV

function Show()
            {
                if(document.getElementById('radio1').checked)
                {
                    el = document.getElementById('DIV1');
                      if (el.style.display == 'none')
                      {
                            el.style.display = '';
                           
                      }

                }
                else
                  {
                          el = document.getElementById('DIV1');
                          if (el.style.display == '')
                          {
                                el.style.display = 'none';
                           
                          }
                           
                    }
            }