🧩 Overview

In many Joget applications, users enter transaction amounts in different currencies. To maintain financial consistency, it’s crucial to automatically convert these values into a standard base currency (like AED or USD).

This guide shows how to automate currency conversion inside a Joget form using JavaScript, Fetch API, and jQuery Autocomplete — all without writing any backend plugin code.

⚙️ How It Works

✅ On form load:

• The script sets the AED amount field to zero.
• Fetches live currency symbols from a safe exchange rate API.
• Activates autocomplete on the currency input field.

⚙️ Whenever a user changes:

• The currency,
• The amount, or
• The product name,

the script recalculates the AED value dynamically and updates the related fields (amountInAed, BalanceAmount, and exchangeRate).

💻 Full Code

html
<script>
$(document).ready(function () {
// Initialize amount field
$('#amountInAed').val("0");
let currency = "";

// Fetch all currency symbols from a safe API endpoint
fetch(`https://your-safe-api-endpoint/v4/latest/AED`)
.then((data) => data.json())
.then((data) => {
currency = Object.keys(data.rates);

// Enable autocomplete for currency input field
$('#CURRENCY').autocomplete({
source: currency
});

// (Optional) Populate dropdown instead of autocomplete
// currency.forEach((data) => {
//   $("select[name='CURRENCY']").append(`<option value=${data}>${data}</option>`);
// });
});

// Trigger conversion whenever key fields change
$("input[name='CURRENCY'], input[id='AMOUNT'], select[name=productName]").on("change keyup click", function () {
JogetgetResults();
});

// Fetch conversion rates and update results
function JogetgetResults() {
fetch(`https://your-safe-api-endpoint/v4/latest/USD`)
.then(currency => currency.json())
.then(JogetdisplayResults);
}

// Perform conversion and update fields
function JogetdisplayResults(currency) {
var fromRateValue = $('input[name="CURRENCY"]').val();
let total = 0;
let fromRate = currency.rates[fromRateValue];
let toRate = currency.rates['AED'];

total += toRate / fromRate * $("input[id='AMOUNT']").val();
total = Number.isNaN(total) ? 0 : total;

// Update converted amount fields
$("input[id='amountInAed']").val(total);
$("input[id='amountInAed1']").val(total.toLocaleString('en-IN'));

// Update balance fields
$('#BalanceAmount').val((parseFloat($('[name=rembudgetAmount]').val() || 0) - total));
$('#BalanceAmount1').val((parseFloat($('[name=rembudgetAmount]').val() || 0) - total).toLocaleString('en-IN'));

// Display exchange rate information
let DividedValue = Number.isNaN(toRate / fromRate) ? 0 : (toRate / fromRate).toFixed(3);
$('#exchangeRate').val(`1 ${fromRateValue} = ${DividedValue} AED`);
$('#exchangeRate1').val(`1 ${fromRateValue} = ${DividedValue} AED`);
}
});
</script>

🧠 Example Use Cases
✅ Expense Forms — Automatically convert foreign expenses into AED.
✅ Quotation Requests — Display AED equivalent of multi-currency offers.
✅ Budget Management — Show live exchange rate for spending insights.

🛠 Customization Tips
💡 Replace "AED" and "USD" with your preferred base and target currencies.
💡 You can use a dropdown instead of autocomplete by uncommenting the related lines.
💡 Adjust toLocaleString('en-IN') for your region (e.g., 'en-US' for US format).

🚀 Key Benefits
✅ Fully client-side — no backend logic needed.
✅ Reduces human error in currency entry.
✅ Provides real-time and transparent conversion.
✅ Easy to extend or modify for multiple targets.

🔒 Security Note
Always use a trusted and HTTPS-secured API endpoint to fetch exchange rates.
Avoid exposing sensitive API keys directly in client-side code.

🏁 Final Thoughts
This lightweight JavaScript solution empowers Joget users to manage real-time currency conversion directly in forms — boosting both usability and data accuracy.