Javascript for toggling a text box/field on and off based on a dropdown menu

Greetings,

I have this code for creating a new document base on some user input parameters. The very first field is for the user to pick the name for the product from a drop-down list, but I'm trying to get it to work so that a string text box appear below the drop-down, if the user selects "Custom" from the drop-down list, so that they may input the custom name of the product.

Here is the working code with the drop-down. MUCHA THANKS for any help on getting a text boxt to appear when "Custom" is picked from the drop-down 🙂

// Set units
app.scriptPreferences.measurementUnit = MeasurementUnits.POINTS;

// Create a dialog box to prompt user for input
var myDialog = app.dialogs.add({name:"Product Information"});
with(myDialog.dialogColumns.add()){
    with(borderPanels.add()){
        with(dialogRows.add()){
            with(dialogColumns.add()){
                staticTexts.add({staticLabel:"Product Name:"});
            }
            with(dialogColumns.add()){
                var productNameMenu = dropdowns.add({stringList:["Custom", "Charisma", "EasyOpen SnapFrame", "Flat Panel", "Harmony Banner Stand", "Mercury Banner Stand"], selectedIndex:1});
            }
        }
        with(dialogRows.add()){
            with(dialogColumns.add()){
                staticTexts.add({staticLabel:"Finished Width (inches):"});
            }
            with(dialogColumns.add()){
                var finishedWidthField = textEditboxes.add({editContents:""});
            }
        }
        with(dialogRows.add()){
            with(dialogColumns.add()){
                staticTexts.add({staticLabel:"Finished Height (inches):"});
            }
            with(dialogColumns.add()){
                var finishedHeightField = textEditboxes.add({editContents:""});
            }
        }
        with(dialogRows.add()){
            with(dialogColumns.add()){
                staticTexts.add({staticLabel:"Bleed (inches):"});
            }
            with(dialogColumns.add()){
                var bleedField = textEditboxes.add({editContents:"1"});
            }
        }
        with(dialogRows.add()){
            with(dialogColumns.add()){
                staticTexts.add({staticLabel:"Pole Pocket (inches):"});
            }
            with(dialogColumns.add()){
                var polePocketField = textEditboxes.add({editContents:"0"});
            }
        }
    }
}
var myResult = myDialog.show();

// Get the values entered in the dialog box
if(myResult == true){
    var productName = productNameMenu.selectedIndex == -1 ? "" : productNameMenu.stringList[productNameMenu.selectedIndex];
    var finishedWidthIN = finishedWidthField.editContents;
    var finishedHeightIN = finishedHeightField.editContents;
    var bleedIN = bleedField.editContents;
    var polePocketIN = polePocketField.editContents;
    var safetyOffsetIN = 2;
    var pageWidthIN = Number(finishedWidthIN) + (2 * Number(bleedIN));
    var pageHeightIN = Number(finishedHeightIN) + (2 * Number(bleedIN));
    var safeWidthIN = Number(finishedWidthIN) - (1 * Number(safetyOffsetIN));
    var safeHeightIN = Number(finishedHeightIN) - (1 * Number(safetyOffsetIN));
}

   
// Convert the entered values to points (1 inch = 72 points)
//coerce numbers
    finishedWidth = Number(finishedWidthIN)*72;
    finishedHeight = Number(finishedHeightIN)*72;
    bleed = Number(bleedIN)*72;
    polePocket = Number(polePocketIN)*72;
    safetyOffset = Number(safetyOffsetIN)*72;
    finishedSizeStroke = 0.20*finishedHeightIN;
    safeSizeStroke = 0.14*finishedHeightIN;

    // Create a new document with the calculated dimensions
    var graphicTemplate = app.documents.add({
        documentPreferences: {
            pageWidth: finishedWidth + (2 * bleed),
            pageHeight: finishedHeight + (2 * bleed) + (2 * polePocket)
        }
    });

    graphicTemplate.marginPreferences.properties = {
        top : 0,
        left: 0,
        right: 0,
        bottom:0
    };


// Create the Bleed rectangle
var bleedRect = graphicTemplate.pages.item(0).rectangles.add({
    geometricBounds: [0, 0, graphicTemplate.documentPreferences.pageHeight, graphicTemplate.documentPreferences.pageWidth],
    strokeWeight: bleed,
    strokeColor: "C=15 M=100 Y=100 K=0",//RED
    fillColor: "None",
    transparencySettings: { blendingSettings: { opacity: 50 } },
    strokeAlignment: StrokeAlignment.INSIDE_ALIGNMENT
});

// Create the Finished Size rectangle
var finishedRect = graphicTemplate.pages.item(0).rectangles.add({
    geometricBounds: [(graphicTemplate.documentPreferences.pageHeight - finishedHeight+finishedSizeStroke) / 2, (graphicTemplate.documentPreferences.pageWidth - finishedWidth+finishedSizeStroke) / 2, (graphicTemplate.documentPreferences.pageHeight + finishedHeight-finishedSizeStroke) / 2, (graphicTemplate.documentPreferences.pageWidth + finishedWidth-finishedSizeStroke) / 2],
    strokeWeight: finishedSizeStroke,
    strokeColor: "Black",
    strokeType: "Dashed (4 and 4)",
    fillColor: "None",
    transparencySettings: { blendingSettings: { opacity: 100 } },
    strokeAlignment: StrokeAlignment.CENTER_ALIGNMENT
});

