Using JS to set a text field that is passed via Ajax to serverside php isn't grabbing current value

crcucb

Below is code I am using to populate my DT:

    var maintable = new DataTable('#Stats', {
        serverSide: false,
        processing: true ,
        
         ajax: { url:'php/Stats.php', 
        type: 'POST',
              data: {
                pageAID: thisPageAID,
               groupLevel: (document.getElementById("txtGroupBy")).value,
               vsTimeIncrementHrs: (document.getElementById("txtpVs")).value,

            }
        },

I added buttons which sets the value in the two text fields (txtGroupBy & txtpVs) & issues a dt.ajax.reload, but when I inspect the posted parameters in Stats.php, the values are always set to the initial default values.

buttons: [
                        {
                            text: 'Ward, District, Party',
                            action: function (e, dt, node, config) {
                                pGroupLevel='Ward, District, Party';
                                    (document.getElementById("txtGroupBy")).value = pGroupLevel;
                    dt.ajax.reload(); // Reloads the data from the server
                            }
                        },

from stats.php

if ( isset($_POST['groupLevel']) ) {
     $groupLevel =  $_POST['groupLevel'];

};
log_message("groupLevel  " . $groupLevel, '../logs/debug.log', 'DEBUG', $_SERVER['PHP_SELF'], False);

allan

 data: {
            pageAID: thisPageAID,
           groupLevel: (document.getElementById("txtGroupBy")).value,
           vsTimeIncrementHrs: (document.getElementById("txtpVs")).value,
 
        }

This is evaluated once, at initialisation time. If you want it to evaluate on each Ajax call, you need to use ajax.data as a function. e.g. in this case:

data: function (d) {
  d.pageAID = thisPageAID;
  d.groupLevel = document.getElementById("txtGroupBy").value;
  d.vsTimeIncrementHrs = document.getElementById("txtpVs").value;
}

Allan