Question

How to integrate an Exchange Rate API into a classic form?

Forms Classic Form Designer

Updated July 14, 2023

asked on July 12, 2023 • Show version history

I created a free account on exchangerateapi.com and copied the following code from their examples page:

// set endpoint and your access key
endpoint = 'latest'
access_key = 'xxxxxxxx';

// get the most recent exchange rates via the "latest" endpoint:
$.ajax({
    url: 'https://api.exchangeratesapi.io/v1/' + endpoint + '?access_key=' + access_key,
    dataType: 'jsonp',
    success: function(json) {

        // exchange rata data is stored in json.rates
        alert(json.rates.MXN);

        // base currency is stored in json.base
        alert(json.base);

        // timestamp can be accessed in json.timestamp
        alert(json.timestamp);

    }
});

What I would like to do is to pass the currency value in q12 to the json.rates call and have the results stored in q15. What do I need to do with this code in order to get that to work?

Thanks for any assistance.

0 0

Answer

SELECTED ANSWER

replied on July 13, 2023

When you assign classes to a field, your assigning the class to the DIV parent and never the field itself, so you would have to click the DIV which you can't really see.

Since when you click on a radio button input it changes the value of the input, that means you could use $('.currencyCode input').on('change', function()

1 0

Replies

replied on July 12, 2023

How about using an if else statement that sets a local rate variable using the correct jason.rates variable.

var code = $('currencyCode input').val();
var rate = -1;
if(code == "USD"){
 rate = json.rates.USD;
}else if(code == "CAD"){
 rate = json.rates.CAD;
}etc etc etc

0 0

View 1 previous reply

replied on July 13, 2023

Thanks for the response Chad. Currently, I'm trying the following in order to trigger the API call when a radio button is clicked (class = currencyCode). In the console I'm only seeing the MouseUp fire and the code doesn't appear to be running:

$('.currencyCode').click(function() {
endpoint = 'latest'
access_key = 'xxxxxx';
// get the most recent exchange rates via the "latest" endpoint:
$.ajax({
    url: 'https://api.exchangeratesapi.io/v1/' + endpoint + '?access_key=' + access_key,
    dataType: 'jsonp',
    success: function(json) {

var code = $('currencyCode input').val();
var rate = -1;

rate=json.rates($(code)); 
console.log($(code));      
$('.target input').val==rate;

        // exchange rata data is stored in json.rates
       // alert(json.rates.MXN);

        // base currency is stored in json.base
       // alert(json.base);

        // timestamp can be accessed in json.timestamp
        //alert(json.timestamp);

    }
});

    
  });

0 0

SELECTED ANSWER

replied on July 13, 2023

When you assign classes to a field, your assigning the class to the DIV parent and never the field itself, so you would have to click the DIV which you can't really see.

Since when you click on a radio button input it changes the value of the input, that means you could use $('.currencyCode input').on('change', function()

1 0

replied on July 13, 2023 • Show version history

Just confirming - sorry if it's an obvious question - you're on the Classic Designer and your code example is wrapped within a document ready block, correct?

The code on line 10 (which includes this: $('currencyCode input').val() ) is probably going to return USD every time, because the first input element in the radio button is USD. I'm assuming you want to get the value from the checked radio button, which would require something this: $('currencyCode input:checked').val()

Also, lines 2 and 3 ( endpoint = 'latest' and access_key = 'xxxxxx'; ), you've declared those variables elsewhere in your code, correct?

1 0

replied on July 13, 2023 • Show version history

Hi Matt and Chad,

I originally did not have it wrapped in the document ready block but moved it a bit later. You both suggested currencyCode input and I've changed it to that, so that is working better. I also added "var" in front of those variables; it wasn't in their example code, so I added it to my form's code.

It seems my last challenge is getting a response from their server, which is going to be problematic since the free account only allows HTTP GET and not HTTPS. I tried changing the URL in the code, but I get an error indicating that my LF server which is running https cannot make a call to an http server due to security.

Mixed Content: The page at 'https://lfm.taproduce.com/Forms/design/scripts/326' was loaded over HTTPS, but requested an insecure script 'http://api.exchangeratesapi.io/v1/latest?access_key=xxxxx&callback=jQuery35101846409925284993_1689284923213&_=1689284923214'. This request has been blocked; the content must be served over HTTPS.
send @ VM24848 jquerymin:1
ajax @ VM24848 jquerymin:1
n.ajax @ VM24848 jquerymin:1
(anonymous) @ 1:226
dispatch @ VM24848 jquerymin:1
y.handle @ VM24848 jquerymin:1

0 0

replied on July 13, 2023

I moved the function inside the Document.Ready function and ran a test; I got the following error in the console:

0 0

View 1 previous reply

replied on July 13, 2023

Looks like they do not allow anonymous authentication (403 means they want you to authenticate with credentials). The method of using a password inside of the URI (access_key) may no longer be supported. Does it work when you try to anonymously reach that link using a web browser?

2 0

replied on July 13, 2023

Yeah, I just posted a response above indicating the issue with the API calls for the free account on their server. I can only make http calls with the free account...works fine if I just use a URL in a web page.

0 0

replied on July 13, 2023 • Show version history

I can not imagine you have any options to use an HTTP request from the browser without dropping all encryption from your entire forms product or using a super old internet browser.

No modern browser manufacture will allow you to make an HTTP request from an HTTPS site, even if you know the data is not something confidential. They don't want users seeing that the site is secure while your script is unknowingly asking their browser to make unsecure requests.

The typical solution here would be to have workflow make the request and pass the non-confidential data back to Forms.

You can use the HTTP Post activity in WF to do this but the user will have to submit and wait for the workflow to complete. Use automatically display the next task.

By using script your asking the end user's workstation to make the API call. By using Workflow, your private server is making the API call and encryption is entirely optional now.

Edit: A second idea is to have workflow gather the data weekly and put it in a database for instant lookup.

2 0

replied on July 14, 2023

Good ideas. Thanks for the input.

0 0

You are not allowed to follow up in this post.

Question

Question

How to integrate an Exchange Rate API into a classic form?

Answer

Replies

Sign in to reply to this post.