Skip to main content
O
Olivia_Crazy_Horse
Known Participant
May 10, 2009
Question

How to make fields popup based on other fields

  • May 10, 2009
  • 2 replies
  • 688 views

When my screen first loads, I have three radio buttons, A,B,and C.

If I select radio button A, I want to display/popup radio buttons A1, B1, and C1. If I select radio button A1, I then want to display/popup a <cfinput> for part number. If I select radio button B1, a display/popup <cfinput> for PO Number, and if I select radio button C!, <cfinput> for employee. 

If I select radio button AB then I want to disply/popup radio buttons A1 and B1 only.  And if I select radio button A1, then <cfinput> for part number, etc. (like above).

I have some javascript code, using <div>, that will display/popup <cfinput> for part number, po number, etc., based on radio button A1, B1 and C1 selection. But it does not seem to work for an extra set of selects (original radio buttons, A, B, C). I think that is because they seem to be using the same names in the javascript. I tried to change some names, making them 1A, 1B, etc., but that still did not work.

Can somebody please show me how to do this ?

Thanks

    This topic has been closed for replies.

    2 replies

    D
    Dan_Bracuk
    Inspiring
    May 11, 2009

    Giving all your radio buttons the same name is what you want to do.

    Javascript debugging is an adventure for all of us.  window.alert is your freind in this endeavour.

    C
    craigkaminsky
    Inspiring
    May 10, 2009

    Hi,

    The following code snippet uses jQuery as the JavaScript library but should be something you can use to get you going.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html>

         <head>

              <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

              <title>Radio Button</title>

         </head>

         <body>

              <form method="post" id="myform">

              <!-- at least  in jQuery, you can just use the same name for the radio buttons but don't need to worry on the id attribute matching -->

              <!-- I'm going to use a common class (rg1) so that I can identify these elements as a group in jQuery -->

                   A: <input type="radio" id="btnA" name="radiogroup1" class="rg1" value="1" />

                   B: <input type="radio" id="btnB" name="radiogroup1" class="rg1" value="2" />

                   C: <input type="radio" id="btnC" name="radiogroup1" class="rg1" value="3" />

              </form>

              <script type="text/javascript" src="lib/jquery/jquery-1.3.2.min.js"></script>

              <script type="text/javascript">

                   // when the DOM is ready, jQuery will run this function

                   $(document).ready(

                   function(){

                        // here we are setting up an onclick event handler for any element with a class of rg1

                        $('.rg1').click(

                             function(){

                                  // when the click event is fired, we use this code to find out the value of the value attribute

                                  // of the selected radio button. Keep in mind that the value of the value attribute will be a string

                                  // and you'll beed to parse it into an integer (or floating point number) if you want to treat it as such

                                  rbVal = parseInt( $('.rg1:checked').val() );

                                  // now, just a basic switch statement to see which one was selected and to act on it

                                       switch( rbVal )

                                       {

                                            case 1:

                                                 alert( 'you selected button A' );

                                                 // execute the code to add your btn A items

                                            break;

                                            case 2:

                                                 alert( 'you selected button B' );

                                                 // execute the code to add your btn B items

                                            break;

                                            case 3:

                                                 alert( 'you selected button C' );

                                                 // execute the code to add your btn C items

                                            break;

                                            default:

                                                 alert( 'I have no idea what you clicked' );

                                            break;

                                       }         

                                  }

                             );

                        }

                   );

              </script>

         </body>

    </html>

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices