Solved

form drop down if selected show

Posted on 2006-11-08
6
186 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

Save on storage to protect fatherhood memories

You're the dad who has everything. This Father's Day, make sure your family memories are protected. My Passport Ultra has automatic backup and password protection to keep your cherished photos and videos safe. With up to 3TB, you have plenty of room to hold the adventures ahead.

Question has a verified solution.

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

Suggested Solutions

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…
Meet the world's only “Transparent Cloud™” from Superb Internet Corporation. Now, you can experience firsthand a cloud platform that consistently outperforms Amazon Web Services (AWS), IBM’s Softlayer, and Microsoft’s Azure when it comes to CPU and …
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.
A short film showing how OnPage and Connectwise integration works.

919 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now