Why does the exchange rate consistently show as N/A in the code below after selecting a currency pair, and how can this issue be resolved effectively?
I anticipate that the exchange rate value will be displayed accurately once a pair is selected.
What steps should I take to rectify this and display the rates correctly?
Are there any recommended libraries available for better conversion?
{% extends "app/base.html" %}
{% block content %}
<head>
<title>Cross-Border Payment App</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
padding: 20px;
}
form {
width: 80%;
padding: 20px;
background-color: #ffffff;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333333;
cursor: pointer; /* Add cursor style to indicate it's clickable */
}
h1:hover {
text-decoration: underline; /* Add underline effect on hover */
}
label {
font-weight: bold;
}
input[type="text"],
select {
width: 100%;
padding: 10px;
border: 3px solid #ccc;
border-radius: 4px;
margin-bottom: 10px;
}
input[type="submit"] {
width: 100%;
padding: 10px 20px;
background-color: #4CAF50;
color: #ffffff;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
.exchange-rate {
font-size: 14px;
font-style: italic;
color: #999999;
margin-top: 5px;
}
select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 10px;
}
email {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 10px;
}
.bank-options {
border: 1px solid #ccc;
border-radius: 4px;
max-height: 100px;
overflow-y: auto;
padding: 5px;
}
.bank-option {
cursor: pointer;
padding: 5px;
}
.bank-option:hover {
background-color: #f2f2f2;
}
.bank-option.disabled {
color: #999999;
cursor: not-allowed;
}
</style>
</head>
<body>
<h1>Glocal Payments</h1>
<form method="post" action="{% url 'glocal' %}" onsubmit="return validatePaymentAmount()">
{% csrf_token %}
<div class="form-field">
<label for="sender_name">Sender's Name:</label>
<input type="text" name="sender_name" id="sender_name">
</div>
<div class="form-field">
<label for="sender_account_number">Sender's Account Number:</label>
<input type="text" name="sender_account_number" id="sender_account_number">
</div>
<div class="form-field">
<label for="sender_country">Sender's Country:</label>
<select name="sender_country" id="sender_country">
<option value="">Select Country</option>
<option value="USA">USA</option>
<option value="Nigeria">Nigeria</option>
</select>
</div>
<!-- Other form fields omitted for brevity -->
{% block scripts %}
<script>
function calculateExchangeRate() {
var senderCurrency = document.getElementById("sender_currency").value;
var recipientCurrency = document.getElementById("recipient_currency").value;
// Define the exchange rates
var exchangeRates = {
"USD-NGN": 770.00, // Exchange rate from USD to NGN
"NGN-USD": 1 / 770.00, // Exchange rate from NGN to USD
// Add other currency pairs and their respective exchange rates here
};
var currencyPair = senderCurrency + "-" + recipientCurrency;
var exchangeRate = exchangeRates[currencyPair];
// Display the exchange rate or "N/A"
var exchangeRateField = document.getElementById("exchange_rate");
if (exchangeRateField) {
if (exchangeRate !== undefined) {
exchangeRateField.textContent = "Exchange Rate: " + exchangeRate.toFixed(4);
} else {
exchangeRateField.textContent = "N/A";
}
}
}
// Call the calculateExchangeRate function initially and on currency selection change
document.getElementById("sender_currency").addEventListener("change", calculateExchangeRate);
document.getElementById("recipient_currency").addEventListener("change", calculateExchangeRate);
calculateExchangeRate(); // Call it initially to display the exchange rate for the selected currency pair
</script>
{% endblock %}
</form>
</body>
{% endblock %}