Populate fields automatically when you enter a key value in a specific field

Imagining I have a "test_db" database and a "test_tbl" table with 4 columns ("col_id", "col_title", "col_surname", "col_name") I would like that, when I select a value in the "form_id" field, the values ​​of the "col_surname" and "col_name" columns extracted from the row for which the value in "col_id" is the same as that selected in the "form_id" field are automatically inserted in the "form_surname" and "form_name" fields .
I would like to point out that the "form_id" field is of the dropdown type and contains all the ids (values) with the respective titles (texts) present in the "col_id" and "col_title" columns of the "test_tbl" table.
I guess the result can be achieved through the "Read data" action but I don't know how. Can anyone help me by explaining how to set up Chronoforms?

Thanks in advance,
Alex

you can do this now by having a first page where the form_id is selected and then a 2nd page where the rest of fields are displayed and the data is read on first page submit

but if you want the data loaded on "form_id" selection (single page form) then this requires AJAX call and after that the data should be set in the fields, and this can not be handled by v8 now but it's on the todo list

Hi Max,

Has this option been added to v8? I have a working 2 page solution, but I am looking for a single page solution.

I think I am doing something wrong here. 

In my form I have a dropdown where a country can be selected (data read from database). When a country is selected, in the textfield the prefix of that country need to be shown. But when a country is selected, the field disappears. 

Here are some screenshots from my settings.Dropdown with a event trigger.

Text field with an advanced listener:

Page 2 (options) with the read data to get the prefix.

correct, a Reload means the "output" of the reload page will replace the "Listener", but your reload page (options) does not return any output, because it has no Views, so you need to add another Text field there

alternatively, use "AJAX Call", and supply the page name (options) and Aa JS function name (set_value), then define this JS function and make it set the value of the "Reg prefix" field, the function will have one supplied parameter which is the result from the AJAX call (the prefix in your case)

Thank you for showing me in the right direction.

I added a text field to the 'options' page. When selected the country the text field is shown. The only thing I cannot get to work is getting the value from the read_data on the options page in the text field. I tried {var:read_data12.reg_prefix}, {data:reg_prefix}, etc, but can't get it to work. I am missing something?

the Text field should be AFTER the Read Data, and the {var:read_data12.reg_prefix} should be in the Text field "Default Value" behavior, and you need to make sure that the Read Data actually returns a result, you can try to access that page directly in the browser with the form Debug enabled to check this

Hi Max,

I got it working. In my first text field, the one that needs to reload, I put {var:read_data12.reg_prefix} as a default value. When the country is selected, the read_data12 in the 'options' page is going to select the prefix. In the read_data12 I had to give the reg_prefix field an alias (called 'reg') and put that in as a default value ({var:read_data12.reg} and in the field name. When I select the country from the list, the correct prefix is shown.

The only thing that is not working is when I select an other country from the list, the prefix won't change. For example: first I select Germany and I get the prefix (a D). When I select a different country, for example The Netherlands, the German prefix (the D) remains in the text field. Do you have any idea to fix that?

Kind regards,Ruud

does the reloaded field have the same name as the original one ?

Hi Max, 

When both fields have the same name nothing is loaded in the fields. When the reloaded text field (from the options page) has another name, the value is only loaded into the field when a country is selected for the first time. After selecting another country, the text field is not updated.

Here is the first text field (before selecting a country):

Here is the Read_Data and the Text field in the "options" page:

I think it's because the field object changes when it's reloaded, you may need to do it the other way, using AJAX Call and use a function to set the field value:

function(result){
document.querySelector("[name='field-name']").value = result; 
}

Thank you Max.

I got it to work by using a Javascript. I don't understand JS, so I found a script online and used that. When the country is selected, a JS gets the other values from the database (using a php file). 

that's ok, but that's what the AJAX listener is doing, it will load the other form page which runs the database and returns a value, then your function can use that value:

and in the next update the function will get a 2nd parameter, the calling field object, so that you can just use it this way:

function(result, field){
field.value = result; 
}

Ah thanks Max! I will try this😃