www.webdeveloper.com
Results 1 to 3 of 3

Thread: Show textbox when radio button is selected

  1. #1
    Join Date
    Jul 2006
    Posts
    26

    Exclamation Show textbox when radio button is selected

    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!
    Last edited by mason66; 02-15-2012 at 06:07 PM.

  2. #2
    Join Date
    Nov 2007
    Posts
    425
    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.

  3. #3
    Join Date
    Nov 2011
    Location
    Nigeria
    Posts
    28
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles