Ajax code for an ASP Form

Complete code for using AJAX in an ASP Program:

The story goes like this: You want to insert a new subject "Network Basics" in a Timetable Table. When you type the Character "N" in the Textbox, Immediately, the ajax should work in the background and bring all the subjects having names starting with "N" from the database and display them just below the textbox. And If already "Network Basics" subject was there in that list, then you will just click on that subject name. On clicking, the subject name will automatically goes and sits in the Textbox. Begiinner level program may find it difficult to understand the following code. Steps Involved: You are typing "N" in the Textbox. On pressing the key "N", Jack is called. Jack hands over this value "N" to the Steno who in turn contacts the database and bring all the subject names starting witgh "N". Jill takes this data and puts in the Label which is just below the text box.

<script language="javascript"> function getMeASteno(){ if (window.XMLHttpRequest){ return new XMLHttpRequest(); } else if(window.ActiveXObject){ return new ActiveXObject("Microsoft.XMLHTTP"); } else{ alert("Sorry.Your Browser does not support Stenos"); } } var steno = getMeASteno(); //state 4 or 0 means readdy function jack() { if(steno.readyState==4||steno.readyState==0) { var str=escape(document. getElementById('tBox1').value); steno.open("GET", 'suggester.asp?tBox1=' + str, true); steno.onreadystatechange = jill; steno.send(null); } } function jill() { if (steno.readyState == 4) { var lbl1 = document.getElementById('lbl') lbl1.innerHTML = ''; //var strfull=steno.responseText; var str = steno.responseText.split("***"); var dt=""; for(i=0; i < str.length - 1; i++){ dt+="<div onMouseOver= 'javascript:fnMOver(this);'"; dt+=" onMouseOut='javascript:fnMOut(this);'"; dt+=" onClick= 'javascript:tfr(this.innerHTML);'"; dt+=' class="inn_normal_style" '; dt+=">"; dt+=str[i]; dt+="</div>"; } lbl1.innerHTML=dt; } } function fnMOver(inn) { inn.className = 'mOver'; } function fnMOut(inn) { inn.className = 'mOut'; } function tfr(inn) { document.getElementById('tBox1') .value = inn; document.getElementById('lbl') .innerHTML = ''; } </script> <style type="text/css" media="screen"> .inn_normal_style{ font-size:10px; font-family:arial; color:#003366; padding:2px; } .mOut{ background-color: #FFFFFF; font-size:10px; font-family:arial; color:#003366; padding:2px; } .mOver { background-color: #3366CC; font-size:10px; font-family:arial; color:#ffffff; padding:2px; } #search_suggest { position: absolute; background-color: #FFFFFF; text-align: left; border: 1px solid #000000; } </style> <form name="form1" method="Post" action="ins.asp"> <input type=text id="tBox1" autocomplete="off" onKeyUp="jack();" name="tBox1"> <div id="lbl"></div> <input name="submit" type="submit" value="Submit"> </form>

Code developed by Kalaimathi Shivaji 15-08-2008