Onkeyup Not Triggering Php

I’m combing two scripts work fine in their own The combined script only has one onkeyup event. Everything works as expected until I enter something in the input box that’s produced by the only onclick event in the script.

Here’s my work. Why doesn’t the onkeyup event work?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function popup(popup_name) {
  document.getElementById(popup_name).style.display ='block';
}
function showHint(str) {
  if (str.length==0) {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    } else {
   	  // code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      var div = document.createElement('div');
      div.setAttribute('id', 'link_container');
      div.style.backgroundColor = 'red';
      div.style.width = '300px';
      div.style.height = '100px';
      div.style.margin = '-15px 0px 0px 75px';
      var txt=xmlhttp.responseText;
      var strA = txt.slice(0,txt.indexOf(",")); //define number of cycles of For Loop 
      var str = txt.substr(txt.indexOf(",")+1);  //cut 1st position from string and save remaining info
      for (i=0; i<=strA; i++){
	var newLink = document.createElement('a'); //create anchor
	var linkName = str.slice(0,str.indexOf(" ,")+1);
	var linkName = linkName.split(' ').join(''); 
        newLink.href = "http://localhost/" + linkName+".php";
        newLink.innerHTML = linkName;
	var str = str.substr(str.indexOf(",")+1);
	div.appendChild(newLink);
	var newBr = document.createElement('br'); //create break
	div.appendChild(newBr);
      }
    document.getElementById('link_container').appendChild(newLink);
    } 
  }
  xmlhttp.open("GET","gethint.php?q="+str,true);
  xmlhttp.send();
}
</script>
<style type="text/css">
#outer {position:fixed; top:0; left:0; width:100%; height:100%; display:none; background-color:#000; opacity: .75; }
.middle {height:100%; display:table; margin:0 auto;}
.inner {vertical-align:middle; display:table-cell;}
#firstPopupDiv {width:300px;height:300px;background-color:white;margin:40px 0px 0px 0px;}
</style>
</head>
<body>
<h1 style="float:left;"><a href="javascript:void(0);" onclick="popup('outer')">Click Here To Open The Pop Up</a></h1> 
<div id="outer" >
  <div class="middle">
    <div class="inner">
      <div id="firstPopupDiv"> 
       	<a href="http://localhost/first_popup_div4.html">close popup</a> 
		<form>
          First name: <input type="text" onkeyup="showHint(this.value)" size="20" />
        </form>
      </div>
    </div>
  </div>
</div>
</body>
</html>

I decided that the php is probably running and what I have is a display problem.

So, I added id=“here” to the input box element and changed the line, in the showHint function, that said document.getElementById(‘link_container’).appendChild(newLink); and change it to document.getElementById(‘here’).appendChild(div); and still no joy.

Sometimes you’re just destined to answer your own question.

Created an empty div. Targeted its id and viola!

I’m starting to get the hang of this.

Thanks to everyone who read this topic.