Home Forums Backend Issues (wp-admin) Calculated values while completing fields Reply To: Calculated values while completing fields

  • @hube2, thanks for the links. I had looked over those links, before posting this, but your suggestion confirmed my choice of approach.

    I was able to figure it out after a few hours.

    For those trying something similar, I ended up included this in the theme functions.php file, but be sure to load it correctly in your script stack:

    function my_admin_enqueue_scripts() {
    	wp_enqueue_script( 'katalyst-admin-js', get_template_directory_uri() . '/js/admin.js', array(), '1.0.0', true );

    My admin.js file looked like this:

    // Scoring Averages, on Load
    acf.add_action('ready', function( $el ){
      // $el will be equivalent to $('body')
      // Relevancy Calculation
        // Selects all Relevancy input fields (html node list)
        const relevancyElements = [...document.querySelectorAll('.relevancy-data input')];
        // Function to calculate Relevancy
        function relevancyCalc() {
          // Creates an array of values from the selected input field html (usable values)
          var relevancyScores = (obj) {
            return obj.value;
          // Function to remove values outside of the 1-5 range also which removes null and undefined
          function hasValue(value) {
            return Number(value >= 1 && value <= 5);
          // Filters values based on the above function (1-5, no null or undefined)
          var relevancyFiltered = relevancyScores.filter(hasValue);
          // Calculating total of comlpeted values (number)
          var relevancyTotal = 0;
          for(var i = 0; i < relevancyFiltered.length; i++) {
            relevancyTotal = relevancyTotal + Number(relevancyFiltered[i]);
          // Calculating the average of completed values (number)
          var relevancyAverage = relevancyTotal / relevancyFiltered.length;
          // Removing all but two decimals
          var relevancyAverageDecimals = relevancyAverage.toFixed(2);
          // Updates the average field
          document.querySelector('#relevancy-average p').innerHTML = relevancyAverageDecimals;
          // Show values in console
        // Run the function on Load
        // Adding event listeners to each element, on Load, to run the function again when a value is updated
        for (var i = 0 ; i < relevancyElements.length; i++) {
          relevancyElements[i].addEventListener('input' , relevancyCalc , false ) ; 

    Essentially, the code checks over each number field, per scoring section (ex: ‘.relevancy-data input’), maps the values into an array, filters out any results outside of the scoring range (1-5, which also removes NAN and undefined to better calculate the average as the fields are completed), averages the values, trims them to 2 decimals, and updates a message field with the average as inputs are entered.

    Definitely a lot of work, but a good exercise for a designer-dev like myself.

    Thanks again for the help, John.