Show textbox when radio button is selected

**mason66** · 02-15-2012 05:04 PM

Hi Guys,
Im a javascript noob. What I need is a sample code for multiple radio buttons and after each button is selected text boxes and dropdown menu should appear with different variables on each radio buttons.

Hope someone kind enough to help me on this.

Thanks!

**nap0leon** · 02-15-2012 05:27 PM

Your requirements are open to a variety of interpretations...

Does your page have a different set of text boxes and drop-downs that already exist on the page but are hidden and you want to hide/show the appropriate set depending on which radio button is selected?

Or do you wanting to re-use one drop-down box and re-fill it with different values every time the user changes the radio button selection?

Either way, check this page's "getCheckedValue" function - useful for getting the value of the radio button that is selected.

For hide/show, there are a variety of ways to do it. Here are two examples of how to Hide/Show page elements by changing the class or changing the style.display.

**ibixxon** · 02-15-2012 07:58 PM

Not sure of what you realy want, you can optimize this and use;

Code:

<html>
<head>
        	function radioDisp(){
        		var radio1=document.form1.radio1,
        		radio2=document.form1.radio2,
        		//create select box and add name attribute
        		sel=document.createElement('select');
        		sel.setAttribute('name','myselect');
        		sel.style.width = "100px";
        		//append it to form1
                document.form1.appendChild(sel);      		
                // evt function to add click event to each
                //of the radio buttons
                function evt(rad){
                	if(!rad){
                		return false;
                	}
                	var radLen=rad.length;
                	while(radLen--){
                		rad[radLen].onclick=function(){
                			var radVal=this.value;
                      		var option=document.createElement('option');
                      		sel.appendChild(option);
                			option.value=radVal;
                			option.innerHTML=radVal;
                			
                			}
                	}
                	
                }
                // call evt with reference to each set of radio
                //elements
                 evt(radio1);
                 evt(radio2);
        		
        	}
        	
        	
        </script>
    </head>
    <body onload="radioDisp()">
        <h1>New Web Project Page</h1>
        <form name="form1">
              <input type="radio" name="radio1" value="one" /> One<br />
              <input type="radio" name="radio1" value="two" /> Two<br />
              <input type="radio" name="radio1" value="three" /> Three<br />

        
              <input type="radio" name="radio2" value="Bart" /> Bart<br />
              <input type="radio" name="radio2" value="Lisa" /> Lisa<br />
              <input type="radio" name="radio2" value="Marge" /> Marge<br />
        
        
        </form>


    </body>
</html>

Thread: Show textbox when radio button is selected

Thread Tools

Display

Show textbox when radio button is selected

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions