Country select: if "other" is selected display a t

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
.Stealth
Forum Commoner
Posts: 57
Joined: Wed Jan 10, 2007 12:15 pm
Location: Manchester, England

Country select: if "other" is selected display a t

Post by .Stealth »

Hi, im just stuck with something here.

what i want to do is, on my registration form i have a country selection box listing the main country i expect my user to be from, it looks like this:

Code: Select all

  		<label>Select Your Country<br />
	  		<select name="Country" style="width:150px;">
	  			<option value="United Kingdom"  selected="selected">United Kingdom</option>
				<option value="United States">United States</option> 
				<option value="Canada">Canada</option> 
				<option value="Ireland" >Ireland</option>
				<option value="Australia" >Australia</option>
				<option value="New Zealand" >New Zealand</option>
				<option value="Other" >Other</option>
			</select>
		</label><br /><br />
What i want to do is, when they select other, a textbox will either appear or become active, so when the users selects the United Kingdom, the mentioned text box wont be visible or the user wont be able to type in it, but if they select other, it will become active.

im guessing i will need to use javascript for this but i dont know that so could anybody possibly point me in the right direction to do this?

thanks.
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Post by jayshields »

Add an onChange event to your select element which fires some javascript which will check if the value of the select element is set to other, if it is, change the visibility of the text box to true.

Code: Select all

<script type="text/javascript">
function toggleTextBox(textbox) {
	if(document.getElementById('country').value == 'other') {
		document.getElementById(textbox).style.display = '';
	} else {
		document.getElementById(textbox).style.display = 'none';
	}
}
</script>

<select name="country" id="country" onChange="toggleTextBox('otherbox');">
	<option value="uk">UK</option>
	<option value="other">other</option>
</select>
<input type="text" name="otherbox" id="otherbox" style="display:none;" />
.Stealth
Forum Commoner
Posts: 57
Joined: Wed Jan 10, 2007 12:15 pm
Location: Manchester, England

Post by .Stealth »

thanks for that, i'll give it a go, before you posted that code i was looking on google for an onChange script to match my needs but there is nothing :o

ill let you know how it goes :D
.Stealth
Forum Commoner
Posts: 57
Joined: Wed Jan 10, 2007 12:15 pm
Location: Manchester, England

Post by .Stealth »

wow i like that, javascript is pretty usefull, always thought it was bad but it works for me.

changed it a little bit after working out what everything does:

Code: Select all

<script type="text/javascript">
function toggleTextBox(textbox) {
        if(document.getElementById('country').value == 'other') {
                document.getElementById(textbox).style.display = '';
        } else {
                document.getElementById(textbox).style.display = 'none';
        }
}
</script>

  		<label>Select Your Country<br />
	  		<select id="country" name="Country" onChange="toggleTextBox('other');" style="width:190px;">
	  			<option value="United Kingdom"  selected="selected">United Kingdom</option>
				<option value="United States">United States</option> 
				<option value="Canada">Canada</option> 
				<option value="Ireland" >Ireland</option>
				<option value="Australia" >Australia</option>
				<option value="New Zealand" >New Zealand</option>
				<option value="other" >Other</option>
			</select>
		</label></select>
<label id="other" style="display:none;">Please State:
<input type="text" name="other" id="other" />
</label><br /><br />
thanks alot for your help jay :D
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Whoa whoa whoa. No no no.

You can't give the label and the input the same id. You can't ever give two elements the same id. Id's are for identifying specific elements. Do this instead:

Code: Select all

<div id="other" style="display:none;">
    <label for="other">Please State:</label>
    <input type="text" name="other" />
</div>
Also, I'm not a fan of inline styles or inline JavaScript event handlers. You don't have to change them as they are still semantically correct, but the snippet I just gave you should be used. Giving two elements the same id is against the rules.
.Stealth
Forum Commoner
Posts: 57
Joined: Wed Jan 10, 2007 12:15 pm
Location: Manchester, England

Post by .Stealth »

superdezign wrote:Whoa whoa whoa. No no no.

You can't give the label and the input the same id. You can't ever give two elements the same id. Id's are for identifying specific elements. Do this instead:

Code: Select all

<div id="other" style="display:none;">
    <label for="other">Please State:</label>
    <input type="text" name="other" />
</div>
Also, I'm not a fan of inline styles or inline JavaScript event handlers. You don't have to change them as they are still semantically correct, but the snippet I just gave you should be used. Giving two elements the same id is against the rules.
woops lol, thanks.

didnt even know a "for" attribute existed :roll:
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

.Stealth wrote:didnt even know a "for" attribute existed :roll:
Only on <label>.
Post Reply