Solved

form drop down if selected show

Posted on 2006-11-08
6
197 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
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 250 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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
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

Simplifying Server Workload Migrations

This use case outlines the migration challenges that organizations face and how the Acronis AnyData Engine supports physical-to-physical (P2P), physical-to-virtual (P2V), virtual to physical (V2P), and cross-virtual (V2V) migration scenarios to address these challenges.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Windows Server with multiple sites and SSL 14 66
Website Test Question 6 115
Server specifications for web hosting 7 92
how to setup ssl access to internal local machine 4 115
In our day to day coding, how many times have we come across a necessity to check whether a URL is a broken link or not? For those of you that answered countless and are using ColdFusion like myself, then this article is for you.  It will show yo…
Most ColdFusion developers get confused between the CFSet, Duplicate, and Structcopy methods of copying a Structure, especially which one to use when. This Article will explain the differences in the approaches with examples; therefore, after readin…
Windows 10 is mostly good. However the one thing that annoys me is how many clicks you have to do to dial a VPN connection. You have to go to settings from the start menu, (2 clicks), Network and Internet (1 click), Click VPN (another click) then fi…
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…

770 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