Can we set a value of textbox on the basis of other dropdown value??
Suppose I have a dropdown Country with list of country and another textbox which will have ISOCODE in it.
The dropdown api for country has countryName and Iso_code init in response.
I want to set dropdown as countryName and the text box value should be autoselected on the basis of country selection.
Textbox values on basis of other dropdown
Answers approved by surveyjs Support
Hello Abhishek,
I greatly appreciate this clarification.
To bind a Text box to an arbitrary property of a selected Dropdown item, please follow these steps:
- Enable the attachOriginalItems option of the
choicesByUrl
object:
JavaScript"choicesByUrl": {
"url": "https://surveyjs.io/api/CountriesExample",
"valueName": "name",
"titleName": "officialName",
"attachOriginalItems": true,
}
Now, the original object is attached to a selected Dropdown option.
- Register a custom function which would obtain a custom property of a selected Dropdown option.
JavaScriptfunction getRegion(props){
let dropdown = this.survey.getQuestionByName(props[0]);
if(!!dropdown.selectedItem){
return dropdown.selectedItem.originalItem.region;
}
}
Survey.FunctionFactory.Instance.register('getRegion', getRegion);
- Use the custom function in a
defaultValueExpression
property of a single-input Text field:
JavaScript{
"type": "text",
"name": "region",
"defaultValueExpression": "getRegion('country')"
}
Please let me know if you have any questions or require further assistance.
Comments
(2)
Hello Abhishek,
You can set the text question's
valueName
to the name of your Dropdown question.{ "type": "dropdown", "name": "country", "title": "Select a country", "description": "A full list of countries is queried from a RESTful web service.", "choicesByUrl": { "url": "https://surveyjs.io/api/CountriesExample", "valueName": "name" } }, { "type": "text", "name": "selectedCountry", "valueName": "country" }
Example
Please let me know if this option helps.
So correct but here I want the text field to have the value IsoCode
which Im getting in the dropdown api response with the CountryName
Table values:
Id Name IsoCode
1 India IN
2 USA USA
So country dropdown will show Name and textbox will show IsoCode
INDIA
IN
Is that possible??
Abhishek,
Which field do you wish to use as a Dropdown's value? Is it
Id
orIsoCode
?Dropdown should have CountryName
Textbox should have IsoCode
You can set the
Name
field as a choicesByUrl object'stitleName
, andIsoCode
as avalueName
of the choicesByUrl object."choicesByUrl": { "url": "url", "valueName": "IsoCode", "titleName": "CountryName" }
Now, a Dropdown's value will be set to the
IsoCode
of a selected item. And you can use the name of a Dropdown question in a Text question'svalueName
to display the ISO Code of a selected item. Please test this demo: https://plnkr.co/edit/BPnXC1Ha4fsCYE91.Let me know if this option can help.
This wont help
{
"elements": [{
"type": "dropdown",
"name": "country",
"title": "Select a country",
"description": "A full list of countries is queried from a RESTful web service.",
"choicesByUrl": {
"url": "https://surveyjs.io/api/CountriesExample",
"valueName": "name",
"titleName": "officialName"
}
}, {
"type": "text",
"name": "selectedCountry",
"valueName": "country"
}],
"showQuestionNumbers": false
};
I want region to be displayed in the text and want to save dropdown value as Name
{"name":"Afghanistan","officialName":"Islamic Republic of Afghanistan","region":"Asia","cca2":"AF","ccn3":"AF","cca3":"AFG","cioc":"AFG"}
Can that happen?
Hello,
To achieve this, set
region
astitleName
andname
asvalueName
: https://plnkr.co/edit/MS8h2MeQh7lZVWvZ."choicesByUrl": { "url": "https://surveyjs.io/api/CountriesExample", "valueName": "name", "titleName": "region" }
Please let me know if this works for you.
I guess you are still not getting my point the text box should display the region and the dropdown should be as it is with countryname
Hello Abhishek,
It appears I actually do not completely follow. To help me move forward and consider a suitable option, please send me an example/explain the current behavior and the desired output.
Please feel free to share a sample JSON data (or use
"url": "https://surveyjs.io/api/CountriesExample"
from my sample) and clarify:Thank you for your cooperation in advance.
{
"type": "dropdown",
"name": "country",
"title": "Select a country",
"description": "A full list of countries is queried from a RESTful web service.",
"choicesByUrl": {
"url": "https://surveyjs.io/api/CountriesExample",
"valueName": "name",
"titleName": "officialName"
}
}, {
"type": "text",
"name": "region"
}
Take above json example
I want country dropdown to show OfficialName and store value to database is Name column.
Where else in the text region I want to show the value of region from the response of country dropdown selected
Suppose I selected below value from country
{"name":"Afghanistan","officialName":"Islamic Republic of Afghanistan","region":"Asia","cca2":"AF","ccn3":"AF","cca3":"AFG","cioc":"AFG"}
It will show dropdown value as "Islamic Republic of Afghanistan" and store "Afghanistan" in database.
But in the textbox region it should show Asia as region.
And if I change the value it should reflect the respective region of dropdown value.