Detecting a change on a webpage under Gateway z/OS?

When developing a web application under Gateway z/OS I have been using two different techniques to detect when the user enters, or changes, data on the webpage.

1. I have a hidden variable for the fields so that I can compare the displayed field value to the hidden value. Pros: everything is there when the user submits the page to compare. Cons: the page is larger.

2. I save the variables for each field in the session variable pool to compare. Pros: keeps the page smaller. Cons: can fill up the session pool if not managed.

Note that I'm enabling an ISPF dialog written in REXX to run under the web.

Both work well but is there a better way?

For pages where there are few fields/variables this either is good. For pages with tables there could be 100's of fields/variables.

Thanks for any tips.

It's not clear to what capacity you need these before and after values. To ensure data consistency and accuracy, compare the submitted data against the "ground truth" (the original data stored in the database or dataset) when processing the form submission. In this case, you wouldn't need to store the original data other than to prevent the race condition (updating updated data because page had old data)

Assuming you're not able to compare to the ground truth, or want to just get the changed values sent, you could use JavaScript though even if you can't use ajax.

Something like this might work for you:

• Stores the original values of all form elements in an object (originalValues) on page load.
• On form submit, it iterates through the form elements again, compares their current values with the original values, and stores the changed values in another object (changedValues).
• Generates hidden input fields for the changed values and appends them to the form.
• Submits the form.

// On page load, store original values
const originalValues = {};
document.querySelectorAll('input, select, textarea').forEach(element => {
  originalValues[element.name] = element.value;
});

// On form submit, generate input fields for changed values
document.getElementById('myForm').addEventListener('submit', event => {
  event.preventDefault();
  const changedValues = {};
  document.querySelectorAll('input, select, textarea').forEach(element => {
    if (element.value !== originalValues[element.name]) {
      changedValues[element.name] = element.value;
    }
  });
  // Generate hidden input fields for changed values
  Object.keys(changedValues).forEach(name => {
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = name;
    input.value = changedValues[name];
    document.getElementById('myForm').appendChild(input);
  });
  // Submit the form
  document.getElementById('myForm').submit();
});

This prevents need to send the user the hidden input fields, but requires all names to be unique (some edge cases, ie. array inputs could reuse the same name))

another option is to have js remove all the fields that have not been changed and only update the ones that have been passed back to the server.