TextBox visible true using Javascript

Question

0.00/5 (No votes)

See more:

Hi..All
i have need to TextBox and Lable visible true using Javascript when

rbtlstFees.Items[1].Selected

is true.and i have no need to page Postback event.

Below Code Hear,

<asp:RadioButtonList ID="rbtlstFees" runat="server" RepeatDirection="Horizontal">
      <asp:ListItem Selected="True" Text="Free" Value="0"></asp:ListItem>
       <asp:ListItem Text="Paid" Value="1"></asp:ListItem>
</asp:RadioButtonList>

Thanks in Advans....

Posted 3-Feb-12 20:51pm

jigneshNP

Updated 3-Feb-12 20:56pm

Sridhar Patnayak

v2

Add a Solution

4 solutions

Solution 4

Hi,

Here is simple solution using jquery:

HTML

<html>
<head>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){	
		
		$('input[name=MyRadio]').click(function() {
			if($(this).val() == "0") {
				$('#DivPaid').hide();
				$('#DivFree').show();
			} else {
				$('#DivFree').hide();
				$('#DivPaid').show();
			}
		});
	});
	</script>

</head>
<body>
	
	<form>
		<input type="radio" name="MyRadio" value="0" checked />Free <br />
		<input type="radio" name="MyRadio" value="1" />Paid<br />
		
		<p>
			<div id="DivFree">
				<input type="text" name="txtFree" value="Free TextBox" />
			</div>
			<div id="DivPaid" style="display:none;">
				<input type="text" name="txtPaid" value="Paid TextBox" />
			</div>
		</p>
	</form>

</body>
</html></html>

All you need is to adjust selector to match your list with radio buttons...

Posted 3-Feb-12 23:30pm

Martin Arapovic

Comments

thatraja 4-Feb-12 8:24am

5!

Solution 2

try this link

select a radiobutton and a correspinding text box will show/visible[^]

Posted 3-Feb-12 21:01pm

ambarishtv

Solution 3

First set this style to Lable and Textbox style="visibility:hidden;display:none;"
then onclick of radiobuttonlist call following javascript function,

function showHide(){
if(document.getElementById('rbtlstFees').value=='1')
{
document.getElementById('txtBxId').style.visibility='visible';
document.getElementById('txtBxId').style.display = 'block';
document.getElementById('lblId').style.visibility='visible';
document.getElementById('lblId').style.display = 'block';
}
else
{
document.getElementById('txtBxId').style.visibility='hidden';
document.getElementById('lblId').style.visibility='hidden';
}
}

hope this will help you.... :)

Posted 3-Feb-12 22:41pm

Career Web Helper

Updated 3-Feb-12 22:42pm

v2

Comments

Georges23 2-Mar-13 1:44am

this code above does not work please modify it

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sushma_Patel · Accepted Answer · 2012-02-03T21:00:00

Solution 1

Try this ...

XML

<script type=text/javascript>
function hide(){
document.getElementById('text1').style.visibility='hidden';
}
function show(){
document.getElementById('text1').style.visibility='visible';
}
</script>

XML

<input type=button value=hide onclick=hide()>
<input type=button value=show onclick=show()>

Posted 3-Feb-12 21:00pm

Sushma_Patel

Comments

thatraja 4-Feb-12 3:05am

Right, 5!

^That's Aragon 4-Feb-12 8:15am

I think this is not the right approach for OP's requirement. This approach will hide/show text1 when related button click. However the requirement is to hide/show Label when particular item is selected in radio button. I for that Martin Arapovic's solution is proper. Although it is with jquery and not with javascript.

thatraja 4-Feb-12 8:23am

I agree that's not complete solution but OP can extend that script based on his requirement. Anyway 5 for Martin's answer.