Versions Compared

Key

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

Table of Contents

Introduction

There may be instance instances 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,' among others. This article will discuss on how to format form field fields side by side through , using 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 the form

Step 2

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

...

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 jQuery script into a custom HTML script inside within the form. The 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.

Note

Be Make sure to change the JQuery jQuery selector name to the respective Select Box and Text Field ID otherwise the script wouldnIDs of the select box and text field; otherwise, the script won'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 select box and text field to position them side by side. 

Select Box Styling 

Figure 4: Select Box Element Styling

...

Figure 7: Text Field Label and Input Styling


Styling Result:

Figure 8: Styling Result

Step 5 

See Check the result

Figure 9: Result

Sample App
View file
nameAPP_kb_dx8_currency_selector_sample.jwa
height250