Forums

how to display a text upon a dropdown selection?

adhynagara2 02 Apr, 2015
By using the Event Tab on Edit window, we can set dynamic condition for a particular element.
But how if the target element is a custom field (containing text) which has no field ID? How can we define it on the Event Tab setting?
Tia.
GreyHead 02 Apr, 2015
Hi adhynagara2,

If it is an HTML input then you can always add an id.

If that really isn't possible then you'd need to use custom JavaScript to identify the value in some other way,

Bob
adhynagara2 02 Apr, 2015
Thank you, Mr. GreyHead,
Anyway, my knowledge on php or html are zero.
How can I add an ID with the HTML input?
What is the code?
GreyHead 02 Apr, 2015
Answer
1 Likes
Hi Tia,

<input . . . id='some_id' . . .  />

Bob
adhynagara2 02 Apr, 2015
Thank you, Mr. GreyHead.
Now I'm starting to be familiar with the language...🙂
adhynagara2 02 Apr, 2015
Can you give a bit more help Mr. GreyHead...
The code of my text is
<p>President<br />Student Congress</p>
I've tried to embed the ID code in many ways:
<p>President<br />Student Congress<id='Role'/p>
<p>President<br />Student Congress</p id='Role' >
<<p>President<br />Student Congress</p> id='Role'/>
But none of them works.
Fawaaz 02 Apr, 2015
Hello adhynagara2,

<p id="Role">President</p>

Fawaaz 02 Apr, 2015
    <p id="Role">President</p>
GreyHead 02 Apr, 2015
Hi adhynagara2,

The correct HTML is
<p id='some_id' >President<br />Student Congress</p>
But as none of these are form inputs the event code won't work with them.

What are you actually trying to do here?

You may need to get help from someone with coding experience.

Bob
adhynagara2 02 Apr, 2015
I made a Custom Code element and put the text code inside the Code box in Edit Element Settings.
I expect the element will have an ID with which I can define a dynamic event.
Therefore in Events tab of a dropdown field, I can set this condition:
On = Certain Selected Value
Action: Show
Element ID: the ID I've just created.

But unfortunately, it doesn't work.
GreyHead 02 Apr, 2015
Hi adhynagara2,

I'm sorry but a <p> tag isn't dynamic and will never change so there is nothing to trigger an On Change event.

If you can explain what you need to do we may be able to help you more.

Bob
adhynagara2 02 Apr, 2015
Let's say, a user (a tourist) will have to select a hotel from a dropdown field.
In order to choose his preferred hotel, he must be informed about the rate of the hotel, the distance to point of interests, the hotel's facility, and so on.
So I would like the information to be displayed as text outside the dropdown field, according to the user's selection.
Thank you.
Fawaaz 03 Apr, 2015
1 Likes
There's surely a better way but a quick workaround would be to display the text(rate,distance) in a readonly textbox ou text area..
GreyHead 03 Apr, 2015
1 Likes
Hi adhynagara2,

How long is the list of hotels?

If there are only a few then you can load the information into the page in a series of divs and use CSS to hide them; then you can un-hide one when that hotel is selected.

If there are a lot of hotels - more than say 20 - you can use a JavaScript Ajax call back to the server to get the information and display it when it is returned. As an example - a bit more complicated than you need - see this test form - when you select a category on the left you will be shown a list of article titles at the top - clicking the title will show the article.

Bob
adhynagara2 03 Apr, 2015
Hi Fawaaz,
Thanks for the quick workaround. But as you said, Mr. GreyHead has proved that the better way does exist.

Hi Mr. GreyHead,
Thank you for the awesome solution. I'll give the first alternative a try first.
adhynagara2 24 Apr, 2015
Hi Fawaaz & Mr. GreyHead,
I've just inadvertently found the simplest way to tackle this concern.
Simply put the custom code (which contains the text) inside a container field.
Change its type to "field set" then use its ID to assign a dynamic event from the intended dropdown list.
Voila! The text will be displayed conditionally based on your selection on the dropdown list.
This topic is locked and no more replies can be posted.