Highlight the choosing name and display data

Hi…

I don’t know if it is javascript or css issue.

I have a navigation list of my employee names and when I click the name his data will display at the right side.

I used onclick for displaying data. Now my superior suggested that much better if he used key done using mouse in choosing employee name. He suggested that the employee that was choose was highlighted then automatically his data will displayed using key. like arrow down and up key. Is it possible? how?

I think should i used onkeyup?but i don’t know how it is highlighted?

here is my code for displaying employee names:

search.php


<?php   
session_start();
include 'config.php';

$queryString = $_GET["query"];

if ($queryString == "" || $queryString == null) {

$sql = "SELECT EMP_ID, CONCAT(LNAME, ', ',  FNAME, ' ', MI, '.') AS FULLNAME FROM PERSONAL 
        ORDER BY FULLNAME ASC";
}
else {


$sql = "SELECT EMP_ID, CONCAT(LNAME, ', ',  FNAME, ' ', MI, '.') AS FULLNAME FROM PERSONAL WHERE CONCAT(LNAME, ', ',  FNAME, ' ', MI, '.')  LIKE '" . $queryString . "%' ORDER BY FULLNAME ASC";

}

$recPersonalQuery = $conn->Execute($sql);
if (!$recPersonalQuery->BOF) {
    $recPersonalQuery->MoveFirst();
}

echo "<hr />";
echo "<ul>";
while (!$recPersonalQuery->EOF) {
    $empID   = $recPersonalQuery->fields["EMP_ID"]; 
    $empFullName = $recPersonalQuery->fields["FULLNAME"];

  echo "<li onclick=changeEmployeePay('$empID'); style= 'font-family:'Times New Roman',Times,serif; font-size:10%;'>$empFullName</li>";
    echo "<hr />";
    $recPersonalQuery->MoveNext();
} 
echo "</ul>";

$recPersonalQuery->Close();
exit(); 

display names


<script>
function searchemppay(queryString) {
    var ajaxRequest = remoteRequestObject();
    ajaxRequest.onreadystatechange = function() {
        if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
            var result = ajaxRequest.responseText;
            document.getElementById('searchpayroll').innerHTML = result;
        } 
    } 
    var url = "search.php?query=" + queryString;
    ajaxRequest.open("GET", url, true);
    ajaxRequest.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
    ajaxRequest.send(null);

}

function changeEmployeePay(queryID) {

window.location = "SearchData.php?queryEmpID=" + queryID;
}
</script>

<div id="Search">
<form>
<p class="serif"><b>Search Lastname:</b></p>
<input type="text" name="search_" size="20" onkeyup="searchemppay(this.value);">  
<div id="searchpayroll" style="overflow:auto; height:390px; width:auto; margin-left:2px" >
<hr />
<ul>
{section name=co_emp loop=$personalAll}
<li onclick="changeEmployeePay('{$personalAll[co_emp].EMP_ID}')">{$personalAll[co_emp].FULLNAME}</li>
<!--<li onkeyup="changeEmployeePay('{$personalAll[co_emp].EMP_ID}')">{$personalAll[co_emp].FULLNAME}</li>-->
<hr />
{sectionelse}
<li>No records found</li>
{/section}
</ul>
</div>
</div>

If you have queation for further understanding of my thread feel free to ask me…

Any help is highly appreciated.

Thank you so much

Hi,

It’s a javascript question.
It’s much easier to work with javascript when it’s not embedded in the HTML - it’s better to structure your HTML like this, which will work without javascript as well.


<ul id="items">
  <li><a href="SearchData.php?queryEmpID=$personalAll[co_emp].EMP_ID}">$personalAll[co_emp].FULLNAME}</a></li>
</ul>

The keyup event needs to be on the document itself if you’re not wanting to capture it on specific form elements, like typing in an input.
This type of code should get you started.


document.onkeyup = function(e){
  e = window.event || e;
  var key = e.charCode || e.keyCode;
  if (key == 38) {
    // up pressed
  }
  else if (key == 40) {
    // down pressed
  }
}

where I put this code:


document.onkeyup = function(e){
  e = window.event || e;
  var key = e.charCode || e.keyCode;
  if (key == 38) {
    // up pressed
  }
  else if (key == 40) {
    // down pressed
  }
}

What do you mean not embedded in html?

here is my html file:


