?
Solved

conditional input in html

Posted on 2010-01-12
7
Medium Priority
?
333 Views
Last Modified: 2013-11-19
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.
0
Comment
Question by:One_Infinite_Life
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
7 Comments
 
LVL 11

Expert Comment

by:enriquecadalso
ID: 26297478
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
 
LVL 18

Expert Comment

by:Morcalavin
ID: 26297479

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

Author Comment

by:One_Infinite_Life
ID: 26297624
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
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

 
LVL 18

Accepted Solution

by:
Morcalavin earned 2000 total points
ID: 26297688
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
 

Author Comment

by:One_Infinite_Life
ID: 26297732
Wonderful -- thanks so much!
0
 

Author Closing Comment

by:One_Infinite_Life
ID: 31676337
Thank you very much.
0
 

Author Comment

by:One_Infinite_Life
ID: 26297825
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

Featured Post

Enroll in August's Course of the Month

August's CompTIA IT Fundamentals course includes 19 hours of basic computer principle modules and prepares you for the certification exam. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question