Hi All,
I want to show few text fields on click of a radio button ,how can i do it? without JavaScript or AJAX.
there is'nt any other go?
sarah
2009-12-30 05:20:50
Nope, I am afraid. BTW, why you are restricting yourself? Is it some kinda challenge homework?
Adeel Ansari
2009-12-30 05:22:23
i am doing a mobile app where in i should not use java script
sarah
2009-12-30 05:24:57
Does that suppose to run in a browser? Or we are just assuming the wrong thing?
Adeel Ansari
2009-12-30 07:31:06
A:
The only other thing besides JavaScript that might work (I haven't tried it but it's something to investigate) is to use the :focus pseudo class in CSS. Even if it works it won't be cross browser probably, but since you're targeting specific mobile platforms it might be OK. It would work like this:
<style>
#bar { display:none; }
#foo:selected #bar { display:block; }
</style>
<input type="radio" id="foo">
<label for="foo"><div id="bar">Stuff goes here</div></label>
I don't know if :focus also applies to a form element's associated label, but it certainly may considering that clicking an element's label does activate the "click" event on the form element it's labeling.
Something to try anyway. If you're targeting mobile Safari that should have good support for these kind of selectors.
darkporter
2009-12-30 05:46:24
A:
Yes, can you do this with a psudo-class selector but it certainly will not work cross browser. You can check:
for a list of what browser support what selectors. IE 7 and lower do NOT support the :focus selector, although you could accomplish roughly what you want with :hover (although I imagine you don't want it to show only on hover).
The following example works in Firefox (3.5):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<style>
input { float: left; }
/* Make the text hidden when the page loads */
.text_to_show { display:none; }
/* This style affects element which immediately follows the focused class */
.trigger:focus + div.text_to_show { display: inline; }
</style>
</head>
<body>
<input type="radio" name="radio" class="trigger" />
<div class="text_to_show">This text is tied to the first radio button.</div>
<input type="radio" name="radio" class="trigger" />
<div class="text_to_show">This text is tied to the 2nd radio button</div>
</body>
</html>
Erik
2009-12-30 09:32:36