Introduction

There may be instances where form fields are required to be formatted side by side, such as when developing a 'First Name & Last Name' or 'Currency Selector,' among others. This article will discuss how to format form fields side by side, using a 'Currency Selector' example.

Steps Example

Step 1

Drag a select box and text field into the form

Image Added

Figure 1: Select Box and Text Field in the form

Step 2

Configure the select box accordingly by adding the desired currency label and value. 

Image Added

Figure 2: Select box configuration

Step 3 (You may skip this step if you intend to only have form fields side by side)

Paste the following jQuery script into a custom HTML script within the form. This script will set the initial value of the 'value' field to the selected option in the dropdown box upon page load and selection, thus allowing dynamic interaction.

Image Added

Figure 3: JQuery Script

<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 position them side by side. 

Select Box Styling 

Image Added

Figure 4: Select Box Element Styling

Image Added

Figure 5: Select Box Field Label and Input Styling

Text Field Styling

Image Added

Figure 6: Text Field Element Styling

Image Added

Figure 7: Text Field Label and Input Styling

Styling Result:
Image Added

Figure 8: Styling Result

Step 5 

Check the result

Image Added

Figure 9: Result

Sample App

View file
name APP_kb_dx8_currency_selector_sample.jwa height 250