Get Select Option Value And Set It To The Text Field

In this guide, we will explain how to get the Select option value and set it to the text field.

Drag and drop a Select, a JavaScript and a Text field.

image

Rename the Text field.

image

Click the pencil icon of the Select field and fill in the “Select Option Values”. Save the changes.

image

Click the pencil icon of the JaveScript field and paste the code. Save the changes.

image

Please use the below code:

// 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;
}

Try the form. The “Select Option Value” of the Select field will be set as the value of the Text field.

image
Example form.json3.2KB

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