Solved

form drop down if selected show

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

 
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

Enterprise Mobility and BYOD For Dummies

Like “For Dummies” books, you can read this in whatever order you choose and learn about mobility and BYOD; and how to put a competitive mobile infrastructure in place. Developed for SMBs and large enterprises alike, you will find helpful use cases, planning, and implementation.

Question has a verified solution.

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

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…
What You Need to Know when Searching for a Webhost Provider
Attackers love to prey on accounts that have privileges. Reducing privileged accounts and protecting privileged accounts therefore is paramount. Users, groups, and service accounts need to be protected to help protect the entire Active Directory …

756 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