How do I change a text input value depending on the dropdown selected?

Ask the community
,
1

I have a dropdown $w(‘#contractName’) that is connected to a Database with a collection ID contract ~ $w(‘#contractDS’) is the name field key of the dataset ~ with three fields:

  1. contractTitle

  2. rate

  3. name which is a reference to another database
    I have an input bar with a name $w('#rate) that the value should be changed in accordance with the selected item on the dropdown. How do I change the value of the rate input bar during a change of the selected value on the dropdown? So far I have only this code snippet and clearly, it’s not working.

Please help. Thank you.

export function contractName_change(event) {
let rate = [$w("#contractName").selectedIndex].rate;
$w('#rate').value = rate ;
}
2

I will have a look and report back later, sleep time for me. :sleeping:
Unless somebody beats me to it and replies back to before then… :crossed_fingers:

3

@givemeawhisky This photo below is my database. rate and contractTitle. The contractTitle is connected to a dropdown. I have another element which is an input bar who needs to change the value when the dropdown changes to. I guess it needs to be with the _id of the item I guess but I can’t just implement it through coding.

Below is my elements:

Hoping anyone can help. Thank you.

4

@givemeawhisky I was wondering if you could help me? :slight_smile:

5

I haven’t forgotten about this, well okay little white lie, I had until you reminded me and I will look into it when I get back for you.

Please let me know if this is right - you want the first dropdown to be picked depending on your contract choice of your Contract Title (contractTitle) field in your dataset.

Then you want the corresponding rate from the Rate (rate) field to be displayed in the rate per hour box in your image.

What is this other input box that you mention, is that a user input for something or just another text field to display something too?

6

@givemeawhisky you are right. Only these two. :slight_smile:

7

@freedfoxworldwide

I have used text fields here so that they can be read only and which uses the .text suffix.

If you want to still use user inputs then you can with you just needing to change the code to .value suffix.

Okay so to start with, if we used the selected index that will only return the selected index name.


Code used.

import wixData from 'wix-data';

$w.onReady(function () {
});

export function contractName_change(event) {
let index = $w("#contractName").selectedIndex;
let itemOptions = $w("#contractName").options[index]
let itemValue = itemOptions.value;
$w('#ratetext').text = itemOptions.value
$w('#name'). text = itemOptions.value
}
8

To do this you have to query the dataset that you are using to get the dropdown value and then show the matching fields in the text boxes.


Code used.

import wixData from 'wix-data';

$w.onReady(function () {
});

export function contractName_change(event) {
wixData.query("Contract")
.eq("contractTitle", $w('#contractName').value)
.find()
.then( (results) => {
$w('#ratetext').text = results.items[0].rate;
$w('#name').text = results.items[0].name;
console.log(results.items);
})
.catch( (err) => {
 let errorMsg = err;
});
}
9

Dataset settings using your existing details from your image.

939×377 11.8 KB

10

@givemeawhisky It worked! Thank you so much. Earlier, my solution is to use two dataset and filter the rate depending on the value of the dropdown.

export function contractName_change(event) {
let dropdownvalue = event.target.value;
// $w(‘#contractDataset2’).setFilter(wixData.filter()
// .eq(“contractTitle”, dropdownvalue))
}

Thank you so much again.

11

I WANT TO SHOW ANOTHER DROP DOWN WHEN SELECTED VALUE ON FIRST DROP DOWN CAN YOU PLZ MAKE FOR ME