if (polePocket ===0){}
else {

// Create the Pole Pocket rectangle - TOP
var topPolePocketRect = graphicTemplate.pages.item(0).rectangles.add({
    geometricBounds: [bleed, bleed, bleed + polePocket, graphicTemplate.documentPreferences.pageWidth - bleed],
    strokeWeight: 0,
    strokeColor: "None",
    fillColor: "Black",
    transparencySettings: { blendingSettings: { opacity: 25 } },
    strokeAlignment: StrokeAlignment.INSIDE_ALIGNMENT
});


// Create the Pole Pocket rectangle - BOTTOM
var bottomPolePocketRect = graphicTemplate.pages.item(0).rectangles.add({
    geometricBounds: [graphicTemplate.documentPreferences.pageHeight - (bleed + polePocket), bleed, graphicTemplate.documentPreferences.pageHeight - bleed,graphicTemplate.documentPreferences.pageWidth - bleed],
    strokeWeight: 0,
    strokeColor: "None",
    fillColor: "Black",
    transparencySettings: { blendingSettings: { opacity: 25 } },
    strokeAlignment: StrokeAlignment.INSIDE_ALIGNMENT
});

     }


// Create the Safe Area rectangle
var safeAreaRect = graphicTemplate.pages.item(0).rectangles.add({
    geometricBounds: [(graphicTemplate.documentPreferences.pageHeight - (finishedHeight - safetyOffset) + safeSizeStroke) / 2, (graphicTemplate.documentPreferences.pageWidth - (finishedWidth - safetyOffset) + safeSizeStroke) / 2, (graphicTemplate.documentPreferences.pageHeight + (finishedHeight - safetyOffset) - safeSizeStroke) / 2, (graphicTemplate.documentPreferences.pageWidth + (finishedWidth - safetyOffset) - safeSizeStroke) / 2],
    strokeWeight: safeSizeStroke,
    strokeColor: "C=75 M=5 Y=100 K=0",//GREEN
    strokeType: "Solid",
    fillColor: "None",
    transparencySettings: { blendingSettings: { opacity: 100 } },
    strokeAlignment: StrokeAlignment.CENTER_ALIGNMENT
});

//Add Graphic Specs Text
var graphicSpecs = graphicTemplate.textFrames.add();
graphicSpecs.parentStory.appliedFont = "Arial";
graphicSpecs.textFramePreferences.verticalJustification = VerticalJustification.CENTER_ALIGN;
graphicSpecs.properties =

{

    geometricBounds: [(graphicTemplate.documentPreferences.pageHeight) * 0.125, (graphicTemplate.documentPreferences.pageWidth) * 0.125, (graphicTemplate.documentPreferences.pageHeight) * 0.875, (graphicTemplate.documentPreferences.pageWidth) * 0.875],
    strokeWidth : 0,
    parentStory : { pointSize : 1.5*Number(pageHeightIN) },
    fillColor : "None",
    //contents : "hello this is test text"
};


// Set the text content
graphicSpecs.contents = productName + " - Graphic Template\r";
graphicSpecs.contents += "-Document Size: " + pageWidthIN + "\" x " + pageHeightIN + "\" (Includes bleeds)\r";
graphicSpecs.contents += "-Finished Size: " + finishedWidthIN + "\" x " + finishedHeightIN + "\"\r";
graphicSpecs.contents += "-Safe Size: " + safeWidthIN + "\" x " + safeHeightIN + "\"\r";
graphicSpecs.contents += "-Bleed: " + bleedIN + "\" on each of 4 sides\r";
graphicSpecs.contents += "-Extend background to full bleed\r";

if (polePocket ===0){}
else {
graphicSpecs.contents += "-Pole Pocket: " + polePocketIN + "\" at top and bottom (gray area is hidden side of pole pocket)\r";
     }

graphicSpecs.contents += "-CMYK\r-100 DPI @ Final Size\r-All text should be converted to outlines\r-Provide all linked files";


//line 2
graphicSpecs.lines[1].texts[0].fillColor = "C=100 M=0 Y=0 K=0";//CYAN
//line 4
graphicSpecs.lines[3].texts[0].fillColor = "C=75 M=5 Y=100 K=0",//GREEN
//line 5
graphicSpecs.lines[4].texts[0].fillColor = "C=15 M=100 Y=100 K=0"//RED
//line 6
graphicSpecs.lines[5].texts[0].fillColor = "C=15 M=100 Y=100 K=0"//RED



// Add file name text frame
var fileNameSize = 60
var fileNameTextFrame = graphicTemplate.textFrames.add({
    geometricBounds: [graphicTemplate.documentPreferences.pageHeight - (bleed + fileNameSize)/2, 36, graphicTemplate.documentPreferences.pageHeight, graphicTemplate.documentPreferences.pageWidth],
    contents: app.activeDocument.name,
    fillColor: "None"
});


fileNameTextFrame.parentStory.appliedFont = "Arial";
fileNameTextFrame.parentStory.pointSize = fileNameSize;