JavaScript - Greyed Dropdown Based On Radio Button Selection

Hi, i am building a website form which I would like the user to select a product of interest. Some products are three tiered and some are two tiered.

1. Example of three tier (3 dropdowns required only):
Scooters (dropdown 1)
Three Wheel Scooters (dropdown 2)
Delux 503S Bird Scooter (dropdown 3)

2. Example of two tier (2 dropdowns required only):
Standing Bikes (dropdown 1)
Children 300 Series (dropdown 2)

If the user wants to submit their interest for one of the products, I need to have at most 3 dropdown menus. So in Example 1, I would have 3 dropdowns in my form. Dropdown 1: Scooters Dropdown 2: Three Wheel Scooters Dropdown 3: Delux 503S Bird Scooter

In Example 2, I would only need to use the first 2 dropdown menus. (Obviously the first dropdown would contain 'Scooters' and 'Standing Bikes' in the menu list)

The below code is perfect except, I would like to alter the code so that the second and third dropdowns are hidden until a selection from the first drop down is made. Once for example, 'Standing Bikes' is selected from the first dropdown menu, the second dropdown menu appears and the third remains hidden due to the fact that it is not required. If I selected Scooters from the first dropdown menu, the second dropdown would appear listing all items associated with this and at this point the third dropdown menu is hidden. If i select 'Three Wheel Scooter' from the second dropdown the third dropdown menu now appears listing all Three wheel Scooters such as 'Delux 503S Bird Scooter'.

I hope this makes sense. Let me know if you require clarrification.

Here is the code:

Code:

<script language="JavaScript" type="text/javascript">
<!--

/*
*** Multiple dynamic combo boxes
*** by Mirko Elviro, 9 Mar 2005
*** Script featured and available on JavaScript Kit (http://www.javascriptkit.com)
***
***Please do not remove this comment
*/

// This script supports an unlimited number of linked combo boxed
// Their id must be "combo_0", "combo_1", "combo_2" etc.
// Here you have to put the data that will fill the combo boxes
// ie. data_2_1 will be the first option in the second combo box
// when the first combo box has the second option selected


// first combo box

	data_1 = new Option("1", "$");
	data_2 = new Option("2", "$$");

// second combo box

	data_1_1 = new Option("11", "-");
	data_1_2 = new Option("12", "-");
	data_2_1 = new Option("21", "--");
	data_2_2 = new Option("22", "--");
	data_2_3 = new Option("23", "--");
	data_2_4 = new Option("24", "--");
	data_2_5 = new Option("25", "--");

// third combo box

	data_1_1_1 = new Option("111", "*");
	data_1_1_2 = new Option("112", "*");
	data_1_1_3 = new Option("113", "*");
	data_1_2_1 = new Option("121", "*");
	data_1_2_2 = new Option("122", "*");
	data_1_2_3 = new Option("123", "*");
	data_1_2_4 = new Option("124", "*");
	data_2_1_1 = new Option("211", "**");
	data_2_1_2 = new Option("212", "**");
	data_2_2_1 = new Option("221", "**");
	data_2_2_2 = new Option("222", "**");
	data_2_3_1 = new Option("231", "***");
	data_2_3_2 = new Option("232", "***");

// fourth combo box

	data_2_2_1_1 = new Option("2211","%")
	data_2_2_1_2 = new Option("2212","%%")

// other parameters

    displaywhenempty=""
    valuewhenempty=-1

    displaywhennotempty="-select-"
    valuewhennotempty=0


function change(currentbox) {
	numb = currentbox.id.split("_");
	currentbox = numb[1];

    i=parseInt(currentbox)+1

// I empty all combo boxes following the current one

    while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
           (document.getElementById("combo_"+i)!=null)) {
         son = document.getElementById("combo_"+i);
	     // I empty all options except the first one (it isn't allowed)
	     for (m=son.options.length-1;m>0;m--) son.options[m]=null;
	     // I reset the first option
	     son.options[0]=new Option(displaywhenempty,valuewhenempty)
	     i=i+1
    }


// now I create the string with the "base" name ("stringa"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill

    stringa='data'
    i=0
    while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
           (document.getElementById("combo_"+i)!=null)) {
           eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
           if (i==currentbox) break;
           i=i+1
    }


