Page 1 of 1
Country select: if "other" is selected display a t
Posted: Sat Jun 23, 2007 9:21 am
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.
Posted: Sat Jun 23, 2007 9:36 am
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;" />
Posted: Sat Jun 23, 2007 9:46 am
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
ill let you know how it goes

Posted: Sat Jun 23, 2007 10:03 am
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

Posted: Sat Jun 23, 2007 10:28 am
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.
Posted: Sat Jun 23, 2007 10:56 am
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

Posted: Sat Jun 23, 2007 11:38 am
by superdezign
.Stealth wrote:didnt even know a "for" attribute existed

Only on <label>.