conditional input in html

I want to have the user be able to select from a list of items on a form, e.g. "how did you hear about us": friend, relative, web/internet, advertisement, etc.   AND, if they select either of the first two -- friend or relative -- an additional text input field comes up asking them the name of the friend or relative.   I don't want to show this field if they don't select friend or relative.

I believe I need to do this with Javascript/dhtml, but haven't found an examples on web of how.  Could someone please give me an example.  Thanks.
One_Infinite_LifeAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

enriquecadalsoCommented:
Hello. Here you have some examples.

http://home.cogeco.ca/~ve3ll/jstutora.htm

And here a more complete article about

http://developer.apple.com/internet/webcontent/dynamicforms.html
0
MorcalavinCommented:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Example</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
    <script type="text/javascript">
        function displayUserName(control) {
            var textName = document.getElementById('name');
            if(control.selectedIndex === 0 || control.selectedIndex === 1) {
                textName.style.display = 'block';
            }
            else {
                textName.style.display = 'none';
            }
        }
        window.onload = function() {
            displayUserName(document.getElementById('referer'));
        }
    </script>
    <style type="text/css">
        
    </style>
</head>

<body>
<div>
<select name="referer" id="referer" onchange="displayUserName(this)" onkeyup="displayUserName(this)">
<option value="friend">Friend</option>
<option value="relative">Relative</option>
<!-- etc -->
<option value="other">Other</option>
</select>
</div>
<div id="name" style="display: none">Please enter the name of the user: <input type="text" name="name" value="" /></div>
</body>
</html>

Open in new window

0
One_Infinite_LifeAuthor Commented:
If I wanted the field not to be displayed initially, and have the choice default to "other",  would I simply comment out the onload function -- would that be the correct way?  

Also, can you tell me if I need to do anything special to access this "name" field when the form gets submitted to the server.  What is the correct syntax to access it?

Thanks much!
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

MorcalavinCommented:
You can simply set the selected property of OTHER.

The text field named 'name' can be accessed just like any other form element.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Example</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
    <script type="text/javascript">
        function displayUserName(control) {
            var textName = document.getElementById('name');
            if(control.selectedIndex === 0 || control.selectedIndex === 1) {
                textName.style.display = 'block';
            }
            else {
                textName.style.display = 'none';
            }
        }
        window.onload = function() {
            displayUserName(document.getElementById('referer'));
        }
    </script>
    <style type="text/css">
        
    </style>
</head>

<body>
<div>
<select name="referer" id="referer" onchange="displayUserName(this)" onkeyup="displayUserName(this)">
<option value="friend">Friend</option>
<option value="relative">Relative</option>
<!-- etc -->
<option value="other" selected="selected">Other</option>
</select>
</div>
<div id="name" style="display: none">Please enter the name of the user: <input type="text" name="name" value="" /></div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
One_Infinite_LifeAuthor Commented:
Wonderful -- thanks so much!
0
One_Infinite_LifeAuthor Commented:
Thank you very much.
0
One_Infinite_LifeAuthor Commented:
enriquecadalso: -- thanks so much for your response too -- for some reason it did not show up in my browser and I'm seeing now for the first time.  Thanks for the web-pages references you gave.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.