// filling the "son" combo (if exists)

    following=parseInt(currentbox)+1

    if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
       (document.getElementById("combo_"+following)!=null)) {
       son = document.getElementById("combo_"+following);
       stringa=stringa+"_"
       i=0
       while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {

       // if there are no options, I empty the first option of the "son" combo
	   // otherwise I put "-select-" in it

	   	  if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
	   	      if (eval("typeof("+stringa+"1)=='undefined'"))
	   	         eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
	   	      else
	             eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
	      else
              eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
	      i=i+1
	   }
       //son.focus()
       i=1
       combostatus=''
       cstatus=stringa.split("_")
       while (cstatus[i]!=null) {
          combostatus=combostatus+cstatus[i]
          i=i+1
          }
       return combostatus;
    }
}

//-->
</script>

<form>
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
	<option value="value1">-select-</option>
	<option value="value2">1</option>
	<option value="value3">2</option>

</select>
<BR><BR>
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
	<option value="value1">  </option>
</select>
<BR><BR>
<select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
	<option value="value1">  </option>
</select>
<BR><BR>
<select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;">
	<option value="value1">  </option>

</select>

</form>

<p align="center">This free script provided by<br />
<a href="http://javascriptkit.com">JavaScript
Kit</a></p>

Hi,

On a registration form I have 4 fields that are all dropdown select fields. NAME, CLASS-1, CLASS-2, CODE

1) I would like to activate the CLASS-1, CLASS-2, CODE fields only if the NAME IS Selected from the dropdown.

2) Also would like to make the CLASS-1, CLASS-2 as required fields if the NAME is selected from the dropdown.

How can I achieve this? Can I use some kind of a server event to activate / deactivate the fields on the form? Please advice

Thanks
Vinny

Hi,

I am trying to use the radio button to display the information for the users. For example, when I click radio button "1", the form should display 1 text box each for first name, last name and so on. When the user clicks on radio button 2, there should be text boxes displayed for user 1 and user 2 to enter their info(first name, last name and so on).

I looked at the forum, but couldn't find something similiar.Please advise.



Something like
================================
Number of Users 1 2 3

# if radio button 2 is selected then

User 1
First Name
Last Name

User 2
First Name
Last Name

================================

The code is as below:

<html>
<head>
<script type="text/javascript">