<html>
<head>
<title></title>
<script>
function searchemppay(queryString) {
    
    var ajaxRequest = remoteRequestObject();
    ajaxRequest.onreadystatechange = function() {
        if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
            var result = ajaxRequest.responseText;
            document.getElementById('searchpayroll').innerHTML = result;
        } 
    }
    var url = "search.php?query=" + queryString; 
    ajaxRequest.open("GET", url, true);
    ajaxRequest.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
    ajaxRequest.send(null);

}

function changeEmployeePay(queryID) {
window.location = "SearchData.php?queryEmpID=" + queryID;
}
</script>
</head>
<body>
<div id="Search">
<form>
<p class="serif"><b>Search Lastname:</b></p>
<input type="text" name="search_" size="20" onkeyup="searchemppay(this.value);">  
<div id="searchpayroll" style="overflow:auto; height:390px; width:auto; margin-left:2px" >
<hr />
<ul>
{section name=co_emp loop=$personalAll}
<li onclick="changeEmployeePay('{$personalAll[co_emp].EMP_ID}')">{$personalAll[co_emp].FULLNAME}</li>
<hr />
{sectionelse}
<li>No records found</li>
{/section}
</ul>
</div>
</div>
</body>
</html>

this part sould i change?


<div id="searchpayroll" style="overflow:auto; height:390px; width:auto; margin-left:2px" >
<hr />
<ul>
{section name=co_emp loop=$personalAll}
<li onclick="changeEmployeePay('{$personalAll[co_emp].EMP_ID}')">{$personalAll[co_emp].FULLNAME}</li>
<hr />
{sectionelse}
<li>No records found</li>
{/section}
</ul>
</div>

should I need to add id in ul??
even though i have id in div?its not the same?

do i need to revised my functions?

Thank you

Actually i used template.

my javascript is in header.tpl


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  -->
<!--<html xmlns="http://www.w3.org/1999/xhtml"> -->
<html>
<head>
<meta http-equiv="Pragma" content="no-cache">
<!--<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />--> 
<title>DSPI Payroll System</title> 

<link rel="stylesheet" type="text/css" href="paycss.css" />

<script>
function searchemppay(queryString) {

    
    var ajaxRequest = remoteRequestObject();
    ajaxRequest.onreadystatechange = function() {
        if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
            var result = ajaxRequest.responseText;
            document.getElementById('searchpayroll').innerHTML = result;
        } 
    }
    var url = "search.php?query=" + queryString; 
    ajaxRequest.open("GET", url, true);
    ajaxRequest.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
    ajaxRequest.send(null);

}

function changeEmployeePay(queryID) {

window.location = "SearchData.php?queryEmpID=" + queryID;

}
</script>

<body onload="document.forms[0].reset()">
<form name="sampleform" method="post" enctype="multipart/form-data">
<h2 class="sysname"> Payroll System </h2>
</div>
<div class="btn">
<input type="button" name="General" value="General" onclick="displaygeneral()">
<input type="button" name="Attendance" value="Attendance" onclick="attendance()">
<input type="button" name="OT" value= "OT Form" onclick="OtFrm()">
<input type="button" name="loan" value= "Loan Form" onclick="loanFrm()">
<input type="button" name="logout" value="Log Out" onclick="payOut()">
</div>

left.tpl //where the name list display here:


<script>
document.onkeyup = function(e){
  e = window.event || e;
  var key = e.charCode || e.keyCode;
  if (key == 38) {
    // up pressed
  }
  else if (key == 40) {
    // down pressed
  }
}
</script>
<div id="Search">
<form>
<p class="serif"><b>Search Lastname:</b></p>
<input type="text" name="search_" size="20" onkeyup="searchemppay(this.value);">  
<!--<div id="searchpayroll" style="overflow:auto; height:390px; width:auto; margin-left:2px" >-->
<hr />
<ul id="searchpayroll" style="overflow:auto; height:390px; width:auto; margin-left:2px">
{section name=co_emp loop=$personalAll}
<!--<li onclick="changeEmployeePay('{$personalAll[co_emp].EMP_ID}')">{$personalAll[co_emp].FULLNAME}</li>-->
<li><a href="SearchData.php?queryEmpID=$personalAll[co_emp].EMP_ID}">{$personalAll[co_emp].FULLNAME}</a></li>
<hr />
{sectionelse}
<li>No records found</li>
{/section}
</ul>
</div>
</div>

and here is the search.php


<?php     
session_start();
include 'config.php';

$queryString = $_GET["query"];

