Solved

form drop down if selected show

Posted on 2006-11-08
6
219 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 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
Save the day with this special offer from ATEN!

Save 30% on the CV211 using promo code EXPERTS30 now through April 30th. The ATEN CV211 connects a laptop directly to any server allowing you instant access to perform data maintenance and local operations, for quick troubleshooting, updating, service and repair.

 
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

Increase Agility with Enabled Toolchains

Connect your existing build, deployment, management, monitoring, and collaboration platforms. From Puppet to Chef, HipChat to Slack, ServiceNow to JIRA, Splunk to New Relic and beyond, hand off data between systems to engage the right people.

Connect with xMatters.

Question has a verified solution.

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

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…
When it comes to showing a 404 error page to your visitors, you do not want that generic page to show, and you especially do not want your hosting provider’s ad error page to show either. In this article, I will show you how to enable the custom 40…
In this video, viewers are given an introduction to using the Windows 10 Snipping Tool, how to quickly locate it when it's needed and also how make it always available with a single click of a mouse button, by pinning it to the Desktop Task Bar. Int…
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 …

717 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