Sending field settings to javascript

[hodel (Ray Hodel)]

Hi,

I am going to be adding a custom setting to the dropdown field that stores the URL of an API, which I will be using when I convert it to a Selectize dropdown. I want to pass that URL to javascript where I will be making an Ajax call then using the data returned when I initialize the Selectize object.

The additional setting for an “API URL” in the dropdown General tab.

Is there a way from Javascript to get the “API URL” setting for that dropdown?

Or how would I pass the url using wp_localize_script(). I’m currently thinking I need to use the gform_view action to enqueue the script and pass the data. But, I’m not sure how to get the setting values.

Som the JS would look something like this. I just don’t know how to get value for THEURL into the javascript.

jQuery(document).ready(function( $ ) {

    $(document).on('gform_post_render', function(event, form_id, current_page){

        $.getJSON( THEURL, function(data) {
            $('._selectize select').selectize(
                {
                    options : data
                }
            );
        }); 
    });
});

[hodel (Ray Hodel)]

Maybe I can simplify the question. What is the best way to localize a form’s field settings into javascript from PHP?

I have something working, but it doesn’t feel like the correct way. If there is a better way, please let me know.

---

I use the gform_pre_render filter hook to find the field settings I need and store it in a variable.
I then use wp_footer action hook json_encode() to output javascript to create a global variable.

class myClass
  private $mySettings = [];

  public function init() {
      add_filter( 'gform_pre_render', ($form) { 
  ...
     // Loop through fields and find the correct one.
     // Store the needed settings
     $this->mySettings[] = [ 'url' => $field['apiUrl'], 'fieldId' => $field['fieldId' ];
  ...
    } );
  
    add_action( 'wp_footer', () => { 
      ?>
        <script>mySettings = <?php print json_encode($this->mySettings); ?></script>
      <?php
     } );
  } // function
} //class