...

View Full Version : Radio button that when clicked will display dropdown list



Dannii
07-06-2012, 09:13 PM
I have created a dropdown list that will display a textbox when I click on blank. I am trying to figure out how to show/hide the dropdown box until I click a radio button. Any help would be appreciated. (this is what I have so far)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<script type="text/javascript" charset="utf-8">
function checkForBlank(obj) {
if (!document.layers) {
var txt = document.getElementById("blankWaiver");
if (obj.value == "blank") {
txt.style.display = "inline";
// gives the text field the name of the drop-down, for easy processing
txt.name = "selWaiver";
obj.name = "";
} else {
txt.style.display = "none";
txt.name = "";
obj.name = "selWaiver";
}
}
}
</script>

<form name="frm1" method="POST" action="">

<select name="selWaiver" id="waivers" onchange="checkForBlank(this)">
<option value="Reason">Reason</option>
<option value="New Reason">New Reason</option>
<option value="blank">Blank</option>
</select>
<p>
<input type="text" id="blankWaiver" style="display:none;">
</p>
</form>

</body>
</html>

Old Pedant
07-06-2012, 10:53 PM
What radio button? And normally radio buttons occur in groups of two or more. For a single field, a checkbox is usually better. (You can't un-check a radio button.)

Dannii
07-06-2012, 11:18 PM
What radio button? And normally radio buttons occur in groups of two or more. For a single field, a checkbox is usually better. (You can't un-check a radio button.)
I am very new, actually I've never written javascript before, but I'm working with a group of students and they assigned me a section that uses a radio button that displays a dropdown list when the blank option is selected a text box is suppose to display. I'm just trying to figure out how to write the code to do this. I also did notice that checking a radio button cannot be unchecked but that is what the group wanted. Here is the code I have for the dropdown list to display when I click the radio button but I'm having problems figuring out how to display a textbox when the blank option is selected.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css" media="screen">
.hide{
display:none;
}
</style>
</head>
<body>
<form name="frm1" method="POST" action="">
<p>Select type of exception:<br />
<div id="tabs">
<div id="nav">
Waiver:<input type="radio" name="tab" value="pickfrom" class="div1" />

</div>

<div id="div1" class="tab"><br />
<label>Reason for Waiver</label>
<select name="selWaiver" id="waivers" onchange=checkForBlank(this)">
<option value="reason">Reason</option>
<option value="newReason">New Reason</option>
<option value="blank">Blank</option>
</select>

</div>

</div>
<script type="text/javascript" charset="utf-8">
(function(){
var tabs =document.getElementById('tabs');
var nav = tabs.getElementsByTagName('input');
/*
* Hide all tabs
*/
function hideTabs(){
var tab = tabs.getElementsByTagName('div');
for(var i=0;i<=nav.length;i++){
if(tab[i].className == 'tab'){
tab[i].className = tab[i].className + ' hide';
} }
}
/*
* Show the clicked tab
*/
function showTab(tab){
document.getElementById(tab).className = 'tab'
}
hideTabs(); /* hide tabs on load */
/*
* Add click events
*/
for(var i=0;i<nav.length;i++){
nav[i].onclick = function(){
hideTabs();
showTab(this.className);
}
}
})();
</script>
</form>
</body>
</html>

Old Pedant
07-07-2012, 01:25 AM
This just seems SO wrong:


<p>Select type of exception:<br />
<div id="tabs">
<div id="nav">
Waiver:<input type="radio" name="tab" value="pickfrom" class="div1" />

How can a person select a "type of exception" if they are then give only one choice? "Waiver"????

Aren't there any other choices?

Dannii
07-07-2012, 02:17 AM
This just seems SO wrong:


<p>Select type of exception:<br />
<div id="tabs">
<div id="nav">
Waiver:<input type="radio" name="tab" value="pickfrom" class="div1" />

How can a person select a "type of exception" if they are then give only one choice? "Waiver"????

Aren't there any other choices?
No, according to the instructions given to me that was my only option. I'm frustrated, since I've read that radio buttons are grouped with each button having a different function/option. I'm only to create one radio button that displays the drop down for the waiver and a text box that displays when blank is clicked. just not sure how to get the textbox to display when I click blank option(for the one bit of code) or create radio button to display the dropdown (for the other bit of code)

Old Pedant
07-07-2012, 07:16 AM
Okay...it seems nutso to me, but...



<form ...>
...
Waiver:<input type="radio" id="tab1" name="tab" value="pickfrom" class="div1" />
<div id="div1" class="tab"><br />
<label>Reason for Waiver</label>
<select name="selWaiver" id="waivers">
<option value="reason">Reason</option>
<option value="newReason">New Reason</option>
<option value="blank">Blank</option>
</select>
<input type="text" id="blankWaiver" style="display:none;">
...
<script type="text/javascript">
( function()
{
document.getElementById("tab1").onclick =
function() {
document.getElementById("div1").style.display = this.checked ? "block" : "none";
}; // end of onclick function
document.getElementById("waivers").onchange =
function() {
var txt = document.getElementById("blankWaiver");
if ( this.value == "blank" )
{
txt.name = "selWaiver";
this.name = "";
txt.style.display = "inline";
} else {
txt.name = "";
this.name = "selWaiver";
txt.style.display = "none";
}
}; // end of onchange function
}
)();
</script>


But it's still dumb as a doornail.

Dannii
07-07-2012, 09:34 PM
Thanks Old Pedant, I'm still trying to figure out how to hide the dropdown list until the radio button is clicked. : )

Old Pedant
07-08-2012, 09:44 AM
Trivial.

I just forgot to do that.


Waiver:<input type="radio" id="tab1" name="tab" value="pickfrom" class="div1" />
<div id="div1" class="tab" style="display: none;"><br />
<label>Reason for Waiver</label>
<select name="selWaiver" id="waivers">
<option value="reason">Reason</option>
<option value="newReason">New Reason</option>
<option value="blank">Blank</option>
</select>
<input type="text" id="blankWaiver" style="display:none;">
</div>

Omissions from before shown in red.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum