Introduction

There may be instance where form fields are required to be formatted side by side such as when developing a "First Name & Last Name" or "Currency Selector" and many more. This article will discuss on how to format form field side by side through a "Currency Selector" example.

Steps Example

Step 1

Drag a select box and text field into the form

Figure 1: Select Box and Text Field in form

Step 2

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

Figure 2: Select box configuration

Step 3

Paste the following JQuery script into a custom HTML script inside the form. The 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.

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

Select Box Styling 

Figure 4: Select Box Element Styling

Figure 5: Select Box Field Label and Input Styling

Text Field Styling

Figure 6: Text Field Element Styling

Figure 7: Text Field Label and Input Styling

Styling Result:

Figure 8: Styling Result

Step 5 

See the result

Figure 9: Result

Sample App