?
Solved

form drop down if selected show

Posted on 2006-11-08
6
Medium Priority
?
220 Views
Last Modified: 2013-12-24
I have a form that the user can select any of five selections from a drop down. What I would like to do is for each selection selected, display the appropriate form fields.
0
Comment
Question by:aspiegel
[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
6 Comments
 
LVL 5

Expert Comment

by:parikaa
ID: 17902011
If you are doing a form submission and want a page refresh, you could do an if/else statment in the action page.
0
 
LVL 20

Accepted Solution

by:
trailblazzyr55 earned 1000 total points
ID: 17902153
this should give you the general idea on how to accomplish what you want through javascript, copy and paste...


<script>
function ShowField(idx,numOfOptions){
      for(i=1;i < numOfOptions;i++){
            if(idx == i){
                  document.getElementById(i).style.display = "block";
                  document.getElementById("somethingA"+i).disabled = false;
                  document.getElementById("somethingB"+i).disabled = false;
            }else{
                  document.getElementById(i).style.display = "none";
                  document.getElementById("somethingA"+i).disabled = true;
                  document.getElementById("somethingB"+i).disabled = true;
            }
      }
}
</script>
<form name="test" action="" method="post">
<table>
      <tr>
            <td>SELECT YOUR CHOICE</td>
            <td align="right">
                  <select name="SelectBox" id="ChoiceBox" onchange="ShowField(this.selectedIndex,5);">
                        <option>----SELECT A CHOICE----</option>
                        <option>Choice One</option>
                        <option>Choice Two</option>
                        <option>Choice Three</option>
                        <option>Choice Four</option>
                  </select>
            </td>
      <tr>
      <tr id="1" style="display:none;">
            <td>CHOICE ONE</td>
            <td>
                  Field 1: <input type="text" name="somethingA1" value="" /><br />
                  Field 2: <input type="text" name="somethingB1" value="" />
            </td>
      </tr>
      <tr id="2" style="display:none;">
            <td>CHOICE TWO</td>
            <td>
                  Field 3: <input type="text" name="somethingA2" value="" /><br />
                  Field 4: <input type="text" name="somethingB2" value="" />
            </td>
      </tr>
      <tr id="3" style="display:none;">
            <td>CHOICE THREE</td>
            <td>
                  Field 5: <input type="text" name="somethingA3" value="" /><br />
                  Field 6: <input type="text" name="somethingB3" value="" />
            </td>
      </tr>
      <tr id="4" style="display:none;">
            <td>CHOICE FOUR</td>
            <td>
                  Field 7: <input type="text" name="somethingA4" value="" /><br />
                  Field 8: <input type="text" name="somethingB4" value="" />
            </td>
      </tr>
</table>
<input type="submit" name="submit" value="submit" />
</form>

<cfif isdefined("form.submit")>
  <cfdump var="#form#">
</cfif>
0
 
LVL 15

Expert Comment

by:danrosenthal
ID: 17902250
Hey Trail,
Good looking code, but just curious.....
Do you really need this part since the input will already be hidden?:

               document.getElementById("somethingA"+i).disabled = true;
               document.getElementById("somethingB"+i).disabled = true;
0
Plug and play, no additional software required!

The ATEN UE3310 USB3.1 Gen1 Extender Cable allows users to extend the distance between the computer and USB devices up to 10 m (33 ft). The UE3310 is a high-quality, cost-effective solution for professional environments such as hospitals, factories and business facilities.

 
LVL 20

Expert Comment

by:trailblazzyr55
ID: 17907317
the reason I put that in was to eliminate blank form vars being passed to the next page or bit of logic.. the code was just a base to show how maybe to go about doing what aspiegel wants, I'm sure there'll be more than a couple text fields and stuff, and the javascript could be written a bit better too, but it'd be based on what aspiegel wants to toggle. Yeah the forms would be hidden, but they'd still be submitted unless you disable them.
0
 

Author Comment

by:aspiegel
ID: 17909804
trailblazzyr55,

The code looks great so far. Sorry it took me a while to get back with you. I'll finish testing tommorow and let you know how it works.  Thanks for your code.
0
 
LVL 20

Expert Comment

by:trailblazzyr55
ID: 17940707
yeah no prob, glad I could help, let me know if you have any more questions, good luck!

thanks,
~trail
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Article by: kevp75
Hey folks, 'bout time for me to come around with a little tip. Thanks to IIS 7.5 Extensions and Microsoft (well... really Windows 8, and IIS 8 I guess...), we can now prime our Application Pools, when IIS starts. Now, though it would be nice t…
What You Need to Know when Searching for a Webhost Provider
Monitoring a network: how to monitor network services and why? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the philosophy behind service monitoring and why a handshake validation is critical in network monitoring. Software utilized …
This is my first video review of Microsoft Bookings, I will be doing a part two with a bit more information, but wanted to get this out to you folks.
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