asked on

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.

enriquecadalso

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

Morcalavin

<!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

One_Infinite_Life

ASKER

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!

ASKER CERTIFIED SOLUTION

Morcalavin

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

One_Infinite_Life

ASKER

Wonderful -- thanks so much!

One_Infinite_Life

ASKER

Thank you very much.

One_Infinite_Life

ASKER

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.