Get Select/Multi Check List Option Values And Set It To The Text Field

In this guide, we will explain how to get the “Select” and “Multi Check List” option values and set them to the “Text” field.

We will explain two examples first for “Select”, and second for “Multi Check List”.

Get “Select” Option Value In The “Text” Field:

  1. Initial Setup:
  • Drag and drop a “Select”, a “JavaScript”, and a “Text” field onto your form.
  • Rename the fields as needed.
image
  1. Configuring The “Select” Field:
  • Click the pencil icon of the “Select” field.
  • Fill in the “Select Option Values”.
image
  1. Configuring The “JavaScript” Field:
  • Click the pencil icon of the “JavaScript” field.
  • Paste the code.
image
  • Please use the code below.
// Listen to select field
formyoula.form_fields[ 'Select List' ].on( 'input:set:success', function() {
  // Get value
  var value = this.get( 'value' );
  // Set value of text field
  formyoula.form_fields[ 'Selected Option Values' ].set( 'value', get_selected_option_value( value ) );
} );
// Function to get selected option value
function get_selected_option_value( value ) {
  // Index of the option selected
  var options_index = formyoula.form_fields[ 'Select List' ].get( 'select_options' ).split( '\n' ).indexOf( value );
  //Get option value
  var select_option_value_label = formyoula.form_fields[ 'Select List' ].get( 'attributes' ).select_option_values.split( '\n' )[ options_index ];
  // return option value
  return select_option_value_label;
}
  • Make sure to update the field IDs as per your form.
image
  1. Test Your Form:
  • Try the form.
  • The “Select Option Value” of the “Select” field will be set as the value of the “Text” field.
image

Get “Multi Check List” Option Values In The “Text” Field:

  1. Initial Setup:
  • Drag and drop a “Multi Check List”, a “JavaScript”, and a “Text” field onto your form.
  • Rename the fields as needed.
image
  1. Configuring The “Multi Check List” Field:
  • Click the pencil icon of the “Multi Check List” field.
  • Fill in the ”Select Options” and “Select Option Values”.
image
  1. Configuring The “JavaScript” Field:
  • Click the pencil icon of the “JavaScript” field.
  • Paste the code.
image
  • Please use the code below.
// Listen to select field for multi-select
formyoula.form_fields['bba7-10f7-e88b'].on('all', function () {
  // Get selected values as a comma-separated string
  var values = this.get('value');

  // Convert comma-separated values into an array
  var selected_values = values ? values.split(';') : [];

  // Convert selected values into corresponding option values
  var selected_option_values = get_selected_option_values(selected_values);

  // Set values of the text field as a comma-separated string
  formyoula.form_fields['4188-28e1-0474'].set('value', selected_option_values.join('; '));
});

// Function to get selected option values
function get_selected_option_values(selected_values) {
  // Get all available options
  var all_options = formyoula.form_fields['bba7-10f7-e88b'].get('select_options').split('\n');
  var all_option_values = formyoula.form_fields['bba7-10f7-e88b'].get('attributes').select_option_values.split('\n');

  // Map selected values to corresponding option values
  return selected_values.map(function (selectedValue) {
    var index = all_options.indexOf(selectedValue.trim()); // Trim to avoid whitespace issues
    return index !== -1 ? all_option_values[index] : '';
  }).filter(Boolean); // Remove empty values if any
}
  • Make sure to update the field IDs as per your form
image
  1. Test Your Form:
  • Try the form.
  • The “Select Option Values” of the “Multi Check List” field will be set as the value of the “Text” field.
image

Optional: You can apply the same for the “Multi Select List” option values.

Example Form For Select Option Value.json3.2KB
Example Form For Multi Check List Option Values.json3.9KB

For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