Dropdown and Free text Option

Discussion Ask a question
,
1

I have a two dropdowns

  1. for some popular choices, this dropdown also includes options within for a list of other options using cascading dropdown effect.
  2. I also have a free text box that i would like to open upon a selection from first option

Prefix is first dropdown
subPrefix is the second

This is the start of my code

$w.onReady( function () {
$w(‘#subPrefix’).options = Mr;
$w(‘#prefix’).onChange(() => {

( within my first dropdown - green text for guidance only

if ($w(‘#prefix’).value === ‘Mr’) {
$w(‘#subPrefix’).disable();
$w(“#subPrefix”).value = null ;
$w(“#actual”).value = null ;
let placeholderStr = $w(“#subPrefix”).placeholder = “Option Disabled”; // “Enter name”
let placeholdText = $w(“#actual”).placeholder = “Option Disabled”; // “Enter name”
}

else if ($w(‘#prefix’).value === ‘Mrs’) {
$w(‘#subPrefix’).disable();
$w(“#subPrefix”).value = null ;
$w(“#actual”).value = null ;
let placeholderStr = $w(“#subPrefix”).placeholder = “Option Disabled”; // “Enter name”
let placeholdText = $w(“#actual”).placeholder = “Option Disabled”; // “Enter name”
}

)

within second dropdown as this includes options

else if ($w(‘#prefix’).value === ‘Military Officer’) {
$w(‘#subPrefix’).options = MilitaryOfficer;
$w(‘#subPrefix’).placeholder = ‘A Prefix for a Military Officer’;
let placeholdText = $w(“#actual”).placeholder = “Option Disabled”; // “Enter name”
$w(‘#subPrefix’).enable();
$w(“#actual”).value = null ;
$w(“#prefix”).value = null ;
}

Add my own Prefix is located in first drop down, i’m looking for #actual input box to expand when this option is chosen
else if ($w(‘#prefix’).value === ‘AddmyOwnPrefix’) {
$w(‘#actual’).expand();
$w(‘#actual’).options = AddmyOwnPrefix;
$w(‘#prefix’).disable();
$w(‘#subPrefix’).disable();
$w(“#prefix”).value = null ;
$w(“#subPrefix”).value = null ;
}
});
});

Thanks
Adam

2

so the focus is within this last else if statement, i think this is my problem

what it should have said was this $w#addOwnPrefix which was a definite fault of mine
else if ($w(‘#prefix’).value === ‘AddmyOwnPrefix’) {
$w(‘#addOwnPrefix’).expand();
$w(‘#prefix’).disable();
$w(‘#subPrefix’).disable();
$w(“#prefix”).value = null ;
$w(“#subPrefix”).value = null ;
}
});
});

however the #addOwnPrefix which is currently a collapsed text input is not expanding with this code. That is the problem.
Thanks
Adam

3

Adam, just to rule it out as a possible cause of the problem, could it be that “Hidden on load” is checked for #addOwnPrefix?

4

Thanks for coming back it is definitely collapsed on load.

5

You might put a console.log(“in block of code”) in there to make sure the if statement is evaluating the way that you think it is.

6

ok thanks what should i write please to see what’s happening for this particular item?

7

Something like this so you can see if those lines are indeed executing … You should see “in block of code” in the developer console at the bottom of the page.

else if ($w('#prefix').value === 'AddmyOwnPrefix') {
console.log("in block of code")
$w('#addOwnPrefix').expand();
$w('#prefix').disable();
$w('#subPrefix').disable();
$w("#prefix").value = null;
$w("#subPrefix").value = null;
}
});
});
8

@tony-brunsman console.log
($w(‘#prefix’).value === ‘AddmyOwnPrefix’) {
$w(‘#addOwnPrefix’).expand();
$w(‘#prefix’).disable();
$w(‘#subPrefix’).disable();
$w(“#prefix”).value = null ;
$w(“#subPrefix”).value = null ;
}
});
});

is showing an error before i begin to preview???

9

@adcatch02 This is just a small part of your code. You’re still running the whole thing, right? What error are you receiving?

10

i’m not getting an error it just doesn’t work. Where do i put the console.log code and do i include the entire section relating to this code?

11

I added one line to your code above right under the else if. My intention was that you add that one line in your code in the same place that I placed it, and then preview. If the logic evaluates as you expect it to, you should see the words “in block of code” in the developer console at the bottom.

12

no i’m not getting anything at all

13

nothing is showing in the console when placing the console.log where you said

14

So, what that tells you is that #addOwnPrefix is not expanding because the if statement is evaluating to false. In other words, $w(’ #prefix ').value is not equal to ‘AddmyOwnPrefix’.

Did you manually “populate” the two dropdowns?

15

@tony-brunsman no i created a js file for all the options to be displayed. the #addOwnPrefix box was added afterwards, so what do i need to add do you think to link it all up

Can i add, addOwnPrefix to this line ?
if ($w(’ #prefix ').value === ‘Mr’) {

16

@adcatch02 I’m not sure what you are asking, but the thought occurred to me that you need to be mindful that the dropdown option has both a label and a value, the label is what shows in the dropdown. Your logic is evaluating the value and not the label.

17

yes sorry i will have manually added add own prefix to the dropdown for the first dropdown to show items, as i did with all the other options

18

@tony-brunsman which until the last if else is right as it works perfectly its just coding the last part so that if addyourownprefix is required this expands

19

@adcatch02 It would be helpful to see some screen shots or your actual web page. You are losing me on what you are attempting to do.

20

sure.
so in editor mode i have #prefix assigned to both on change and onclick in properties which creates a little pop up / tool tip describing what a prefix is

and the type you own prefix is a collapsed element on load

In preview mode
add your own prefix obviously doesn’t display at the moment

I hope this helps
Regards
Adam