JavaScript - Hiding Dropdown Menus Based On Selection

Hello,

I REALLY like the dropdown menus that are on the Patagonia website. How difficult would this be to replicate? Is there a write-up or tutorial somewhere I can read and learn how to do this?

Any help would be greatly appreciated,
Thanks

Here is the link:

http://www.patagonia.com/web/us/home

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!

Hi there, im new to the forum and currently in the process of building a website.
Unfortunetly it needs a little javascript putting in and I dont know any javascript atall.

So heres my problem:
--------------------

I want 3 drop down menus where
you change the top option, the middle menu updates (from a sql database),
you change the middle option then the bottom option updates (again from the database).
you select the 3rd option.
it searches a database for the item matching all 3 entrys
it displays the price

all without reloading the page

then you add the item to cart.

------------
Heres my site with fake data in the dropdowns:
http://xeon.donov.co.uk/~blinky/?a=cat_sub&cid=3&f=A3

hi,

I am making a driving map which shows lines on the map based on point of departure and destination. It's working fine he http://www.xelawho.com/map/drive2.htm

but what I would like to do is instead of having all the sidebar checkbox business, just to have two dropdown boxes - one for "from" and one for "to".

I have seen plenty of these around but my problem is that my data comes from an xml file, so I guess the menus would have to be populated by loops. The other problem being that not every departure point goes to every destination, so the second menu would have to be populated dynamically depending on the option chosen in the first...

does anybody have any ideas how I would do this?

thanks in advance.

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>

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!

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?

Is it possible to pull multiple variables from a single dropdown menu selection?

example:
I have this:
Code:

function material_choices_menu() /* Provides Specific Gravity for various materials */
{
var data = "Material <select name='material'>";
data += "<option value='.926'>CYCOLAC MG47 (ABS)<\/option>";
data += "<option value='1.050'>CYCOLAC MG47MD (ABS)<\/option>";
data += "<option value='.958'>CYCOLAC T (ABS)<\/option>"; 
data += "<\/select>";
document.write(data);
}

I'd like to have multiple option values:
Code:

function material_choices_menu() /* Provides Specific Gravity for various materials */
{
var data = "Material <select name='material'>";
data += "<option value1='.926', option value2='.005-.008'>CYCOLAC MG47 (ABS)<\/option>";
data += "<option value1='1.050', option value2='.005-.008'>CYCOLAC MG47MD (ABS)<\/option>";
data += "<option value1='.958', option value2='.005-.008'>CYCOLAC T (ABS)<\/option>"; 
data += "<\/select>";
document.write(data);
}

I plan to use the first value in some math formulas to determine weights and the rest of the values will just be shown as data for the user and/or possibly a link to the datasheet for the material selected.

Is this possible or am I reaching here?

Is there such a thing as a dropdown menu that works in all browsers? (or at least all the commonly used ones)... Is JavaScript a good way to go? and if yes, are there any precoded templates available that are fairly straightforward to integrate and adapt for dropdowns?

i want to validate against the dropdown fields below name usrchoices which repeat depends upon the data records from database...so if there is 5 questions retrieved from the database then the 5 dropdowns appears with name usrchoices, i don't know how to validate all these fields...so please any one here fix the following code and send me....Thanks a Million

<script language="JavaScript"><!--
function validating(validate) {
**if (form.usrchoices.selectedIndex == 0) {
****alert('Please select all Questions');
****document.getElementById("validate").reset();
*
****return false;

**}
**return true;
}
//--></script>

<form action="submitsurvey.asp" method="post" name="validate" id="validate" onSubmit="return validating()">
<% Do while Recordset_questions.EOF %>
****<select name="usrchoices" id="usrchoices">
**********<option value="" selected>Select Choices</option>
**********<option value="Y">Yes</option>
**********<option value="N">No</option>
**********<option value="IDK">I Dont know</option>
********</select>
<%Loop%>
</form>

Hi Everyone,

I'm encountering errors with a form I have created. I feel confident that the issue is with my JS validation form because when I allow the form to submit without validating any of the fields, my php processor correctly uploads all the content into my database (but, I will need the form validation to prevent the user from skipping fields).

