link textbox to button dropdown

Discussion Ask a question
,
1

Hi,
I have a textbox which I want to connect to a dropdown menu, so that whatever is currently selected in the dropdown menu will show up in that textbox.

Furthermore, I’d like not only to show the value of the dropdown in the textbox, but to have another textbox which gets the value of that dropdown item from a collection.

So for example if I have a collection with field ‘price’ and value ‘40’, I want the textboxes to show ‘price’ and ‘40’ when ‘price’ is selected from a dropdown.

How can I do this?

2

Hi,
Regarding showing the value, all you need is to connect the textbox and the dropdown to the “price” field from the same dataset. Whenever you change the value in the dropdown, the dataset gets the update and propagates it to the textbox automatically.
Regarding the “price” label, can it just be a static label with the text “price”?

3

Hi Tomer,
I think perhaps I didn’t explain properly.

I have a dropdown with several field values. So ‘price’ and ‘size’ for example.
I want the textbox to connect to whichever is currently selected in the dropdown, and another textbox to represent the value of that field in the collection.

From your explanation I didn’t really understand how todo this… I’ve already connected the dropdown to my dataset, but textboxes don’t have a way to connect to a dropdown, only to a collection. So I don’t know how to connect the textbox to the dropdown.

4

OK, so it sounds like your dropdown holds field key names.
Meaning in your collection you have columns with field keys such as “price” and “size”, and you have this list of field keys in the dropdown.
What you can do is write some code that listens to the dropdown value change.
When it changes, you get the current item from the dataset, get the field value from the item according to the selected value in the dropdown, and set it to the “value” property of the textbox.
Resources to help you start with:
Working with element events: Velo: Reacting to User Actions Using Events | Help Center | Wix.com
Getting current item from a dataset: wix-dataset - Velo API Reference - Wix.com
Setting a textbox value: https://www.wix.com/code/reference/$w.TextBox.html#value

5

Perfect! Thanks Tomer i’ll check those out and post back here when I have a solution.

6

Hi Tomer,
Can you help me out with this? I’ve tried implementing what you ask but I’m not sure about the functions onChange and onReady, meaning if the code to get the field value and name has to be in one of them or in both… The documentation isn’t so clear to me on that.

import wixData from 'wix-data';
$w.onReady(function () {
	//TODO: write your page related code here...
});

function getParameter(dropdown) {
	var parameter = {
		'A': 'a',
		'B': 'b',
		'C': 'c',
		'D': 'D',
	};
	return (parameter[dropdown] || parameter['default']);
}

export function dropParameter_change(event, $w) {
	$w("#ifc_data").onReady( () => {
    let itemObj = $w("#ifc_data").getCurrentItem(); //this makes the collection available to further functions?
  } );
	var selectedParameter = $w("#dropParameter").value;
	var parameter = getParameter(selectedParameter);
	wixData.query("ifc_data")
		.ascending(parameter) //determine order of items
		.find()
		.then((result) => {
			if (result.items.length > 0) {
				$w("#mainGallery").data = result.items;
			}
			//is the location of the below code correct? If it depends on the onChange event then yes, but if it depends on the onReady event then no.. I'm a bit confused as to the nesting of these functions.
			let myField = parameter
			let myValue = itemObj(myField).value;
			console.log(myField); //this does nothing at the moment, no console msg printed...
			console.log(myValue); //this does nothing at the moment, no console msg printed...
			$w("#parameterName").value = myField; //set textbox name
			$w("#parameterValue").value = myValue; //set textbox value
		});
}
1 Like