how to access database through javascript?

<script>
    function showUser(str) {
        if (str=="") {
          document.getElementById("spName").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("spName").innerHTML=xmlhttp.responseText;
          }
        }

        xmlhttp.open("GET","getUserName.php?q="+str,true);
        xmlhttp.send();
    }
</script>

getUsreName.php

<?php

$q=$_GET["q"];

$host="localhost"; // Host name 
$username="root"; // Mysql username 
$password=""; // Mysql password 
$db_name="pnpdb"; // Database name 

// Connect to server and select databse.
$link = mysql_connect("$host", "$username", "$password")or die("cannot connect"); 
mysql_select_db("$db_name",$link)or die("cannot select DB");


$sql="SELECT name FROM tblprofile WHERE userId = '".$q."'";

$result = mysql_query($sql);

$row = mysql_fetch_array($result);

$name =$row['name'];

if($name == '' || empty($name)) {
  echo "<b>ID not found.</b>";
} else {
  echo "<b>".$name."</b>";
}

mysql_close($link);
?>

The answer it's AJAX, but first of all it's better if you understand what AJAX is: Asynchronous JavaScript And XML. Then, for simplify your task it's better if you use a javascript framework like jQuery or mootools.
I personally suggest jQuery.

Use an AJAX-Call to get the data you need from a server side script (here php) and insert the result of the call in the desired textbox.

Better use Mootools, jQuery, YUI or any other js framework to perform Ajax requests. This will reduce your development time. For more info check apis of jQuery:

http://api.jquery.com/category/ajax/

You will need to use ajax which is 9/10ths javascript anyway. I suggest using a JS framework so that you don't have to code for different browsers. Then you will need something on the server side that will process the request and spit the required data back at you. Popular formats are XML (the x in ajax), JSON, or just plain ol' HTML. Either way you will need a javascript callback to process the result (or error condition, don't forget that) and populate your textbox. Personally I prefer just returning HTML fragments but if you've got a framework chances are you'll find XML and JSON handling in it so go crazy.

No ajax or javascript needed.
Just make alphabetical listing of all users with links to edit page. You can also add to this page a form with a single textbox to enter userid manually.
Both links and form leads to the edit page that use userid from the query string to retrieve users detais.

The first step is to create a PHP script which will send parse-able data to JavaScript. Do not allow JavaScript to pass raw SQL queries to your PHP.

<?php
$sqlGetName = $mysqli->prepare("SELECT id, name FROM users WHERE id=?");
$sqlGetName->bind_param("i", $_GET['id']);
$sqlGetName->execute();

$result = array('success' => false, 'id' => null, 'name' => null);

$sqlGetName->bind_result($result['id'], $result['name']);

if($sqlGetName->fetch()) {
  $result['success'] = true;
}

echo json_encode($result);

Then use JavaScript to fetch the values. The example below uses the MooTools library for simplicity's sake, but could be done with another library or in plain old regular JavaScript.

var jsonRequest = new Request.JSON({url: 'get_user.php',
  onSuccess: function(result) {
    if(result.success) {
      alert(result.id + ': ' + result.name);
    } else {
      alert('Not Found');
    }
  }
});

jsonRequest.get({'id': 3});