Home/ Questions/Q 8093759
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T20:34:19+00:00

I am modifying the tutorial found here: http://www.w3schools.com/ajax/ajax_aspphp.asp so that the library of autocomplete

  • 0

I am modifying the tutorial found here: http://www.w3schools.com/ajax/ajax_aspphp.asp
so that the library of autocomplete names are stored on a database. I added a button which allows the user to add a name to the database if it is not already in the database. When I click the button, the method fires, however the php script designated in the addName() method does not execute. This is strange because the script defined in the showHint() method does execute. Here is my javascript (this is all that is necessary to be shown). I have omitted the scripts:

    <!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function showHint(str)
        {
            var xmlhttp;
            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)
                {
                document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","gethint.php?q="+str,true);
            xmlhttp.send();
        }

        function addName(str){
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("GET","addName.php?q="+str,true);
            xmlhttp.send();
        }
    </script>
</head>
<body>

<h3>Start typing a name in the input field below:</h3>
<form action="">
    First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p>
<button type="button" onclick="addName(document.getElementById('txt1').value)">Add Name</button>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Like this:

      function getXhr() {
      var xmlhttp;
      if (window.XMLHttpRequest) {// code for IE7+, FF, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
      }
      else { // code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      return xmlhttp;
  }

  function showHint(str) {
      var xmlhttp;
      if (str.length==0) {
          document.getElementById("txtHint").innerHTML="";
          return;
      }
      xmlhttp = getXhr();
      xmlhttp.onreadystatechange= function() {
          if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
          }
      };
      xmlhttp.open("GET","gethint.php?q="+str,true);
      xmlhttp.send();
  }

  function addName(str) {
      var xmlhttp = getXhr();
      xmlhttp.onreadystatechange= function() {
         ...your logic here...
      };
      xmlhttp.open("GET","addName.php?q="+str, true);
      xmlhttp.send();
  }
    • 0