/    Sign up×
Community /Pin to ProfileBookmark

If Other is selected a text field becomes required

Copy linkTweet thisAlerts:
Jun 02.2010

Hi there

I’ve seen this many times and now find the need for it. I’m doing an htm form and one of the requirements is that if someone doesn’t live in any of the city options, they can select ‘other’ but then are required to fill in a text field stating where they live, eg:

[CODE]<table>
<tr>
<td>Location</td>
<td><select size=”1″ name=”Location”>
<option>*** SELECT ***</option>
<option value=”London”>London</option>
<option value=”Paris”>Paris</option>
<option value=”Tokyo”>Tokyo</option>
<option value=”Other”>Other</option>
</select></td>
<td colspan=”4″>
If OTHER, please specify
<input type=”text” name=”Other_Location” size=”30″></td>
</tr>
</table>[/CODE]

Not sure if this needs to be done in javascript. Any help would be appreciated ?

Thanks
M

to post a comment
JavaScript

15 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangJun 02.2010 — &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;title&gt;&lt;/title&gt;

&lt;script type="text/javascript"&gt;
window.onload=function() {
var other = document.getElementById('other');;
other.style.display = 'none';
document.getElementsByName('Location')[0].onchange = function() {other.style.display = (this.value=='Other')? '' : 'none'};
};
&lt;/script&gt;

&lt;style type="text/css"&gt;
* {margin:0;padding:0;}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;td&gt;Location&lt;/td&gt;
&lt;td&gt;&lt;select size="1" name="Location"&gt;
&lt;option&gt;*** SELECT ***&lt;/option&gt;
&lt;option value="London"&gt;London&lt;/option&gt;
&lt;option value="Paris"&gt;Paris&lt;/option&gt;
&lt;option value="Tokyo"&gt;Tokyo&lt;/option&gt;
&lt;option value="Other"&gt;Other&lt;/option&gt;
&lt;/select&gt;&lt;/td&gt;
&lt;td colspan="4"&gt;
&lt;label id="other"&gt;If OTHER, please specify
&lt;input type="text" name="Other_Location" size="30"&gt;&lt;/label&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@MozieauthorJun 02.2010 — THIS iS GREAT Thanks?

Just wondering if I want to have 2 of thesse dropdowns, how would it be, like this doesn't work:

[CODE]
<script type="text/javascript">
window.onload=function() {
var otherlocation = document.getElementById('otherlocation');;
otherlocation.style.display = 'none';
document.getElementsByName('Location')[0].onchange = function() {otherlocation.style.display = (this.value=='otherlocation')? '' : 'none'};
}
[B]</script>
<script type="text/javascript">[/B]
window.onload=function() {
var otheremployer = document.getElementById('otheremployer');;
otheremployer.style.display = 'none';
document.getElementsByName('Employer')[0].onchange = function() {otheremployer.style.display = (this.value=='otheremployer')? '' : 'none'};
}
</script>


<style type="text/css">
* {margin:0;padding:0;}
</style>
[/CODE]
Copy linkTweet thisAlerts:
@FangJun 02.2010 — &lt;script type="text/javascript"&gt;
window.onload=function() {
var otheremployer = document.getElementById('otheremployer');;
otheremployer.style.display = 'none';
var otherlocation = document.getElementById('otherlocation');;
otherlocation.style.display = 'none';
document.getElementsByName('Location')[0].onchange = function() {otherlocation.style.display = (this.value=='otherlocation')? '' : 'none'};
document.getElementsByName('Employer')[0].onchange = function() {otheremployer.style.display = (this.value=='otheremployer')? '' : 'none'};
}
&lt;/script&gt;
Copy linkTweet thisAlerts:
@MozieauthorJun 02.2010 — G, that was quick, THANKS? Ok, now I have this, but the Location Other field isn't hidden, the Employer one is tho, so I'm still missing something:

