JS Field for Elementor Pro Form allows you to take advantage of JS full power to set the value of a field on Elementor Pro Form.
JS Field is a field whose value is calculated based on the value of other fields. The calculation is done in a Javascript function.
In the settings you provide the function by using this structure:
return yourFunctionHere;
for example, you could define the function the arrow syntax:
return () => { /* ... */ };
Your function should do some calculations and return its result.
return () => { return 3; }
This is not a very useful example where the field will always be 3. But you can use the function getField to get another field value:
return () => { return "Hello " + getField("name") + "!"; }
Field values are returned always as a string:
return getField("age") + 2;
If the field age has a value of 21, this would return 212! Definitely not what we intended. So if the field you want to get is a number you should pass true as the second argument to getField:
return getField("age", true) + 2;
This does what we expect and returns 23.
When the field is left empty you get NaN (Not a Number) as a result. To choose a default value to return in this situation pass it as the third parameter to the function:
return getField("age", true, 25);
getField and Checkboxes
The function getField will return an array of strings containing the selected options of the Checkbox. If no options are selected it will return the empty string. The is also valid with Multiple Select fields.
updateSelf
If you need to update the field from asynchronous code you can use the updateSelf function, updateSelf("new value").
Getting Value from ACF
In order to get the value of an ACF Field from JS Field, you can create an Elementor Hidden Field that is set with a Dynamic tag, and then you can get the value of this field from JS Field.
JS Field:
