getField in Elementor Custom Code with JavaScript

• Benki

• May 17, 2021 at 10:56 pm

Hi there,

hope there is someone, who can give me a hint. Perhaps I’m on the wrong track and there is a much easier solution.

I fill in a ACF at the post, let it be field named ‘ABC’ with value ‘V123’.
This field should be used to make an XMLHttp-request to an external site.

I use Elementor as my page-builder.

The JavaScript-Code to execute the XMLHttp-request is a code-snippet in Elementor’s “Custom Code” loaded before the </body> closing tag.

xhr.open("GET", "https://some.api.com/?key=V123&param1=efg&param2=hij");
xhr.setRequestHeader("api-key", "123lkj13345kljh235kh235");
xhr.setRequestHeader("api-host", "someapi.api.com");

xhr.send(data);

It all works fine, if the key is set constant as above: /?key=V123&param1 , but I fail if I try to make it variable like ?key=”.acfValue.”&param1

var acfValue = acf.getField('ABC');
xhr.open("GET", "https://some.api.com/?key=".acfValue."&param1=efg&param2=hij");
...

I get:
acf is not defined
acf.getField is not a function

Summary:
Post – ACF-Field > loaded in Elementor Custom Code Skript on page > pass to JS-Api XMLHttp-Request

Is this the easiest way to get the ACF-Field in my Elementor Custom Code JavaScript – Snippet?
If so, where is my mistake of thought?
If not, is there another way?

Thanks in advance

Best regards

Benki

• Benki

• May 17, 2021 at 11:51 pm

* +acfValue+