The issue (I believe) is with IE. In IE, both drop-downs seem to populate correctly but when I submit the form, I get a prompt to make a selection for the first drop-down menu.

The form does submit properly in FireFox and Safari but with some testing I noticed that I was getting a prompt to make a selection in the first drop-down in instances where a selection was already made but I just had not yet populated the second country/state drop-down.

Still, in Firefox and Safari, the form does pass validation upon submit.. So, I am hoping it's just IE specific issue.

I'm thinking the issue is with IE not recognizing my selection. The form had a drop-down menu where the user selects a letter, then that selection triggers (in JS using a function to process the selection) another drop-down to populate with all the countries or states that begin with the letter from the first selection.

Here is the code from my form:

Code:

<p><span class="title">Sign Up</span></p>
            <br />
   		 <form id = "signupForm" action="signup_process.php" method = "post" onsubmit="return validateSignupForm();">
      	  <p>All required fields are marked with ( <span class = "requiredStar">*</span> )</p>
          <br />
           <p><label for="first_name">First Name: <span class = "requiredStar">*</span></label></p>
          <div class = "contactRight"><input type="text" name="first_name" id="first_name" style="height: 20px;" size="30" tabindex="1" maxlength="30" /></div>
          <br />
          <p><label for="last_name">Last Name: <span class = "requiredStar">*</span></label></p>
          <div class = "contactRight"><input type="text" name="last_name" id="last_name" style="height: 20px;" size="30" tabindex="2" maxlength="30" /></div>
          <br />
          <p><label for="countryLtr">Select the first letter of your country: <span class = "requiredStar">*</span></label></p>
          <select id="countryLtr" name="countryLtr" id="countryLtr" size="1" tabindex="3" onchange="processSelection()">
          		<option value=""></option>
                        <option value="USA">USA</option>
                        <option value="A">A</option>
          		<option value="B">B</option>
          		<option value="C">C</option>
          		<option value="D">D</option>
          		<option value="E">E</option>
          		<option value="F">F</option>
          		<option value="G">G</option>
          		<option value="H">H</option>
          		<option value="I">I</option>
          		<option value="J">J</option>
          		<option value="K">K</option>
        		<option value="L">L</option>
         		<option value="M">M</option>
         		<option value="N">N</option>
          		<option value="O">O</option>
          		<option value="P">P</option>
          		<option value="Q">Q</option>
          		<option value="R">R</option>
          		<option value="S">S</option>
          		<option value="T">T</option>
          		<option value="U">U</option>
          		<option value="V">V</option>
          		<option value="W">W</option>
          		<option value="Y">Y</option>
          		<option value="Z">Z</option>
                </select>
          <br />
          <br />
          <p><label for="countryState">Select your country/ state (if USA): <span class = "requiredStar">*</span></label></p>
          <select id="countryState" name="countryState" id="countryState" size="1" tabindex="4">
          </select>
          <br />
          <br />
          <p><label for="username">Create a username: <span class = "requiredStar">*</span></label></p>
          <div class = "contactRight"><input type="text" name="username" id="username" style="height: 20px;" size="30" tabindex="5" maxlength="30" /></div>
          <br />
          <p><label for="email">Email: <span class = "requiredStar">*</span></label></p>
          <div class = "contactRight"><input type="text" name="email" id="email" style="height: 20px;" size="30" tabindex="6" maxlength="30" /></div>
          <br />
          <p><label for="password">Create a password: <span class = "requiredStar">*</span></label></p>
          <div class = "contactRight"><input type="password" name="password" id="password" style="height: 20px;" size="30" tabindex="7" maxlength="30" /></div>
          <br />
 		  <br />
		  <input type="hidden" name="source" value="12345">
          <input type="image" name="submit" value="Submit" class="submitButton" src="images/submit-button.png" />
          <input type="image" name="reset" value="Reset" class="resetButton" src="images/reset-button.png" />
          <br />
   		 </form>

