nuBuilder Forum

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('');
}

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...


And add an onchange event to Test Select.




Steven

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.

Paul,

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


So you can do this...


and the JavaScript is simpler...


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



Steven

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?

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.

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.

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.

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

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:
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:

Select 2 values: