Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Note

Be sure to change the JQuery selector name to the respective Select Box and Text Field ID otherwise the script wouldn't work.

Figure 3: JQuery Script

Code Block
languagejs
<script>
$(document).ready(function() {
  //Set initial value with selected option
  $('input[name="value"]').val($('select[name="selector"]').val() + " ");
    
  $('select[name="selector"]').on('change', function() {
    // Get the selected value from selector
    if ($(this).val() === "USD" || $(this).val() === "POUND") {
        var selectedCurrency = " " + $(this).val();
    
        // Get the current value of currency_field
        var currentValue = $('input[name="value"]').val();
    
        // Set the updated value to currency_field by concatenating the selected currency
        $('input[name="value"]').val(currentValue + selectedCurrency);
    }
    else{
            var selectedCurrency = $(this).val()+ " ";
            
            // Set the updated value to currency_field
            $('input[name="value"]').val(selectedCurrency);
        }

  });
});

 </script>

Step 4

Next, apply CSS to both the Select Box and Text Field to have them positioned side by side.

...

Figure 7: Text Field Label and Input Styling

Styling Result:
Image Added

Figure 8: Styling Result

Step 5 

See the result

Figure 89: Result

Sample App
View file
nameAPP_kb_dx8_currency_selector_sample.jwa
height250


...