and here is the code for processing the selection of the first drop-down and populating the second drop-down (I reduced the number of options for the countries to save on characters for this post):


Code:

function processSelection() {
	
	choice1 = document.getElementById("countryLtr");
	choice2 = document.getElementById("countryState");
	
	choice2.length = 0;

	if (choice1.value == "USA") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Alaska");
		choice2[choice2.length] = new Option("American Samoa");
		choice2[choice2.length] = new Option("Arizona");
		choice2[choice2.length] = new Option("Arkansas");
		choice2[choice2.length] = new Option("California");
		choice2[choice2.length] = new Option("Colorado");
		choice2[choice2.length] = new Option("Connecticut");
		choice2[choice2.length] = new Option("Delaware");
		choice2[choice2.length] = new Option("District of Columbia");
		choice2[choice2.length] = new Option("Florida");
		choice2[choice2.length] = new Option("Georgia");
		choice2[choice2.length] = new Option("Guam");
		choice2[choice2.length] = new Option("Hawaii");
		choice2[choice2.length] = new Option("Idaho");
		choice2[choice2.length] = new Option("Illinois");
		choice2[choice2.length] = new Option("Indiana");
		choice2[choice2.length] = new Option("Iowa");
		choice2[choice2.length] = new Option("Kansas");
		choice2[choice2.length] = new Option("Kentucky");
		choice2[choice2.length] = new Option("Louisiana");
		choice2[choice2.length] = new Option("Maine");
		choice2[choice2.length] = new Option("Maryland");
		choice2[choice2.length] = new Option("Massachusetts");
		choice2[choice2.length] = new Option("Michigan");
		choice2[choice2.length] = new Option("Minnesota");
		choice2[choice2.length] = new Option("Mississippi");
		choice2[choice2.length] = new Option("Missouri");
		choice2[choice2.length] = new Option("Montana");
		choice2[choice2.length] = new Option("Nebraska");
		choice2[choice2.length] = new Option("Nevada");
		choice2[choice2.length] = new Option("New Hampshire");
		choice2[choice2.length] = new Option("New Jersey");
		choice2[choice2.length] = new Option("New Mexico");
		choice2[choice2.length] = new Option("New York");
		choice2[choice2.length] = new Option("North Carolina");
		choice2[choice2.length] = new Option("North Dakota");
		choice2[choice2.length] = new Option("Northern Marianas Islands");
		choice2[choice2.length] = new Option("Ohio");
		choice2[choice2.length] = new Option("Oklahoma");
		choice2[choice2.length] = new Option("Oregon");
		choice2[choice2.length] = new Option("Pennsylvania");
		choice2[choice2.length] = new Option("Puerto Rico");
		choice2[choice2.length] = new Option("Rhode Island");
		choice2[choice2.length] = new Option("South Carolina");
		choice2[choice2.length] = new Option("South Dakota");
		choice2[choice2.length] = new Option("Tennessee");
		choice2[choice2.length] = new Option("Texas");
		choice2[choice2.length] = new Option("Utah");
		choice2[choice2.length] = new Option("Vermont");
		choice2[choice2.length] = new Option("Virginia");
		choice2[choice2.length] = new Option("Virgin Islands");
		choice2[choice2.length] = new Option("Washington");
		choice2[choice2.length] = new Option("West Virginia");
		choice2[choice2.length] = new Option("Wisconsin");
		choice2[choice2.length] = new Option("Wyoming"); 
	
	} else if (choice1.value == "A") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Azerbaijan");
	
	} else if (choice1.value == "B") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("The Bahamas");
		
	} else if (choice1.value == "C") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Czech Republic");
	
	} else if (choice1.value == "D") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Denmark");
	
	} else if (choice1.value == "E") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Ecuador");
	
	}  else if (choice1.value == "G") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Gabon");
	
	}  else if (choice1.value == "H") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Haiti"); 
	
	}  else if (choice1.value == "I") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Iceland"); 
	
	}  else if (choice1.value == "J") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Jamaica"); 
	
	}  else if (choice1.value == "K") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Kazakhstan");
	
	}  else if (choice1.value == "L") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Laos");  
	
	}   else if (choice1.value == "M") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Macau"); 
	
	}   else if (choice1.value == "N") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Namibia"); 
	
	}  else if (choice1.value == "O") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Oman");    
	
	}  else if (choice1.value == "P") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Pakistan"); 
	
	}  else if (choice1.value == "Q") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Qatar");  
	
	}  else if (choice1.value == "R") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Reunion");  
	
	}  else if (choice1.value == "S") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Saint Helena"); 
	
	}  else if (choice1.value == "T") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Taiwan"); 
	
	}  else if (choice1.value == "U") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Uganda"); 
	
	}  else if (choice1.value == "V") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Vanuatu");  
	
	}  else if (choice1.value == "W") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Wake Island");  
	
	}  else if (choice1.value == "Y") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Yemen");   
	
	}  else if (choice1.value == "Z") {
		
		choice2[choice2.length] = new Option("");
		choice2[choice2.length] = new Option("Zambia"); 
	}


}

