submit a form using ajax not working and page is still reloaded

[rajiv_kadam]

i have written ajax code and save as ajx.js and i have written my asp code and saved as addwork.asp my problem is when i click on image go then it should insert records into database without reloading the page but it reloads the page so please help me here is my code below addwork.asp code below <!--#include file="common.asp"--> <!--#include file="headers.asp"--> <script type="text/javascript" src="ajx.js"></script> <% q=request("q") CheckAdminLogin() OpenDataBase conn 'if request("flag")=1 then 'compl=0 means task is pending 'compl=1 means task is completed 'compl=2 means task is cancelled completed=0 uname=request("uname") txt=request("txt") dat=now if uname="" then er=er & "Title cannot be blank" if txt="" then er=er & "Work description cannot be blank" if er="" then sql="insert into wrk(titles,desck,datss,usernames,userid,completed) values('" & cstr(uname) & "','" & cstr(txt) & "','" & cstr(dat) & "','" & session("adminname") & "'," & session("userid") & "," & completed & ")" conn.execute sql response.write "<font size=4 color=green>work description Submitted sucessfully</font>" else response.write "<font color='#FF0000' size='+1'>" & er & "</font>" end if 'end if %> <form action="addwork.asp" method="post"> <table> <tr> <td> <font size="+1"> Title</font> </td> <td><input type="text" name="uname"></td> </tr> <tr> <td><font size="+1">Work</font></td> <td> <textarea name="txt" rows="20" cols="35"></textarea> </td> </tr> <tr> <td></td> <td><input type="hidden" name="flag" value="1"> <!--<input type="submit" name="submit" value="submit" onClick="showHint(this.value)">--> <INPUT TYPE="image" SRC="submit_button.gif" HEIGHT="30" WIDTH="173" BORDER="0" ALT="Submit Form" onClick="showHint(this.value)"> <span id="txthint"></span> </td> </tr> </table> </form> addwork.asp code ends here now ajx.js code starts below var xmlhttp; function showHint() { xmlhttp=GetXmlHttpObject(); if (xmlhttp==null) { alert ("Your browser does not support XMLHTTP!"); return; } var uname=document.getElementById("uname").value; var txt=document.getElementById("txt").value; var url="addwork.asp"; url=url+"?unam

[burntblark]

You would have to stop the default action of the element. You can achieve that by returning a false right after the showHint function. Your code should look like the following: <INPUT TYPE="image" SRC="submit_button.gif" HEIGHT="30" WIDTH="173" BORDER="0" ALT="Submit Form" onClick="showHint(this.value); return false;">

[daveyerwin]

Your javascript should look more like this ...

var xmlhttp = (function () {
if (window.XMLHttpRequest) { return new window.XMLHttpRequest(); }
try { return new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) {return null; }
})();
function showHint(){
if (xmlhttp==null){
alert ("Your browser does not support XMLHTTP!");
return false;
}
frm=document.forms[0];
var url="addwork.asp?uname="+frm.uname.value+
"&txt="+frm.txt.value;
xmlhttp.open('GET',url,true);
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.send(null);
}
function stateChanged(){
if (xmlhttp.readyState==4){
document.getElementById("txthint").innerHTML="thank you"
}
}

and as Jafhar has said ...

<INPUT TYPE="image" SRC="submit_button.gif" HEIGHT="30" WIDTH="173" BORDER="0" ALT="Submit Form"
onClick="showHint();return false">

modified on Monday, March 22, 2010 4:43 PM