keyup event (v2020)

I need some help on:
how I can query database form client side and return some values to client side add page
I have one text field , and on I enter name values if i event is KeyUp , I want to get the balance amount from the table account and display it on popup as a text

i have try to use this code , but it does not work

{ // keys = event types, values = handler functions
	"change keyup": function(e) {
		// Your code
var $row=$(this).fields();
		var str=$row["p_name"].val();
//function showHint(str) {
  if (str.length == 0) { 
    document.getElementById("x_txtHint").innerHTML = "";
    return;
  }
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("x_txtHint").innerHTML =
    this.responseText;
  }
  xhttp.open("GET", "showcustbala.php?name="+str,true);
  xhttp.send();

	}
}

so many thanks for guide us

You may press F12 and check whether any Javascript error message from Console panel of your browser.

this the error i found

Uncaught TypeError: Cannot set properties of null (setting ‘innerHTML’)
at a.onload (userevt.js:1:505)
please help

The error means in your client side code you use xxx.innerHTML but xxx is null, you may review your code.

this the code could please help and check it

{ // keys = event types, values = handler functions
	"change ": function(e) {
		// Your code
var $row=$(this).fields();
		var str=$row["p_name"].val();

  if (str.length == 0) { 
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("txtHint").innerHTML =
    this.responseText;
  }
  xhttp.open("GET", "showcustbala.php?name="+str,true);
  xhttp.send();

	}
}

and this is the code from the: showcustbala.php

<?php
 $name=$_GET["name"];
echo"<table>";
echo"<tr ><td><b>رصيد العميل</b></td></tr>";
$multirec=Conn()->execute("select sum(overhim) as ovh,sum(forhim) as fhm from account where acc_name='$name'");
$ROWS = $multirec->GetRows();
if (count($ROWS) > 0) {
foreach($ROWS AS $ROW){
$ovh=$ROW['ovh'];
$fhm=$ROW['fhm'];
$bal=$ovh-$fhm;
echo"<tr ><td><b>".$bal."</b></td></tr></table>";

?>

and this the field in the addpage

<div>	<p> <span id="txtHint"></span></p></div>

Kindly please check it i could not find how to correct it

arbei wrote:

The error means in your client side code you use > xxx.innerHTML > but > xxx > is null

SOHIB wrote:

document.getElementById(“txtHint”).innerHTML = “”;

Your id is wrong.

Yes , thank you for help,
it was the id selectorI have one more question
now this div is displayed on the add page at the bottom , if I want to to display this div on overly on the page
is there any hint please how I could do it, just to inform about this value by small window and then i can close it

Did you mean you want to display it on a Modal dialog window? You may use Javascript code in your Startup Script, for example:ew.alert(“Something”);

Ok, thanks for help
I try to use ew.alert()
but I could not display the balance value in alert ,or exactly i don’t know where i should to put this could
i have three part
1-custm template add where i have the

which I display the value now on which is working when I
2-other codes is client side scripts
3-other code in php file , all those parts code are submitted here in pervious
so could please look throw the codes I have sent and see how i can display the $bal variable which is in php file

You may read Using Route_Action server event.

Hello , thansk again
I am using v2020 and no route_action server

is there any way to do it with my version

You may Create Your Own API Action (refer to the help file of your version).