Here is the code for validating the form upon submission:

Code:

function validateRequestForm() {
	
	var theForm = document.getElementById("requestForm"); //form reference
	var valid = true; //flag, must be true to proceed
	
	if (theForm.name.value == "") {
			
			alert ("Please enter a name");
			valid = false;
			theForm.username.focus();
	
	
	} else if (theForm.countryLtr.value == "") {
	
			
			alert ("Please select the first letter of your country");
			valid = false;
			theForm.countryLtr.focus();
	
	
	} else if (theForm.countryState.value == "") {
	
			
			alert ("Please select your country. If USA, please select your state");
			valid = false;
			theForm.countryState.focus();
	
	
	} else if (theForm.email.value == "") {
	
			
			alert ("Please enter your email address");
			valid = false;
			theForm.email.focus();
	
	
	} else if (theForm.title.value == "") {
		
			
			alert ("Please enter a title for your request");
			valid = false;
			theForm.title.focus();
	
	
	} else if (theForm.request.value == "") {
	
			
			alert ("Please enter your request");
			valid = false;
			theForm.request.focus();
	
	
	} if (valid == true) {
			
				alert ("Thank you for your prayer request. Your request has been submitted for review. Please check your account to see the status of your prayer request. You may also check recent requests to view your request after it has been posted.");
				return true; //submit form
	
	} else {
				return false; //form invalid
	}
}

I'm totally stumped as to what could be going on in IE that is not allowing the form to pass JS validation.. Any help would be greatly appreciated!! Thanks!

Need a javascript function...

If a checkbox is checked, then corresponding dropdown selection is must...

Please help me with this...

Thanks
Reply With Quote

Hello,

I would like to know how can I send the selection from a dropdown from a webpage to another. In the first page where I have the dropdown list, I have this:

Code:

<td valign="top" align="left" nowrap width="90%">
<input name="time" style="width:100%" />
</td>	
	
<td valign="top" align="left" nowrap width="50">
           <select name="time2">
	    <option value="60">Minutes</option>
	    <option value="3600">Hour</option>
	    <option value="86400">Days</option>
	</select>
           </td>

In the second page, where I want this selection to be dispalyed, I created this code:
Code:

<td width="188" valign="top" align="left" nowrap>
<SCRIPT LANGUAGE="JavaScript">document.write(window.opener.document.form.elements["time"].value + " " + window.opener.document.form.elements["time2"].value);</SCRIPT>
				</td>

The issue I have with this is that the value dispalyed for the "time2" element is the actual attribute value (for instance 60) and not the actual value (for instance "Minutes").

If anyone have a clue what I'm doing wrong, I appreciate your help.

Regards,

I have a long list consisting of a name and associated number, like this:
SITE01 2111
SITE02 4567
SITE03 5555
and so on.

I would like to put two dropdown boxes where the user can select either the name or the number. Then based upon the users selection have both the name and number appear. I'm thinking of putting all the data in an array and using the dropdowns to query the array. That sounds good but I'm new to javascript and a detailed example of how to do this would be needed, if its even the right approach to take to accomplish this.