if ($queryString == "" || $queryString == null) {

$sql = "SELECT EMP_ID, CONCAT(LNAME, ', ',  FNAME, ' ', MI, '.') AS FULLNAME FROM PERSONAL 
        ORDER BY FULLNAME ASC";
}
else {
$sql = "SELECT EMP_ID, CONCAT(LNAME, ', ',  FNAME, ' ', MI, '.') AS FULLNAME FROM PERSONAL WHERE LNAME LIKE '" . $queryString . "%' ORDER BY FULLNAME ASC";

}

$recPersonalQuery = $conn->Execute($sql);
if (!$recPersonalQuery->BOF) {
    $recPersonalQuery->MoveFirst();
}

echo "<hr />";
echo "<ul>";
while (!$recPersonalQuery->EOF) {
    $empID   = $recPersonalQuery->fields["EMP_ID"]; 
    $empFullName = $recPersonalQuery->fields["FULLNAME"];

    echo "<li onclick=changeEmployeePay('$empID'); style= 'font-family:'Times New Roman',Times,serif; font-size:10%;'>$empFullName</li>";
    echo "<hr />";
    $recPersonalQuery->MoveNext();
} 
echo "</ul>";

$recPersonalQuery->Close();
exit();   
?>

and the SearchData.php


<?php
session_start();

$queryStr = trim($_GET["queryEmpID"]);

$_SESSION['empID'] = $queryStr; 

session_write_close();
header("Location:DisplayEmpPayroll.php");
exit();
?>

yet, the onkeyup did not work…what’s wrong in my code?

Thank you

What do you mean not embedded in html?

I mean you should always keep your HTML, CSS & javascript completely separate, even in separate files. Remove the onclick / onkeyup and style attributes and put these where they should be.

should I need to add id in ul??
even though i have id in div?its not the same?

The reason I added the id to the UL is that you are going to need some way of navigating that list and selecting items with the up and down keys.
The id on the ul is the easiest way to get it.

yet, the onkeyup did not work…what’s wrong in my code?

It did work, it’s just the code I gave you wasn’t complete, only a starting point.

You will need to something along these lines in javascript to make up and down select a link …


window.onload = function() {
  var ul = document.getElementById('searchpayroll');
  var links = ul.getElementsByTagName('a');
  var i = 0;
 
  document.onkeyup = function(e){
    e = window.event || e;
    var key = e.charCode || e.keyCode;
    if (key == 38) {
      // up pressed
      if (i < links.length - 1) i++;
    }
    else if (key == 40) {
      // down pressed
      if (i > 0) i--;
    }
    // focus on link
    links[i].focus();
    // request content in here for link with ajax
    alert(links[i].href);
  }
}

Hi…

I revised my code as your suggestion:

I did not change my header.tpl.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  -->
<!--<html xmlns="http://www.w3.org/1999/xhtml"> -->
<html>
<head>
<meta http-equiv="Pragma" content="no-cache">
<!--<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />--> 
<title>DSPI Payroll System</title> 

<link rel="stylesheet" type="text/css" href="paycss.css" />

<script>
function searchemppay(queryString) {

    
    var ajaxRequest = remoteRequestObject();
    ajaxRequest.onreadystatechange = function() {
        if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
            var result = ajaxRequest.responseText;
            document.getElementById('searchpayroll').innerHTML = result;
        } 
    }
    var url = "search.php?query=" + queryString; 
    ajaxRequest.open("GET", url, true);
    ajaxRequest.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
    ajaxRequest.send(null);

}

function changeEmployeePay(queryID) {

window.location = "SearchData.php?queryEmpID=" + queryID;

}
</script>

<body onload="document.forms[0].reset()">
<form name="sampleform" method="post" enctype="multipart/form-data">
<h2 class="sysname"> Payroll System </h2>
</div>
<div class="btn">
<input type="button" name="General" value="General" onclick="displaygeneral()">
<input type="button" name="Attendance" value="Attendance" onclick="attendance()">
<input type="button" name="OT" value= "OT Form" onclick="OtFrm()">
<input type="button" name="loan" value= "Loan Form" onclick="loanFrm()">
<input type="button" name="logout" value="Log Out" onclick="payOut()">
</div>

I change my left.tpl:


