Skip to main content
N
New_York_Guy
Known Participant
May 4, 2009
Question

How to make a popup disappear ?

  • May 4, 2009
  • 2 replies
  • 945 views

I have three radio buttons on a form. If I select the first one, I have javascript that will popup some input fields. If I select radio button 2, radio button 1 is unchecked and the popups disappear, and new popups appear for button 2, same for radio button 3, etc.

Now if I have three checkboxes instead of radio buttons, how do I make the popups disappear if all the checkboxes can be selected ? If I check the first checkbox and the popups appear, then I change my mind and uncheck the box, how do I make the popups for box 1 disappear ? They stay remain on the screen even when the box is unchecked.

    This topic has been closed for replies.

    2 replies

    C
    craigkaminsky
    Inspiring
    May 4, 2009

    Could you post a little of your code? I think it would make it easier to assist you with this with some samples?

    Quick question: how are you binding events to your new checkboxes (as opposed to your radio buttons) so that your JavaScript "knows" when a checkbox has been selected?

    N
    New_York_GuyAuthor
    Known Participant
    May 5, 2009

    Here is part of the code I currently have. I have three checkboxes and if I check the box named carrier, then I popup entry fields for carrier and carrier tracking number, below. If I uncheck the carrier box, I want the popups to disappear.

    <input type="checkbox" name="fault" onClick="showTextboxes(1);" value="Carrier">Carrier
     
    <div id="optionTextBoxes1" class="group1" style="display:none;">    
       Carrier:<input type="text" name="carrier">
       Carrier Tracking Number:<input type="text" name="carrier_tracking_number">

    </div>

    This is the javascript code I use :

    <script language="javascript" type="text/javascript">
    function showTextboxes(selectedButtonIndex){
      var elem;
      //use div elements id's: optionTextBoxes1, optionTextBoxes2, optionTextBoxes3 
      for (var x = 1; x <= 1; x++) {
       elem = document.getElementById('optionTextBoxes'+ x);
       elem.style.display = (x == selectedButtonIndex ? 'block' : 'none');
      }
    }

    function validateOptionTextBox(formObject, textBoxObject, textBoxValue) {
      var isValid = true;
      var buttonIndex = -1;
      // the 'name' of the radio buttons is case sensitive!!
      var buttonArray = document.getElementsByName('fault');

      // get the index of the checked button. assumes your buttons are in order: 1, 2, 3 
      for (var x = 0; x < buttonArray.length; x++) {
       if (buttonArray.checked) {
        buttonIndex = (x+1);
        break;
       } 
      }

      // get the <div> id associated with this button. id is case sensitive!!
      var divID = 'optionTextBoxes'+ buttonIndex;
      var parentNode = textBoxObject.parentNode;

      // validate this textbox only if it is contained in the selected div
      if (parentNode && parentNode.id == divID) {
       isValid = isTextBoxNonEmpty(textBoxValue);
      }

      return isValid;
    }

    function isTextBoxNonEmpty(textBoxValue) {
         //trim leading and whitespace
      var trimmedValue = textBoxValue.replace(/^\s+|\s+$/g, '');
      return (trimmedValue.length > 0);
    }
    //-->
    </script>

    D
    Dan_Bracuk
    Inspiring
    May 6, 2009

    When you said popup, I thought you meant a separate window.  This is now a lot easier.  My approach is:

    <cfsavecontent variable="Var1">

    &nbsp

    </cfsavecontent>

    <cfsavecontent variable="Var2">

    cf and html code for your extra textboxes

    </cfsavecontent>

    <script>

    <script>
    function toggle (choice) {
    <cfoutput>
    var #toScript(Var1, "noCode")#;
    var #toScript(Var2, "textBoxes")#;
    </cfoutput>

    if (your logic goes here){
    document.getElementById('textBoxSpot').innerHTML  = noCode;
    }
    else { 
    document.getElementById('textBoxSpot').innerHTML  = textBoxes;
    }
    return true;
    } // end of function

    </script>

    later on

    <cfoutput>
    <div id="textBoxSpot">
    #Var1#
    </div>
    </cfoutput>

    You should be able to figure out the rest

    D
    Dan_Bracuk
    Inspiring
    May 4, 2009

    You may have better success using a div instead of a popup.

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