Populate a second field depending on dropdown selection

[Paul]

I need to create javascript code that does the following:

I have a dropdown field that has several selections (sourcefield). And I have a text field (targetfield). Depending on user selection, I'd like to populate the target field with a corresponding unique value (not a duplicate of the source field).

I discovered the sample code below that intends to accomplish the above task in nubuilder, but I have questions.

1. Is the sample code valid?
2. What is meant by 'nuObject'

SAMPLE CODE:

var selectedValue = this.value;

if (selectedValue === 'Option1') {
nuObject('target_field_name').set('The value for Option 1');
} else if (selectedValue === 'Option2') {
nuObject('target_field_name').set('The value for Option 2');
} else {
// You can set a default value or clear the field if no option is selected
nuObject('target_field_name').set('');
}

[steven]

Hi Paul,

nuBuilder doesn't have a JavaScript function called nuObject(), but nuSetValue() can be used to update other fields.

So you can try something like this...

Code: Select all

function selectItemValue(t){
    if(t.value == 'Hello'){
         nuSetValue('test_item_1', t.value);
         nuSetValue('test_item_2', '');
    }
    if(t.value == 'World'){
         nuSetValue('test_item_1', '');
         nuSetValue('test_item_2', t.value);
    }
}

p.png

And add an onchange event to Test Select.

ppp.png

Steven

[Paul]

Hi Kevin,

Thank you for the sample code, however, I need the data copied to be not the same as the selected item. It needs to be a different string. For example, if I select 'Flea Bitten Dog' (item1) in the dropdown, then populate the other field with 'My dog has fleas.' and so forth for other items in the dropdown.

[steven]

Paul,

You can choose 1 value and get another by making the first column different from the second...

sel1.png

So you can do this...

sel4.png

and the JavaScript is simpler...

Code: Select all

function selectItemValue(t){
         nuSetValue('test_item_1', t.value);
}

This list can be delimited by a pipe (|) or in other ways. nuBuilder Wiki



Steven

[Paul]

I am confused about what you are doing here.

As I understand it, per nuBuilder documentation:

"2. List:
A pipe-delimited list.
- First value: bound value (e.g., 1) <<<< This gets saved in the database.>>>>
- Second value: display value (e.g., First) <<<<< This is displayed only.>>>>
Example:
1|First|
2|Second|
3|Third"

In my first column, I want the bound value and the display value to be the SAME.
In my second column, I want a totally different value to be saved and displayed depending upon the item selected in the first column.
Not sure how you got the results you did.

What am I not understanding here?

[kev1n]

Could you maybe give an example of what you’d expect to see? For instance, show what values would be in the first column (both bound + display, since you want them the same), and then what the second column should save vs. display based on that first selection. Right now it’s a bit hard to picture exactly what you’re trying to achieve without some dummy/sample values.

[Paul]

Sure thing.

Select Field1/Column 1:
Bound and Display Selection 1: Joe
Bound and Display Selection 2: Bob

Display Field2/Column2:
Save and Display 1: http://joes/web/site/url
Save and Dispaly 2: http://bobs/web/site/url

When user clicks on 'Joe' in the select dropdown, I need two things to happen:
1. 'Joe' gets saved in Column1 in the database and displays 'Joe' in the Select Field1 on the form.
2. The value 'http://joes/web/site/url' gets saved in Column2 in the database and is displayed in Field2.

When user clicks on 'Bob' in the select dropdown, same thing, I need two things to happen:
1. 'Bob' gets saved in Column1 in the database and displays 'Bob' in Field1.
2. 'http://bob/web/site/url' gets saved in Column2 and is also displayed in Field2.

The names (bob, joe) are all pre-defined as well as the urls.

Let me know if you are not clear on what I am looking for.

[kev1n]

Check out this mockup and let me know if it matches what you had in mind, based on your description:
https://wiki.nubuilder.cloud/nufiles/se ... ockup.html

Once you confirm, I can provide the nuBuilder code to implement it.

[Paul]

Yes! That's exactly what I am looking for! Perfect!

[kev1n]

You’ll need a way to map each selected name to its corresponding URL (e.g., “Joe” → Joe’s URL, “Bob” → Bob’s URL). If the options are fixed, a simple JS map in the Select’s onchange handler works well:

Code: Select all

const urlMap = { 
  'Joe': 'http://joes/web/site/url', 
  'Bob': 'http://bobs/web/site/url' 
};

const name = nuGetValue('Field1');   // Field1 = your Select bound to Column1
nuSetValue('Field2', urlMap[name] || ''); // Field2 = your Text bound to Column2

If there are many values or they’re not static, we should switch to a data-driven approach (e.g., store the mapping in a table and fetch the URL on change via a server-side lookup), so the form stays maintainable (but it is more complicated than the approach above)

Select1 values:

Code: Select all

Joe|Joe|
Bob|Bob

Select 2 values:

Code: Select all

http://joes/web/site/url|http://joes/web/site/url|
http://bobs/web/site/url|http://bobs/web/site/url