function showUser()
{

for(i=0;i<document.form.users.length;i++)
{
if (document.form.users[i].checked)
val=parseInt(document.form.users[i].value);
for(j=0;j<=val;j++)
{
document.form.write("<table cellSpacing=1 cellPadding=0 width=600 border=0>");
document.form.write("<tr>
<td width='20%' align='right'><font color="#660000"><b>First Name:&nbsp;</b></font></td>");
document.form.write("<td><input type='text' name='fname1' size='25' maxlength='25'></td></tr>");
document.form.write("<tr><td width='20%' align='right'><font color="#660000"><b>Last Name:&nbsp;</b></font></td>");
document.form.write("<td><input type='text' name='lname1' size='25'maxlength='25'></td></tr>");
document.form.write("</table>");

}
}

}

</script>
</head>
<form>
Check the number of users to display additional input fields.<br><br>

<input type="radio" name="users" value="1" onclick = "showUser()"/> 1<br/>
<input type="radio" name="users" value="2" onclick = "showUser()"/>2 <br/>
<input type="radio" name="users" value="3" onclick = "showUser()"/>3 <br/>

</form>

</html>

========================================================
Thanks in advance.

I've got a function that returns the value of a radio button group. However the application allows to "hide" some groups on others responses and that effectively make the radio groups not exist. This causes issues with calculations using the total value of the groups combined. I need a way to return a value of '0.00' IF the function does not find the group/returns an error.This is what I currently got to but doesnt work. The function does not work at all.
Code:

function  funcRadioCalc(RadioName)
{
var chkList1= document.getElementById (RadioName);
var arrayOfCheckBoxes= chkList1.getElementsByTagName("input");
var bob;
try {
	for( var i=0;i<arrayOfCheckBoxes.length;i++){
		if (arrayOfCheckBoxes[i].checked) {
		bob= arrayOfCheckBoxes[i].value;
		if (bob!=undefined||bob!=""){
			throw "yep";
		}else{
			throw "nope";
		}
	}
}
catch (er){
	if(er=="nope")
    {
    	return "0.00";
    }
  if(er=="yep")
    {
		return bob;
	}
}
}

Hi,

I have two dropdown lists with the second one being dependent on the selection in the first.

Options in list 1:
1,3 or 4

List two should be enabled when 3 or 4 is selected in list 1.

So far so good, managed to get it to work with only one set of lists, but I actually have 18 of those sets in this form:

Code:

<select name="fw[$i]" id="fw[$i]">
<option value="1">FWH</option>
<option value="3">links</option>
<option value="4">rechts</option>
<option value="0" selected></option>
</select><br />
<select name="lie[$i]" id="lie[$i]" disabled="disabled" onchange="showBox($i,xxx);">
<option value="0" selected>---</option>
<option value="1">gut</option>
<option value="2">schlecht</option>
<option value="3">Strafschlag</option>
<option value="4">OB</option>
</select>

$i is my index generated by my PHP script and runs from 1 to 18.
Everything works just fine as long as the index is not in play. With the index my function breaks, most probably due to my inability to extract the second parameter (xxx above) from the selection field.

Here's my function, there could be something wrong there too with how exactly to specify the proper dropdown list to enable.

Code:

function showBox(field,val) {
		
if (val > 1) {		
var box = 'lie[' + field + ']';
document.form1.box.disabled == false;
}
else {
document.form1.box.disabled == true;
}
	
}

Finally, I'm not that adept in javascript programming, more like a trial and error guy, how has hit the wall with this problem.
Thanks in advance!
Joe

I would like to display one of two different <div> tags based on a radio button.

In essence, this would be the "basic" and "advanced" options as the user end. Can this be done easily or will it be complex?

I am a complete JS noob. I have been googling for hours trying to find a way to implement what I think is a simple thing - but alas my deadline is here, and I need to solve this and seek guidance from courteous experts!

In a nutshell I have a simple form that has radio buttons:

Code:

<p><input id="amount" name="amount" type="radio" value="125" />$125</p>
<p><input id="amount" name="amount" type="radio" value="75" />$75</p>
<p><input id="amount" name="amount" type="radio" value="50" />$50</p>
<p><input id="amount" name="amount" type="radio" value="25" />$25</p>
<p><input id="amount" name="amount" type="radio" value="other" /><input id="other_amount" name="other_amount" type="text" maxlength="7" style="width:100px;" /> Other ($10 minimum donation)</p>

The point of the form is to assign the value to "amount" for sending on to a paypal form.

The problem is, I need the value of "amount" to change (be assigned) if they chose "other". To take the value from the text input box "other_amount" and assign it to "amount" but only if they chose the 5th radio button.

I have some JS that I hacked together that checks to see if they chose the 5th radio button. attempts to assign the "other amount" to "amount" and then pops up an alert (only so I know the script is pushing the right value - wont be needed when complete.)

However, Even though the alert pops up with the proper "other_amount" as if it has been assigned properly, the data is not sent on properly I presume, as it is the only aspect of the paypal donation amount form that is not working or providing the next page with the right "amount" pre-determined.

Code:

<script type="text/javascript">
<!--

function get_radio_value()
{
if (document.donation.amount[4].checked)
	{
	document.getElementById('amount').value = document.donation.other_amount.value;
	alert(document.getElementById('amount').value);
	}
	
}
//-->
</script>

Help please!
Many thanks in advance!
Deadline agh!

Hi i have 2 radios :

what i need is once i choose the 1st radio i will get 1st DDL with folollwing element :

Orange
Apple
Kiwi


if i chose the 2nd radio i should have the 2nd DDL with :

Potato
Tomato
legume

?

thanks

Hi Guys,

I'm fairly new to Javascript and would be grateful for any help you can give me. I've had a search on Google and found a couple of potential solutions but nothing seems to work quite right for what I need.

Basically I have a form with several questions followed by Yes/No radio buttons. Dependent on which answer is given, I want to display a different message above the text box.

For example, if you answered 'no' to a certain question then the message above the text box would change to say "Please fill in additional information" or something along those lines.

Below is the HTML to give you an idea of what I mean.

Code:

<table>
<tr>
<td>&nbsp;</td>
<td><label class="bold">Yes</label></td>
<td><label class="bold">No</label></td>
</tr>
<tr>
<td><label for="property_q1"> - Is this your house?</label></td>

<td><input name="property_q1" id="property_q1" type="radio" value="Yes" /></td>

<td><input name="property_q1" id="property_q1" type="radio" value="No" /></td>
</tr>
</table>

<br />

<div id="fine">It's fine, don't worry about filling it in.</div>
<div id="fill" style="display:none">Please fill in the form below.</div>
<table>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><textarea name="info" id="info" cols="60" rows="5"></textarea></td>
</tr>
</table>
<input type="submit" />

I have a radio button that asks Does your URL exist or need to be purchased? and a drop down menu that lists different types of web projects (i.e. new website and website redesign).

What I'm trying to achieve is, if the user selects that the URL exists, I would like the drop down menu option new website to be removed from the list.

Form:
Code:

<form>
<input type="radio" name="website_status" value="exists"/> Exists
<input type="radio" name="website_status" value="purchase_required"/> Needs to be purchased

<select name="projects">
<option></option>
<option value="new_website">New Website</option>
<option value="website_redesign">Website Redesign</option>
</select>
</form>

JavaScript:
[CODE]
<script>
window.onload = initForms;

function initForms() {
for (var i=0; i<document.forms.length; i++) {
document.forms[i].onsubmit = function() {return validForm();}
}
}

function validForm() {
var inputarray = document.getElementsByTagName("input");
var selectarray = document.getElementsByTagName("select");
var textarea = document.getElementsByTagName("textarea");

if (inputarray[0].checked == true) {
selectarray[0].remove(options[1]);
return false;
}
</script>

I've been experimenting with this for the last couple hours and am getting nothing! Could someone please point me in the right direction?

Hello, I am completely new to HTML/JS/CSS, therefore I know very little.

I have two drop-down prompt controls with month names. One has just one value (say "July") and the other has all the months of the year ("January".."December"). The first prompt control is hidden on the page. How do I set the default selection of the second prompt control to the value present in the first prompt control? So, when the page is run, the second prompt control should automatically show "July".

I was reading up on the selectedIndex property (?), but I know that it won't work because I want Index 0 to be selected in the first control and Index 6 in the second, and I expect it to change every month (next month it will be index 7 that should be automatically selected).

If it matters, I am using IE8. Thanks!

hello

im attempting to display the output of the radio selection into the textbox.
For example, if the user selects 0-15 then display "Your age group is 0-15 years" in the text area.

i get the basic logic. i just dont understand how to display the value in the textbox. heres what i have so far if it will clarify my issue.

Code:

<html>
<head>
<title>lab 8</title>
<script language="javascript">
function textbox()
{
var i;
for(i = 0; i < form1.agegroup.length; i++)
      {
  
         if (form1.agegroup[i].checked)
		     alert("you picked " + form1.agegroup[i].value);
      }
}
</script>
</head>
<body>
 What is your age group?<br>
 <form name="form1">
	 <input type="radio" name="agegroup" value="0-15" checked>0-15<br>
	 <input type="radio" name="agegroup" value="16 to 20">16 to 20<br>
	 <input type="radio" name="agegroup" value="21 to 25">21 to 25<br>
	 <input type="radio" name="agegroup" value="26 to 35">26 to 3<br>
	 <input type="radio" name="agegroup" value="36 and up">36 and up<br>
	 <input type="button" value="submit" onclick="textbox();">
	 
<form name="form2"><textarea rows ="2">

</textarea>
</body>
</html>

btw i know the alert part is wrong. its there because im taking the code i previously had and changing it to display in a textbox instead of an alert.

thanks

Hey everyone, I have a simple html form that asks a user to select a state from a drop down list. Later, in the same form, there's a question that needs to display an image of the state they previously selected from the drop down menu. How can I accomplish this using javaScript?

Hi Guys,

I'm a new member, so hello all!
I'm ok at html/xhtml, but i know nothing about javascript, so hoping someone here can help!

Basically, I have a contact form on my website that offers 2 different types of contact: RSVP and Other.
these two types are available in a selection box.

What I want to happen is when the "RSVP" option is selected, the following options are displayed:
"Yes/No" radio buttons
"additional info" textarea

And when the "Other" option is selected, the following option is displayed:
"Message" text area

How can i make this happen?! i've tried searching the internet but I can't get anything i find to work. I can't even get the elements to hide!

At the moment, my form looks like this: -

Code:

<form method="POST" action="contact.php">
<table class="contact">
<tr>
<td>Name:</td>
<td><input type="text" name="name" size="20"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="email" size="20"></td>
</tr>
<tr>
<td>Contact Type:</td>
<td><select size="1" name="type">
<option value="rsvp" >RSVP</option>
<option value="other">Other</option></td>
</tr>
<tr>
<td colspan=2>&nbsp;</td>
</tr>

<div id="rsvp" style="display:none;">
<tr>
<td colspan=2><input type="radio" name="response" value="y"> Yes Please!</td>
</tr>
<tr>
<td colspan=2><input type="radio" name="response" value="n"> Sorry, but No. </td>
</tr>
<tr>
<td colspan=2>Additional Comments (Please include any special dietary requirements): </td>
</tr>
<tr>
<td colspan=2><textarea rows="5" name="rsvpmsg" cols="30"></textarea></td>
</tr>
</div>

<div id="other" style="display:none;">
<tr>
<td colspan=2>Message:</td>
</tr>
<tr>
<td colspan=2><textarea rows="9" name="othermsg" cols="30"></textarea></td>
</tr>
</div>

<tr>
<td>&nbsp;</td>
<td><input type="submit" value="Submit" name="submit"> &nbsp; <input type="reset" value="Reset" name="reset"></td>
</tr>
</table>
</form>

Please note, the style="display:none;" parts aren't even working

I appreciate any help you can give!

thanks!

I want to insert text to a textarea based on the selected text. It should insert tags like the buttons for posting on this form work. Ie: If 'bar' is selected, and I click 'b', then I get:

Code:

Foo bar frog

becomes: Code:

Foo <b>bar</b> frog

I found some code that works for firefox, but I need it to work in explorer as well.

Do you have any ideas or examples how to do this?

Here's the code I'm currently using. ( Works right in ff3. In IE7 it appends the tags at the end of the text. I want it to insert based on my selection. )

Usage: Code:

<a onclick="insertTags('<b>', '</b>', document.forms.formpost.text);return false;" href="javascript:void(0);">[ Bold ]</a>

insert function: Code:

<script type="text/javascript">
// Surrounds the selected text with text1 and text2.
function insertTags(text1, text2, textarea)
{
	// Can a text range be created?
	if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
	{
		var caretPos = textarea.caretPos, temp_length = caretPos.text.length;

		caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text1 + caretPos.text + text2 + ' ' : text1 + caretPos.text + text2;

		if (temp_length == 0)
		{
			caretPos.moveStart("character", -text2.length);
			caretPos.moveEnd("character", -text2.length);
			caretPos.select();
		}
		else
			textarea.focus(caretPos);
	}
	// Mozilla text range wrap.
	else if (typeof(textarea.selectionStart) != "undefined")
	{
		var begin = textarea.value.substr(0, textarea.selectionStart);
		var selection = textarea.value.substr(textarea.selectionStart, textarea.selectionEnd - textarea.selectionStart);
		var end = textarea.value.substr(textarea.selectionEnd);
		var newCursorPos = textarea.selectionStart;
		var scrollPos = textarea.scrollTop;

		textarea.value = begin + text1 + selection + text2 + end;

		if (textarea.setSelectionRange)
		{
			if (selection.length == 0)
				textarea.setSelectionRange(newCursorPos + text1.length, newCursorPos + text1.length);
			else
				textarea.setSelectionRange(newCursorPos, newCursorPos + text1.length + selection.length + text2.length);
			textarea.focus();
		}
		textarea.scrollTop = scrollPos;
	}
	// Just put them on the end, then.
	else
	{
		textarea.value += text1 + text2;
		textarea.focus(textarea.value.length - 1);
	}
}
</script>