Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Location
    Bakersfield, CA
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    If form option selected show hidden field

    I've inherited this piece and now I'm suppose to add to it. Its basic function currently is when the "Other" option is selected, a hidden text field shows. Now, I need to add when "Athletics" is selected, another hidden select group will show.
    I've set up the new Select group already, but not sure how to incorporate it into the already existing script. I've been researching for two days, and hopefully this form will be helpful.


    Code:
    <select id="Program" name="Program" size="1" onchange="
          $other = document.getElementById('other_program').style;
          $invoice = document.getElementById('invoice');
          if (selectedIndex==6) {
            $other.visibility='visible';
            if ($invoice.value == 'General Fund') $invoice.value='';
          } else {
            $other.visibility='hidden';
            if (selectedIndex==1) {
              $invoice.value='Renegade Fund';
            } else {
              $invoice.value='Please Specify';
            }
          }
          ">
          <option selected="selected" value="Not Selected"> - - Select One - - </option>
          <option value="Athletics">Athletics</option>
          <option value="Drum Line">Drum Line</option>
          <option value="Renegade Fund">Renegade Fund</option>
          <option value="General Scholarships">General Scholarships</option>
          <option value="President's Circle">President's Circle</option>
          <option value="Other">Other</option>
        </select>
    
        <span id="other_program"><input type="text" id="invoice" name="invoice" size="15" /></span>
    
        <!-- the following is the new select group ive set up
        <span id="alumni">
            <select id="select-alumni" name="select-alumni" size="1">
                <option selected="selected" value="Not Selected">Yes or No</option>
                <option value="Yes-alumni">Yes</option>
                <option value="Not-alumni">No</option>
            </select>
        </span>
        -->

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,876
    Thanks
    56
    Thanked 536 Times in 533 Posts
    I have no idea what's supposed to be going on, or even if the html is legal, but is this what you're looking for?

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function change() {
    $other = document.getElementById('other_program').style;
    $alum = document.getElementById("alumni").style;
          $invoice = document.getElementById('invoice');
    	  sel=document.getElementById('Program')
    		      if (sel.selectedIndex==1) {
            $alum.visibility='visible';
          }
          if (sel.selectedIndex==6) {
            $other.visibility='visible';
    		 
            if ($invoice.value == 'General Fund') $invoice.value='';
          } else {
            $other.visibility='hidden';
            if (sel.selectedIndex==1) {
              $invoice.value='Renegade Fund';
            } else {
              $invoice.value='Please Specify';
    		  $alum.visibility='hidden';
            }
          }
    }
    
    </script>
    </head>
    
    <body>
    <select id="Program" name="Program" size="1" onchange="change()">
          <option selected="selected" value="Not Selected"> - - Select One - - </option>
          <option value="Athletics">Athletics</option>
          <option value="Drum Line">Drum Line</option>
          <option value="Renegade Fund">Renegade Fund</option>
          <option value="General Scholarships">General Scholarships</option>
          <option value="President's Circle">President's Circle</option>
          <option value="Other">Other</option>
        </select>
    
        <span id="other_program" style="visibility:hidden"><input type="text"  id="invoice" name="invoice" size="15" /></span>
    
        <span id="alumni" style="visibility:hidden">
            <select id="select-alumni" name="select-alumni" size="1">
                <option selected="selected" value="Not Selected">Yes or No</option>
                <option value="Yes-alumni">Yes</option>
                <option value="Not-alumni">No</option>
            </select>
        </span>
    </body>
    </html>

  • Users who have thanked xelawho for this post:

    gstricklind (01-19-2012)

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Location
    Bakersfield, CA
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Awesome, thank you!
    I didn't think having the previous script stuffed into the select tag was "good coding". I've been having to wade through some other stuff like that. I'm still a beginner to javascript, I appreciate your help!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •