Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Drop down & Radio buttons

Posted on 2003-11-25
6
740 Views
Last Modified: 2010-04-09
Hi,
     I am a small problem in HTML.
     I am a radio button & when one checks that button, he is supposed to enter some data from 3 drop down boxes & then proceed.
     But my requirement is such that unless that radio button is checked, the dropdown box is inactive, meaning the no data in the drop down can be viewed or selected. Only when the radio buttons r selected are the drop down data available for viewing & selection.
     Can anyone suggest a way out !
0
Comment
Question by:medebayan
  • 3
  • 2
6 Comments
 
LVL 8

Expert Comment

by:xabi
ID: 9823128
What about this?

<html>
<head>
<title>Sample</title>
</head>
<body>
<form name="myform">
<input type="checkbox" name="mycheck" onclick="this.form.myselect.disabled=!this.checked"><br>
<select name="myselect" disabled>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
</form>
</body>
</html>

xabi
0
 

Author Comment

by:medebayan
ID: 9823211
I don't think this will solve my problem.
Firstly, there r 2 RADIO BUTTONS. One when selected needs inputs from drop downs, which are populated from the database.
Now, mayb u can provide me with an accurate solution !
0
 
LVL 7

Expert Comment

by:gam3r_3xtr3m3
ID: 9823613
dynamically, here's a solution:

<script language="JavaScript" type="text/javascript">
function enableSelect(){
if(document.theform.selectbox.disabled=true){
document.theform.selectbox.disabled=false;}}
</script>
<body>
<form name="theform">
<input type="radio" onClick="enableSelect();" name="radio1" value="Selection #2">Selection #1<br />
<input type="radio" onClick="enableSelect();" name="radio1" value="Selection #2">Selection #2<br />
<select name="selectbox" disabled="disabled">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
</body>
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 7

Accepted Solution

by:
gam3r_3xtr3m3 earned 70 total points
ID: 9823676
OR if your doing a confirmation dynamically like this...:

<html>
<head>
<title>2 radio buttons and a checkbox!</title>
<script language="JavaScript" type="text/javascript">
function checkStat(){
if(document.theform.radio1.checked="undefined"){
alert("Please select a choice!"); return false;}}
function enableSelect(){
if(document.theform.selectbox.disabled=true){
document.theform.selectbox.disabled=false;}
if(document.theform.sbmtbtn.disabled=true){
document.theform.sbmtbtn.disabled=false;}}
function disableSelect(){document.theform.selectbox.disabled=true;}
</script>
</head>
<body>
<div align="center">
<form name="theform" onSubmit="return checkStat();">
<input type="radio" onClick="enableSelect();" name="radio1" value="y" />Add to Database<br />
<input type="radio" onClick="disableSelect();" name="radio1" value="n" />Don't do anything<br />
<select name="selectbox" disabled="disabled">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
<br /><input type="submit" name="sbmtbtn" value="submit" disabled="disabled" />
</div>
</body>
</html>
0
 
LVL 7

Expert Comment

by:gam3r_3xtr3m3
ID: 9823710
lol... i got the title wrong, the coding wrong and i forgot to take of my test checkStat(); function. Too much VB for me. lol... here's mabye a set of all you need:

<html>
<head>
<title>2 radio buttons and a option box!</title>
<script language="JavaScript" type="text/javascript">
var cont1=null;
function loadStat(){
if(document.theform.radio1.selected==true){enableSelect();}}
function checkStat(){
if(cont1=="y"){
alert("Select a database!");return false;}}
function enableSelect(){
cont1="y";
if(document.theform.selectbox.disabled==true){
document.theform.selectbox.disabled=false;}
if(document.theform.sbmtbtn.disabled==true){
document.theform.sbmtbtn.disabled=false;}}
function disableSelect(){
cont1="n";
if(document.theform.selectbox.disabled==false){
document.theform.selectbox.disabled=true;}
if(document.theform.sbmtbtn.disabled==true){
document.theform.sbmtbtn.disabled=false;}}
</script>
</head>
<body onLoad="loadStat();">
<div align="center">
<form name="theform" onSubmit="return checkStat();">
<input type="radio" onClick="enableSelect();" name="radio1" value="y" />Add to Database<br />
<input type="radio" onClick="disableSelect();" name="radio1" value="n" />Don't do anything<br />
<select name="selectbox" disabled="disabled">
<option>Please select one...</option>
<option value="db1">database 1</option>
<option value="db2">database 2</option>
<option value="db3">database 3</option>
</select>
<br /><input type="submit" name="sbmtbtn" value="Submit" disabled="disabled" />
</div>
</body>
</html>
0
 

Author Comment

by:medebayan
ID: 9823763
Thanx a lot ! This should serve my need..
0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
This article discusses how to create an extensible mechanism for linked drop downs.
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 Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

837 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