Display Text based on Value in Dropdown Box

Forms Public Forms
1

Hi there,

@Margo - thanks for always assisting on some codes on this form. I am newbie on this Plumsail.
I have a scenario that i need to display address in the text control in the form based on my dropdown values.

I have a dropdown control named Location that is connected to OneDrive in excel and pulls data on that excel file. Dropdown values pull data on the "Location" column below. Below are my excel format

location

What i need is when Philippines is selected in Dropdown value, the "Cavite Philippines" address will display in the textbox below (example Text10) and when Nashville is selected, "Smyrna, Tennessee" will display.

I don't have experience in java script so please help on some codes. Thank you so much.

I need to display the address on the green circle below (Text10)

image

Echo

2

Hello Echo,

Try this:

Just remember to change 'Location' & 'Address' to your internal SharePoint field name.
Also run this inside fd.spRendered(function)()

function showaddress(){
if (fd.field('Location').value == 'Philippines') {
// show Address in Textbox below	
fd.field('Address').value = 'Cavite Philippines';
}

if (fd.field('Location').value == 'Nashville') {
// show Address in Textbox below
fd.field('Address').value = 'Smyrna Tennessee';
}

if (fd.field('Location').value == 'Washington') {
// show Address in Textbox below
fd.field('Address').value = 'Kalibo Aklan';
}
if (fd.field('Location').value == 'Aklan') {
// show Address in Textbox below
fd.field('Address').value = 'Boracay Beach';
}

if (fd.field('Location').value == 'Manila') {
// show Address in Textbox below
fd.field('Address').value = 'Metro Manila Quezon';
}
if (fd.field('Location').value == 'boracay') {
// show Address in Textbox below
fd.field('Address').value = 'Beach in Ocean';
}

}

//calling showaddress on change of location field
(fd.field('Location').$on('change', showaddress);
3

Hello @EchodaPogi,

If you don't need to filter addresses by location (Location is unique), you can simply select Location as a Text column, and Address as Value column:
image

And use the code below to populate Text control with corresponding address. Please don't forget to update field and control internal names.

fd.rendered(function() {
    fd.field('DropDown0').$on('change',function(value){
        fd.control('Text0').html= value;
    })
});

@DryChips,

Thank you for sharing the code. This approach is more suitable for cases when the data is static and doesn't change/updated from time to time.

1 Like
5

Thank you for this. Very Helpful

1 Like
6

thank you for your code and it works perfectly. one thing i notice is that the "Location" is not saving in the data but the address is saving.. how can i save the text value of "Location"?

Ex: When i select "Philippines" in the location.. the "Cavite Philippines" is saved or capture and its perfect. But the value "Philippines" is not. how can i also capture that. So what i did is i added Text20 and hoping to mirror the Location value on that field to be able to save or capture it. but its not working.

I want the Location dropdown value ("Philippines") to be mirrored / copy in the Text20 field whenever i change the Location dropdown control.

Screenshot 2022-04-18 101828
Screenshot 2022-04-18 101828743×179 6.13 KB

Again, thanks so much. I am newbie on this form and i am trying to learn some code based scenario.

7

Hello @EchodaPogi,

You can use this code:

fd.rendered(function() {
    fd.field('DropDown0').$on('change',function(value){
        //get address
        fd.control('Address').value = value;
        //get location
        fd.control('Location').value = fd.field('DropDown0').widget.dataItem().text;
    })
});
8

thank you so much. it worked perfectly.

1 Like