Rajar Ahmed
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..?
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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>
think you added } at line number 19 at it after line number 10, and remove it from 19
document.getElementByID('t xtaudio'). style.disp lay = "block";
}
else if(document.getElementByID ('no').che cked == true && document.getElementByID('n o').value == "audio")
document.getElementByID('t
}
else if(document.getElementByID
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>
ASKER
getting this errror ,
object doesnot support this property or method ...
object doesnot support this property or method ...
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
{
//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
{
el = document.getElementById('D
if (el.style.display == 'none')
{
el.style.display = '';
}
}
else
{
el = document.getElementById('D
if (el.style.display == '')
{
el.style.display = 'none';
}
}
}
document.getElementByID('t
it was there in code but its not displayed after posting...