<script>
window.onload = function() {
  var ul = document.getElementById('searchpayroll');
  var links = ul.getElementsByTagName('a');
  var i = 0;
 
  document.onkeyup = function(e){
    e = window.event || e;
    var key = e.charCode || e.keyCode;
    if (key == 38) {
      // up pressed
      if (i < links.length - 1) i++;
    }
    else if (key == 40) {
      // down pressed
      if (i > 0) i--;
    }
    // focus on link
    links[i].focus();
    // request content in here for link with ajax
    alert(links[i].href);
  }
}
</script>
<div id="Search">
<form>
<p class="serif"><b>Search Lastname:</b></p>
<input type="text" name="search_" size="20" onkeyup="searchemppay(this.value);">  
<!--<div id="searchpayroll" style="overflow:auto; height:390px; width:auto; margin-left:2px" >-->
<hr />
<ul id="searchpayroll">
<!--<ul>-->
{section name=co_emp loop=$personalAll}
<!--<li onclick="changeEmployeePay('{$personalAll[co_emp].EMP_ID}')">{$personalAll[co_emp].FULLNAME}</li>-->
<li><a href="SearchData.php?queryEmpID={$personalAll[co_emp].EMP_ID}">{$personalAll[co_emp].FULLNAME}</a></li>
<hr />
{sectionelse}
<li>No records found</li>
{/section}
</ul>
</div>
</div>

and i also did not change my search.php and SearchData.php:


<?php     
session_start();
include 'config.php';

$queryString = $_GET["query"];

if ($queryString == "" || $queryString == null) {

$sql = "SELECT EMP_ID, CONCAT(LNAME, ', ',  FNAME, ' ', MI, '.') AS FULLNAME FROM PERSONAL 
        ORDER BY FULLNAME ASC";
}
else {
$sql = "SELECT EMP_ID, CONCAT(LNAME, ', ',  FNAME, ' ', MI, '.') AS FULLNAME FROM PERSONAL WHERE LNAME LIKE '" . $queryString . "%' ORDER BY FULLNAME ASC";

}

$recPersonalQuery = $conn->Execute($sql);
if (!$recPersonalQuery->BOF) {
    $recPersonalQuery->MoveFirst();
}

echo "<hr />";
echo "<ul>";
while (!$recPersonalQuery->EOF) {
    $empID   = $recPersonalQuery->fields["EMP_ID"]; 
    $empFullName = $recPersonalQuery->fields["FULLNAME"];

    echo "<li onclick=changeEmployeePay('$empID'); style= 'font-family:'Times New Roman',Times,serif; font-size:10%;'>$empFullName</li>";
    echo "<hr />";
    $recPersonalQuery->MoveNext();
} 
echo "</ul>";

$recPersonalQuery->Close();
exit();   
?>


<?php
session_start();

$queryStr = trim($_GET["queryEmpID"]);

$_SESSION['empID'] = $queryStr; 

session_write_close();
header("Location:DisplayEmpPayroll.php");
exit();
?>

and when I run this revise code:

and I press the Up Key, I got an Message Bor/Message from webpage saying:
http://localhost:8080/file/:/C:/xampp/htdocs/payroll/SearchData.php?queryEmpID=000001

honestly i don’t know why is it appear…

I attach the image.

I feel that is near to work…

What’s wrong in my new code?

Thank you so much for your support and help…

I appreciate it…

I feel that we are near to solved my issue…
I’m sorry , if i don’t know if why does message box was displayed…

but I tried to figured out while waiting in your reply…

Thank you so much…

I saw a bright side that we could fix it…

Again Thank you

That is the right thing to do :slight_smile:
I don’t want to solve it for you completely, you will need to study the code and make changes to make it work as you want.
The alert was only there as an example of how to get the links URL, which you will need to request with ajax to get the content and update the page.


document.onkeyup = function(e){
    e = window.event || e;
    var key = e.charCode || e.keyCode;
    if (key == 38) {
      // up pressed
      if (i < links.length - 1) i++;
    }
    else if (key == 40) {
      // down pressed
      if (i > 0) i--;
    }
    // focus on link
    links[i].focus();
    // request content in here for link with ajax
    alert(links[i].href);
  }

Hi…

I already solved the issue in displaying the employee name.

This is my revised code:


