I'm working on an existing launch page. This launch page has a customer name list box. I have to add a second customer name list box. The second customer name list box gets populated dynamically from an external fex. The second customer name list box gets populated the same way and reads a different table than the first customer name list box. Is there a way to not show the second list box if the customer is not in the table that feeds it even though the customer may be in the first customer selection list box? Not sure if this can be done through chaining on the parameter page. Thanks.

This message has been edited. Last edited by: Tamra,

Michele,
You could build a fex "driver" that checks that second table for the customer. If the customer is not found in it, you could pass the html page a flag that turns the display of the second drop down box off. Basically just create a fex, check if the customer is that table, set a variable to Y or N depending on the result, and then -HTMLFORM your html page into the fex.

You could also do some validation on the second drop down box in the html page. You could make a call to a fex in the onload section of the html page that would return a flag you could test on in javascript to turn the box on and off.

I think WF8 has some built in validation tech in the html composer, could try that method too. Few different ways to get this done.

I'll do the best I can as I am not that savvy using -HTMLFORM nor javascript. Thanks so much.

Michele,

Not sure if you do not want to show the second list at all or simply not show any entries in the second box. For sure the chaining on the parameters page is the simplest way to do the latter. You choose your customer from the first box and if there are no entries that match from the second list, then you will get a box with no entries.

If you do not want to show the box at all, there is some basic javascript that you can write to make the second box not show on the html screen. You have to put the second box into its own panel and then either show or not show it in the html.

Hope that helps.

Thanks Vivian. I don't want to show the second box at all. I'm working on incorporating some JavaScript and hope it works. I think I also need to do a chaining to another box in addition to JavaScript so this will be a little tricky. Thanks again.

I have two radio buttons, each of which has an associated customer list box. When the first radio button is clicked, I'm activating the first customer list box. The customer list box is chained to a report list box. Depending on which customer is selected determines which report will display.

I am having problems when the second radio button is selected. When I click the second radio button, the second customer list box and report list box displays, but when I select a customer from the second customer list box and select a report from the second report list box and run the customer that I selected from the first customer list box and the associated is run.

I need to deactivate the first customer list box and first report list box when I select the second radio button and choose a customer and report. Pasted below is my javascript that contains an error. Can someone tell me where the error is? Thanks.

 

//Begin function radio1_onclick
function radio1_onclick(ctrl) {
   //*************************************************************************************************
   //* The First Customer radio button was clicked. Display the First Customer box
   document.getElementById("listbox1").style.height = '120px';
   document.getElementById("listbox1").style.width  = '320px';
   document.getElementById("listbox1").style.left   = '210px';
   document.getElementById("listbox1").style.top    = '40px';



   //*************************************************************************************************
   //* Uncheck the Second Customer radio button
   document.getElementById("radio2_0").checked = false;
if(document.listbox1_0.checked){
   document.getElementById("listbox1").disabled=true;
   document.getElementById("listbox3").disabled=true;
}else{
 document.getElementById("listbox1_0").disabled=false;
 document.getElementById("listbox3_0").disabled=false;
}
   
   //*************************************************************************************************
   //* Since the First Customer is displayed, be sure the other boxes are hidden
   document.getElementById("customer2").style.height = '0px';
   document.getElementById("customer2").style.width  = '0px';
   document.getElementById("customer2").style.left   = '0px';
   document.getElementById("customer2").style.top    = '0px';
   document.getElementById("listbox10").style.height = '0px';
   document.getElementById("listbox10").style.width  = '0px';
   document.getElementById("listbox10").style.left   = '0px';
   document.getElementById("listbox10").style.top    = '0px';
   
}
//End function radio1_onclick


//Begin function radio2_onclick
function radio2_onclick(ctrl) {
   //*************************************************************************************************
   //* The Second Customer radio button was clicked. Diaplay the Second Customer box
   document.getElementById("customer2").style.height = '120px';
   document.getElementById("customer2").style.width  = '320px';
   document.getElementById("customer2").style.left   = '210px';
   document.getElementById("customer2").style.top    = '40px';
   document.getElementById("listbox10").style.height = '120px';
   document.getElementById("listbox10").style.width  = '300px';
   document.getElementById("listbox10").style.left   = '550px';
   document.getElementById("listbox10").style.top    = '40px';


   //*************************************************************************************************
   //* Uncheck the First Customer radio button
   document.getElementById("radio1_0").checked = false;
if(document.customer2_0.checked){
   document.getElementById("customer2").disabled=true;
   document.getElementById("listbox10").disabled=true;
}else{
 document.getElementById("listbox1_0").disabled=false;
 document.getElementById("listbox3_0").disabled=false;
}
 
}
//End function radio2_onclick



 

This message has been edited. Last edited by: Michele Brooks,

First of all, to hide an element, use display: none; instead of modifying dimensions.

document.getElementById("customer2").style.display = 'none';

Without completely validating your code (it's too late in the evening for me), when you click on radiobutton1, hide AND disable ALL the controls related to radiobutton2. When you click on radiobutton2, hide AND disable ALL the controls related to radiobutton1. In theory this should only pass the appropriate values.

I suggest to change the ID's of your form elements from "listbox1", "combobox1", etc. to something meaningful. That way it's much more obvious which form control you're modifying in your code.

The names they currently have look like they are names generated by HTML Composer, which doesn't really have enough info to generate more meaningful names.

I usually set both the id and name attribute of controls to the name of the amper-variable that they correspond to.

To add to Francis' sugggestion, to make the listbox visible again after hiding it, you set display = 'block';

Alternatively, you can use the visibility = "hidden"/"visible" property. It's worth a bit of time to learn about those properties and, for example, what's the difference between both.

I have two listbox controls: "listbox1" and "listbox2".

"listbox1" populates with all the cars in the IBI sample CAR file. "listbox2" is static and has only "DATSUN" and "JAGUAR" in it.

Any selection other than "DATSUN" or "JAGUAR" in "listbox1" causes "listbox2" to be hidden.

// After the HTML page loads
function listbox1_ononafterload(ctrl) {
    listbox1_onchange();
}

// When user makes a new selection in "listbox1"
function listbox1_onchange(event) {
    var s = document.getElementById("listbox1").value;
    var id = document.getElementById("listbox2");
    var length = id.options.length;
    var flag = false;

    for (var i = 0; i < length; i++) {
        if (s == id.options[i].value) flag = true;
    }

    if (flag) {
        id.style.visibility = "visible";
    } else {
        id.style.visibility = "hidden";
    }
}

It's important to understand the difference between the "visibility" and "display" properties.

visibility: Hides the element (control) without removing the browser space it occupies.

display: Hides the element (control) and removes the browser space it occupies, possibly causing other elements on the HTML page to shift position.

More info here: Visibility versus Display properties

Squatch, thanks for your example. I already have the hidden/visible part figured out. My problem is that when I click on the second radio button and select a customer and report from the associated list boxes, the customer and report that I selected when I clicked the first radio button runs again. I need the correct customer and report to run when I click on the second radio button and run the report. Thanks.

You not only have to hide the customer and report but also disable these controls. I assume you have two pairs of controls with the same names (but different IDs).

document.getElementById("customer1").disabled = true;
document.getElementById("customer2").disabled = false;