[CODE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>

<script type="text/javascript">
window.onload=function() {
var otheremployer = document.getElementById('otheremployer');;
otheremployer.style.display = 'none';
var otherlocation = document.getElementById('otherlocation');;
otherlocation.style.display = 'none';
document.getElementsByName('Location')[0].onchange = function() {otherlocation.style.display = (this.value=='otherlocation')? '' : 'none'};
document.getElementsByName('Employer')[0].onchange = function() {otheremployer.style.display = (this.value=='otheremployer')? '' : 'none'};
}
</script>

<style type="text/css">
* {margin:0;padding:0;}
</style>

</head>
<body>
<form action="--WEBBOT-SELF--" method="POST" onsubmit="return FrontPage_Form1_Validator(this)" language="JavaScript" name="FrontPage_Form1">
<!--webbot bot="SaveResults" S-Email-Address="[email protected]" S-Email-Format="TEXT/PRE" startspan --><input TYPE="hidden" NAME="VTI-GROUP" VALUE="0"><!--webbot bot="SaveResults" i-checksum="43374" endspan -->
<BR>

<table>
<tr>
<td>Location</td>
<td>
<!--webbot bot="Validation" b-value-required="TRUE" b-disallow-first-item="TRUE" --><select size="1" name="Location">
<option>*** SELECT ***</option>
<option value="London">London</option>
<option value="Paris">Paris</option>
<option value="Tokyo">Tokyo</option>
<option value="Other">Other</option>
</select></td>
<td colspan="4">
<label id="other">If OTHER, please specify
<input type="text" name="Other_Location" size="30"></label></td>
</tr>
<tr>
<td>Employer</td>
<td>
<!--webbot bot="Validation" b-value-required="TRUE" b-disallow-first-item="TRUE" --><select size="1" name="Employer">
<option>*** SELECT ***</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="otheremployer">otheremployer</option>
</select></td>
<td colspan="4">
<label id="otheremployer">If OTHER, please specify
<input type="text" name="Other_Employer" size="30"></label></td>
</tr>
</table>
<BR>
<input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2">
</form>
</body>
</html>
[/CODE]
Copy linkTweet thisAlerts:
@FangJun 02.2010 — Match the id's and values correctly:&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;title&gt;&lt;/title&gt;

&lt;script type="text/javascript"&gt;
window.onload=function() {
var otheremployer = document.getElementById('otheremployer');;
otheremployer.style.display = 'none';
var otherlocation = document.getElementById('otherlocation');;
otherlocation.style.display = 'none';
document.getElementsByName('Location')[0].onchange = function() {otherlocation.style.display = (this.value=='otherlocation')? '' : 'none'};
document.getElementsByName('Employer')[0].onchange = function() {otheremployer.style.display = (this.value=='otheremployer')? '' : 'none'};
}
&lt;/script&gt;

&lt;style type="text/css"&gt;
* {margin:0;padding:0;}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;form action="--WEBBOT-SELF--" method="POST" onsubmit="return FrontPage_Form1_Validator(this)" language="JavaScript" name="FrontPage_Form1"&gt;
&lt;!--webbot bot="SaveResults" S-Email-Address="[email protected]" S-Email-Format="TEXT/PRE" startspan --&gt;&lt;input TYPE="hidden" NAME="VTI-GROUP" VALUE="0"&gt;&lt;!--webbot bot="SaveResults" i-checksum="43374" endspan --&gt;
&lt;BR&gt;

&lt;table&gt;
&lt;tr&gt;
&lt;td&gt;Location&lt;/td&gt;
&lt;td&gt;
&lt;!--webbot bot="Validation" b-value-required="TRUE" b-disallow-first-item="TRUE" --&gt;&lt;select size="1" name="Location"&gt;
&lt;option&gt;*** SELECT ***&lt;/option&gt;
&lt;option value="London"&gt;London&lt;/option&gt;
&lt;option value="Paris"&gt;Paris&lt;/option&gt;
&lt;option value="Tokyo"&gt;Tokyo&lt;/option&gt;
&lt;option value="otherlocation"&gt;Other&lt;/option&gt;
&lt;/select&gt;&lt;/td&gt;
&lt;td colspan="4"&gt;
&lt;label id="otherlocation"&gt;If OTHER, please specify
&lt;input type="text" name="Other_Location" size="30"&gt;&lt;/label&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Employer&lt;/td&gt;
&lt;td&gt;
&lt;!--webbot bot="Validation" b-value-required="TRUE" b-disallow-first-item="TRUE" --&gt;&lt;select size="1" name="Employer"&gt;
&lt;option&gt;*** SELECT ***&lt;/option&gt;
&lt;option value="1"&gt;1&lt;/option&gt;
&lt;option value="2"&gt;2&lt;/option&gt;
&lt;option value="3"&gt;3&lt;/option&gt;
&lt;option value="otheremployer"&gt;otheremployer&lt;/option&gt;
&lt;/select&gt;&lt;/td&gt;
&lt;td colspan="4"&gt;
&lt;label id="otheremployer"&gt;If OTHER, please specify
&lt;input type="text" name="Other_Employer" size="30"&gt;&lt;/label&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;BR&gt;
&lt;input type="submit" value="Submit" name="B1"&gt;&lt;input type="reset" value="Reset" name="B2"&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@MozieauthorJun 02.2010 — Oh gosh thanks, that was particularly silly of me :rolleyes: Only thing left is that if other is selected in either field, then the Other_Location and Other_Employer fields become required... I have no idea how to do this! ?
Copy linkTweet thisAlerts:
@FangJun 02.2010 — document.getElementsByName('Location')[0].onchange = function() {otherlocation.style.display = otheremployer.style.display = (this.value=='otherlocation')? '' : 'none'};
document.getElementsByName('Employer')[0].onchange = function() {otherlocation.style.display = otheremployer.style.display = (this.value=='otheremployer')? '' : 'none'};
Copy linkTweet thisAlerts:
@MozieauthorJun 02.2010 — Thanks Fang, but it's not quite working. If I select London for location and other employer then both 'other' textboxes appear. If I select other for location then they both appear too... ? :o ?
Copy linkTweet thisAlerts:
@FangJun 02.2010 — So you only want 1 text field to appear?
Copy linkTweet thisAlerts:
@MozieauthorJun 03.2010 — Exactly as it is working now but, if my location is London then I continue to the next question but if my location is not listed i select 'other' and then i am required to fill in the "Other_Location" field. Same goes for Employer, if my employer is listed then i select it and move on but if my employer is not listed i choose 'other' and then i MUST fill in the "Other_Employer" field... does that make sense? ?
Copy linkTweet thisAlerts:
@FangJun 03.2010 — That's how it was working in post #6
Copy linkTweet thisAlerts:
@MozieauthorJun 08.2010 — Just tried post #6 again, incase i was being silly, and for Location if i choose otherlocation i am allowed to proceed without specifying the Other_Location field. Same for empolyer ?
Copy linkTweet thisAlerts:
@FangJun 08.2010 — So if Location other is chosen then the textfield must be filled before allowing changes to be made to Employer? Correct?
Copy linkTweet thisAlerts:
@MozieauthorJun 08.2010 — Yes, correct...
Copy linkTweet thisAlerts:
@FangJun 08.2010 — window.onload=function() {
var employer = document.getElementsByName('Employer')[0];
employer.style.display = 'none';
var otheremployer = document.getElementById('otheremployer');;
otheremployer.style.display = 'none';
var otherlocation = document.getElementById('otherlocation');
otherlocation.style.display = 'none';
document.getElementsByName('Other_Location')[0].onblur = function() {employer.style.display = (this.value.length&gt;0)? '' : 'none';};
document.getElementsByName('Location')[0].onchange = function() {
if(this.value=='otherlocation') {
otherlocation.style.display = '';
document.getElementsByName('Other_Location')[0].focus();
employer.style.display = 'none';
}
else {
otherlocation.style.display = 'none';
employer.style.display = '';
}
};
employer.onchange = function() {otheremployer.style.display = (this.value=='otheremployer')? '' : 'none'};
}
×

Success!

Help @Mozie spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...