Radio Button to show Hidden Text Box

Posted on 2008-11-11
Last Modified: 2012-05-05

I'm using a radio button to show a hidden text box depending on whether the user selects, "yes", or ,"no".

Originally the best way I found of doing this was to use radio input buttons (simply because I could not do what I needed with an asp radiobutton). I called a javascript function to show the hidden text box. This worked fine and my textbox showed when the user selected no, just like I wanted. (See code below).

My problem is that I am using session variables. I want to allow the user to leave the page and when they return to the page, if they have selected items they will still be selected. This is working fine with my textboxes. But I don't know how to populate the radiobutton using my session variables.
In my page load I have tried setting both the text and the value properties of the radiolist to my session variable. They are taking the value alllright, but the radio button is not showing as selected.

I want the radio button to show the value of the session variable as selected. It will either be, "yes", or ,"no".

Does anybody know how I can do this please?

//this is my radio button

<fieldset style="width: 162px; position:absolute; top: 75%; left: 7%; 

       border-style: none; right: 563px; background-color:#E2EDFE;" >

      <input type="radio" name="YesNoButton" value="Yes" onclick="checkMixed(this);"/> 


      <input type="radio" name="YesNoButton" value="No"  onclick="checkMixed(this);"/> No


//this is my javascript function to check what the user has pressed

function checkMixed(el)


//if no is selected, the hidden label and textbox is displayed. 

//The next item is repositioned on the page

   if (el.value == "No")


  document.getElementById('<%=YesNoButton.ClientID%>').value = 'No';

  document.getElementById('<%=myTextBox.ClientID%>').style.display = '';

  document.getElementById('<%=LblFooter.ClientID%>').style.display = '';





 //If yes is selected continue

document.getElementById('<%=YesNoButton.ClientID%>').value = 'Yes'; document.getElementById('<%=TxtWhen.ClientID%>').style.display ='none'; 





//This is the code I was putting into my page load in vb

//I had already created the session variable elsewhere in my code

//I also tried using .value here aswell

//I want the user to see what they selected the original time if they made a selection

YesNoButton.Text = Session("YesNo")

Open in new window

Question by:xdubit
    LVL 15

    Accepted Solution

    For a javascript solution, first you modify the radio button a bit by adding id
    <input type="radio" id="yesRadio" name="YesNoButton" value="Yes" onclick="checkMixed(this);"/>   Yes
     <input type="radio" id="noRadio" name="YesNoButton" value="No"  onclick="checkMixed(this);"/> No

    javascript function to check the box is

    function checkRadio(ch) //ch is your session variable store ing yes/no
      if(ch == 'yes')
       document.getElementById('yesRadio').checked = true;
      else if( ch == 'no')
       document.getElementById('noRadio').checked = true;

    Open in new window

    LVL 7

    Assisted Solution

    in your code you have to add like

    <fieldset style="width: 162px; position:absolute; top: 75%; left: 7%;
           border-style: none; right: 563px; background-color:#E2EDFE;" >
          <input type="radio" name="YesNoButton" value="Yes" onclick="checkMixed(this);" <% if Session("YesNo") = "Yes" then %> CHECKED <% END IF %>   />
          <input type="radio" name="YesNoButton" value="No"  onclick="checkMixed(this);" <% if Session("YesNo") = "No" then %> CHECKED <% END IF %> /> No

    Author Closing Comment

    Thanks lads.

    I figured it out myself last night but I awarded you the points between you for taking the time to respond.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Do You Know the 4 Main Threat Actor Types?

    Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

    Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
    This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
    In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
    In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

    794 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now