JavaScript on an Update Form

[DonnEdwards]

I have a Visit record that contains the following fields:

patient_name
sortkey
first_name
last_name

The first two fields are read-only. I want patient_name to be the first_name followed by a space and then the last_name. I want the sortkey to be the first 3 letters of the last_name in upper case, followed by the first 3 letters of the first_name, in lower case.

I want these first two fields to be updated as soon as the user changes first_name or last_name.

I wrote a JavaScript function that calculates the field values, and I used the addEventListener() method to set up an onchange event to call my function on first_name and last_name. It works correctly on a simple HTML page, but not on my NetTalk 12 Updatevisit NetWeb form wen it is running.

<!-- Script to update Sortkey and Patient name -->
<script>
// Add onclick event to vis__sortkey and vis__patient_name
document.getElementById("vis__sortkey").addEventListener("click", fnOnChange);
document.getElementById("vis__patient_name").addEventListener("click", fnOnChange);

// Get the first 3 characters of First name and first 3 character of last name for the sort key
// Written by Donn Edwards (c) 2021 Black and White Inc
function fnOnChange() {
  var strFirst = document.getElementById("vis__first_name").getAttribute("Value");
  strFirst = strFirst.trim();
  var strLast = document.getElementById("vis__last_name").getAttribute("Value");
  strLast = strLast.trim();
  var strSort = strLast.toUpperCase() // Start the sort key with 3 upper case letters from Last Name
  strSort = strSort.substr(0, 3);
  var strName = strFirst              // Name consists of First Name and last Name
  strFirst = strFirst.substr(0, 3);
  strSort += strFirst.toLowerCase()   // Append 3 lower case letters from the First Name
  strName += ' '
  strName += strLast
  strName = strName.trim();
  document.getElementById("vis__patient_name").setAttribute("Value", strName); // Set the new patient name
  document.getElementById("vis__sortkey").setAttribute("Value", strSort);      // Set the new sort key
}
</script>

My problem is that only the onclick event on the read-only fields will fire off the function.

Is there another way to do this, with or without JavaScript? I don't want to wait until the user clicks the "Save" button before calculating these values.

Update: I finally noticed the "Client Side" tab of the field properties in the form. I have specified 'fnOnChange' for both the 'onFocus' and 'onChange' values, but neither seem to have any effect, either as 'fnOnChange()' or 'fnOnChange'. Only the onclick works.

I'm using NT 12.17

Any help will be appreciated.

[DonnEdwards]

Found it!
var strFirst = document.getElementById("vis__first_name").getAttribute("Value");
should read
var strFirst = document.getElementById("vis__first_name").value;

and so on. The only consolation of being a newbie is that I am learning ...

[Bruce]

Hi Donn,

you are doing this the hard way (in JavaScript - this would be necessary for an "disconnected app" (if that is what you are making) but not for a regular web app.

for a regular web app;
a) goto the client-side tab for firstname and lastname and tick on the "send new value to server".
b) there's also a button there to take you to the "server side embed code".
c) in that code set the SessionValues of the other fields;

  p_web.SSV('vis:patient_name',p_web.GSV('vis:first_name') & ' '& p_web.GSV('vis:last_name'))


(Actually inspect the code around that embed point - the best place for your code is in the validatevalue::vis:first_name routine. (and ditto the last name routine).

Cheers
Bruce