<script>
window.onload = function() {
  var ul = document.getElementById('searchpayroll');
  var links = ul.getElementsByTagName('a');
  var i = 0;
 
  document.onkeyup = function(e){
    e = window.event || e;
    var key = e.charCode || e.keyCode;
    //if (key == 38) {
      if (key == 40) { 
      // up pressed
      //if (i < links.length - 1) i++;
      if (i < links.length - 1) i++; 
    }
    else if (key == 38) {
      // down pressed
      if (i > 0) i--;
     // if (i < 0) i++; 
    }
    // focus on link
    links[i].focus();
    // request content in here for link with ajax
   // alert(links[i].href);
  }
}
</script>
<div id="Search">
<form>
<p class="serif"><b>Search Lastname:</b></p>
<input type="text" name="search_" size="20" onkeyup="searchemppay(this.value);">  
<!--<div id="searchpayroll" style="overflow:auto; height:390px; width:auto; margin-left:2px" >-->
<hr />
<ul id="searchpayroll" style="overflow:auto; height:385px; width:auto; margin-left:2px;">
<!--<ul>-->
{section name=co_emp loop=$personalAll}
<!--<li onclick="changeEmployeePay('{$personalAll[co_emp].EMP_ID}')">{$personalAll[co_emp].FULLNAME}</li> -->
<li><a href="SearchData.php?queryEmpID={$personalAll[co_emp].EMP_ID}">{$personalAll[co_emp].FULLNAME}</a></li>
<hr />
{sectionelse}
<li>No records found</li>
{/section}
</ul>
</div>
</div>

and now I encountered error in displaying employee name and displaying data when the name was search first.

here is the original code for search:


<?php    
session_start();
include 'config.php';

$queryString = $_GET["query"];

if ($queryString == "" || $queryString == null) {

$sql = "SELECT EMP_ID, CONCAT(LNAME, ', ',  FNAME, ' ', MI, '.') AS FULLNAME FROM PERSONAL 
        ORDER BY FULLNAME ASC";
}
else {
$sql = "SELECT EMP_ID, CONCAT(LNAME, ', ',  FNAME, ' ', MI, '.') AS FULLNAME FROM PERSONAL WHERE LNAME LIKE '" . $queryString . "%' ORDER BY FULLNAME ASC";
}

$recPersonalQuery = $conn->Execute($sql);
if (!$recPersonalQuery->BOF) {
    $recPersonalQuery->MoveFirst();
}

echo "<hr />";
echo "<ul>";
while (!$recPersonalQuery->EOF) {
    $empID   = $recPersonalQuery->fields["EMP_ID"]; 
    $empFullName = $recPersonalQuery->fields["FULLNAME"];

    echo "<li onclick=changeEmployeePay('$empID'); style= 'font-family:'Times New Roman',Times,serif; font-size:10%;'>$empFullName</li>";
    echo "<hr />";
    $recPersonalQuery->MoveNext();
} 
echo "</ul>";

$recPersonalQuery->Close();
exit();    

?>


and now i revised it to work the up and down key:


<?php

session_start();
include 'config.php';

$queryString = $_GET["query"];

$queryStr = trim($_GET["queryEmpID"]);

$_SESSION['empID'] = $queryStr; 

if ($queryString == "" || $queryString == null) {

$sql = "SELECT EMP_ID, CONCAT(LNAME, ', ',  FNAME, ' ', MI, '.') AS FULLNAME FROM PERSONAL 
        ORDER BY FULLNAME ASC";
}
else {
$sql = "SELECT EMP_ID, CONCAT(LNAME, ', ',  FNAME, ' ', MI, '.') AS FULLNAME FROM PERSONAL WHERE LNAME LIKE '" . $queryString . "%' ORDER BY FULLNAME ASC";

}

$recPersonalQuery = $conn->Execute($sql);
if (!$recPersonalQuery->BOF) {
    $recPersonalQuery->MoveFirst();
}

echo "<hr />";
echo "<ul>";
while (!$recPersonalQuery->EOF) {
    $empID   = $recPersonalQuery->fields["EMP_ID"]; 
    $empFullName = $recPersonalQuery->fields["FULLNAME"];
    echo "<a href='SearchData.php?queryEmpID=('$empID')'; style= 'font-family:'Times New Roman',Times,serif; font-size:10%;'>$empFullName</li>";
    echo "<hr />";
    $recPersonalQuery->MoveNext();
} 
echo "</ul>";

$recPersonalQuery->Close();
exit();    

?>


but the output is when I type one letter it was down in name list…the focus was go to name list. and also when I choose name his data was not displayed.

Thank you so much…

I also tried to figured out…

Thank you again

Now, while waiting in your reply…i tried to fix also the problem…

Thank you so much…

I resolved my problem in displaying data when I search name in search textfield…but typing in search textfield is still my problem…because everytime I type letter or after I type letter it focus in the firstname in list…

Thank you