When I came across the site , I was impressed by their feature that allows users to select their currency. By changing the currency, the symbol beside the amount entered also changes accordingly.
I am interested in incorporating a similar feature on my website, but I am unsure of how to proceed. Can anyone provide guidance on how to achieve this?
Please bear with me as I have some experience in creating websites, but nothing too complex or extraordinary.
The website's code operates on the client-side and is quite straightforward.
By clicking the link, Javascript activates to display a selection popup div.
Upon selecting an item from the popup div, more Javascript is triggered. This Javascript alters:
€)...and then closes the popup div.
Edit: It seems that you also require the jQuery library to utilize the code provided in my response :) You can substitute your own Javascript code to achieve the same results, although it won't mirror the code below exactly.
Here is the code directly extracted from "view source":
The box for the amount:
<div class="amt_box bg_white">
<label class="currency-display">$</label>
<input type="text" name="Funds[goalamount]" value="" class="big-field"
tabindex="1" />
</div>
The link that triggers the popup div:
<h4>Display: <a href="#" class="currency-select">US Dollars</a></h4>
The popup div:
<div class="currency currency-select-div" style="position:absolute; display:none;margin-left:45px;">
<ul>
<li><a href="#" class="currency-item" title="$" code="USD">$ USD Dollar</a></li>
<li><a href="#" class="currency-item" title="$" code="CAD">$ CAD Dollar</a></li>
<li><a href="#" class="currency-item" title="$" code="AUD">$ AUD Dollar</a></li>
<li><a href="#" class="currency-item" title="£" code="GBP">£ GBP Pound</a></li>
<li><a href="#" class="currency-item" title="€" code="EUR">€ EUR Euro</a></li>
</ul>
</div>
The hidden form field:
<input type="hidden" id="currencyfield" value="USD" name="Organizations[currencycode]" />
The Javascript (jQuery) code that links everything together:
$('.currency-select').click(function() {
$('.currency-select-div').show();
return false;
});
$('.currency-item').click(function() {
$('.currency-select-div').hide();
$('.currency-display').text($(this).attr('title'));
$('.currency-select').text($(this).text());
$('#currencyfield').val($(this).attr('code'));
If you want to customize the text using a drop-down list, the first step is to give it a unique identifier.
<span id="currencySymbol">$</span>
Next, create a drop-down list with your desired values.
<select id="currencySelect">
<option value="$">Dollars</option>
<option value="£">Pounds</option>
<option value="€">Euros</option>
</select>
Finally, you'll need to utilize JavaScript to update the text based on the selected value from the drop-down list.
document.getElementById('currencySelect').onchange = function(){
document.getElementById('currencySymbol').innerHTML = this.value;
}
Why create a separate <ul> when visually both unordered lists and ordered lists look the same? <head> <title>Changing Numbering Type in an HTML Unordered List Using CSS</title> <style> ol { list-s ...
In my current project involving an API, I encountered a problem. I utilized axios to fetch data from the API, which returned a JSON array. Each array item had a radio value that I appended to it. Despite attempting to use v-model to track changes in the ra ...
I'm currently working with two models: User and Foto. In my application, each User can have multiple fotos, and each foto is associated with only one user. My challenge lies in using the include function. I am able to use it when querying for the us ...
I have been given a task to compare all columns within a schema with the trends of the same columns. To achieve this, I have created a query that generates bulk insert statements. The total number of insert statements will exceed 50K+. The SQL query I have ...
Upon executing npm ls react, the following output is displayed: PS > npm ls react ├─┬ @headlessui/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfbdaaaeacbb8ffee1f8e1fefa">[email protected]</a> │ └ ...
Within my Sails.js application, I am currently attempting to retrieve the total number of users that have been approved in my database and utilize this count variable within my view by employing the count() query. Below is the snippet of code present in my ...
When working on my project, I encountered an issue while trying to add CSS styles to three <div> structures with unique IDs. Strangely, making small changes to unrelated CSS caused elements to go from being stylized to losing their style. If you com ...
Is there a way to extract the href link and text from a specific type of link? <a href="google.com">boom</a> I am looking to retrieve only the 'google.com' part and the text 'boom' Furthermore, how can I filter out other ...
After recently updating to Compass version 1.0.16, I started setting up basic usage of the new animation features. However, I encountered an issue where setting default values for different animation settings did not take effect. This led me to hard-code t ...
Searching for information on browser autocomplete and form saving can be tricky, especially when trying to find solutions related to custom autocomplete with ajax. Many developers are interested in customizing autocomplete features for various reasons such ...
Lately, I've been utilizing switchNavigator for navigating between different views in my app. However, I'm now experimenting with drawerNavigator. Passing props with switchNavigator is quite straightforward since I navigate through a button, like ...
My useEffect function triggers a request when changing dependencies (department and two dates fields). useEffect(() => { getFilteredRestReport({ date_start: formatDatePatchPoint(date[0]), date_end: formatDatePatchPoint(date[1]), de ...
In my Angular Resolver, I am facing a scenario where I need to wait for two server calls. The catch is that the second server call is optional and can be skipped based on user input. This data retrieval process is crucial for loading the next page seamless ...
My webpage has multiple buttons that can be clicked very quickly, but it seems like Chrome is struggling to keep up with the speed? $(document).ready(function() { $('.favorite-button').unbind('click').click(function() { addLine ...
I am trying to send data from the controller to AJAX as an array, but I am encountering the following error: json_encode() expects parameter 2 to be integer, object given Below is my code snippet: function get_show(Request $request) { $i ...
Utilizing waypoints and windows to display the panels similar to the fiddle example I have created: http://jsfiddle.net/6bMMa/1/ Everything is functioning correctly, however, I have only managed to make it work by using id numbers on the panel divs. The ...
When the user clicks, an AJAX call is made to retrieve data from a third-party API. The frontend/layout renders correctly before this action; however, after the data is fetched and displayed in the frontend, the layout changes. Upon debugging multiple tim ...
After entering all the required data and clicking on the Apply Now button, it is not saving. However, when attempting to create it manually, the process completes in less than 15 seconds. Attached is a screenshot for reference. Here is the relevant HTML ...
I am struggling to display a Font Awesome icon on top of a Materialize CSS progress/determinate div. Unfortunately, the icon is not fully visible and part of it gets clipped or hidden. Despite trying various solutions, I have not been successful. .progres ...
I am trying to showcase static images as maps using a StaticImage layer in ol3, with the image size set at 100% in pixels. However, I am facing difficulty in ensuring that the displayed images are always the correct size based on the extent and zoom variab ...