How to make a popup disappear ?

[New_York_Guy]

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.

[Dan_Bracuk]

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

[craigkaminsky]

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?

[New_York_Guy]

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>

[Dan_Bracuk]

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