Joget DX 8 Stable Released
The stable release for Joget DX 8 is now available, with a focus on UX and Governance.
...
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 | ||
---|---|---|
| ||
<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> |
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:
Figure 8: Styling Result
See the result
Figure 89: Result
View file | ||||
---|---|---|---|---|
|
...