Member Avatar for vardhani

In a form if i have a radio box say yes n no... on clicking on yes i want a text area to pop up
how do i do this

  • 5 Contributors
  • 10 Replies
  • 128 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by vssp

Dani AI

Generated

A few simple, safe options to make a textarea appear when the user picks "Yes" — plus accessibility and submission notes that clarify the earlier replies by , , and .

Pure CSS (no JS)
Place the radios before the conditional block and use the :checked sibling selector. This shows/hides visually without JavaScript, but note: CSS cannot change form attributes (like disabled or name), so a hidden textarea will still be submitted unless the server ignores it or the markup is adjusted server-side.

<label><input type="radio" name="want" id="want-yes" value="yes"> Yes</label>
<label><input type="radio" name="want" id="want-no" value="no" checked> No</label>

<div class="conditional">
  <textarea name="details"></textarea>
</div>

<style>
.conditional { display: none; }
#want-yes:checked ~ .conditional { display: block; }
</style>

Recommended: unobtrusive JavaScript
Use JS to toggle visibility and also toggle disabled (so the textarea is not submitted when hidden), and update ARIA attributes for screen readers.

document.addEventListener('DOMContentLoaded', function(){
  var yes = document.getElementById('want-yes');
  var no = document.getElementById('want-no');
  var block = document.querySelector('.conditional');
  var ta = block.querySelector('textarea');

  function toggle(){
    var show = yes.checked;
    block.style.display = show ? '' : 'none';
    ta.disabled = !show;
    block.setAttribute('aria-hidden', show ? 'false' : 'true');
    yes.setAttribute('aria-expanded', show ? 'true' : 'false');
  }

  yes.addEventListener('change', toggle);
  no.addEventListener('change', toggle);
  toggle();
});

Notes and troubleshooting

  • was correct: input type="hidden" is a different element than a textarea — use CSS/JS to hide a textarea, not a hidden input.
  • ’s question: hiding can be done with display:none, visibility:hidden, or the HTML5 hidden attribute. display:none removes layout space; visibility:hidden preserves it.
  • If you want the shown/hidden state to persist after a page reload, either render the radio checked on the server or store the state (e.g., localStorage) and reapply on load.
  • : AJAX is not required just to show/hide a field; use AJAX only if you need to fetch content dynamically.

Quick checklist: same name on radios, set textarea.disabled = true when hidden, manage ARIA attributes for accessibility, and keep server-side validation to accept or ignore optional textarea content.

Recommended Answers

All 10 Replies

Member Avatar for vardhani

hmmm i din get it there!!!
pl can u explain on how i can fo it

Member Avatar for scru

Asumming you have a hidden text area with the id "txarea" and a radio button with the is "rdbtn":

function onradiobuttonclick(){
var radiobutton = document.getElementById("rdbtn");
if (radiobutton.checked){
document.getElementById("txarea").style.visibility = "visible";
}
}
Member Avatar for nav33n

Asumming you have a hidden text area with the id "txarea"

How can you have a hidden text area ?

Member Avatar for ShawnCplus 
<input type="hidden" id="txarea" value="something here" />
Member Avatar for scru

Can't it be hidden with CSS? (visibility:hidden)

Member Avatar for ShawnCplus

a text box that is hidden with CSS is not a hidden form field. Semantically, obviously, but technically, no.

Member Avatar for nav33n

@ ShawnCplus, the code you have mentioned gives a hidden textbox and not a textarea !

, Hmm..Thats can be done. But if you apply css to it, then obviously, it will hide the textarea again if the page is reloaded.

Member Avatar for vardhani

i am not able to do tat ! pl help

Member Avatar for vssp

I think AJAX is helpfull to view aqnd hide the text area

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.