Regards 4 all Please check the following code, I am trying to show/hide div tags. There are total 6 div tags and I want to show/hide only 3,4 and 5. When the page loads div3 is displayed while div4,5 are not. Once user clicks on Log in, div3 hides and div4 displays, when user puts user name and password in their respective fields and submits, these values are retrieved in LoginMe javascript function and passed to validateUser.jsp page, on onreadystatechange, stateChanged function is called and data is retrieved using xmlHttp.responseText. My problem starts from here, xmlHttp.responseText does not bring data (while connection, query are all verified) from validateUser.jsp page and second one is, after this I want to display div5, hide div4 and 3. I want to show that data which xmlHttp will bring in div5. index.JSP (HTML Code) Code: <%@page contentType="text/html" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Log in</title> <script type="text/javascript"> function toggle() { if(document.getElementById('div3').style.display == "block") { document.getElementById('div3').style.display = "none"; document.getElementById('div4').style.display = "block"; } } function loginMe(unameVal, ucodeVal){ xmlHttp=GetXmlHttpObject(); //alert(unameVal+' ' +ucodeVal); //xmlHttp=new XMLHttpRequest(); var url="validateUser.jsp"; url=url+"?myName="+unameVal+"&myCode="+ucodeVal; //alert(url); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); } function stateChanged(){ if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ var showdata = xmlHttp.responseText; //alert(showdata); var trimmed = showdata.replace(/^\s+|\s+$/g, '') ; if (trimmed=="Success"){ document.getElementById('div1').innerHTML="Welcome"; document.getElementById('div2_0').innerHTML="Log out"; document.getElementById('div4').style.display = "none"; document.getElementById('div5').style.display = "block"; } } } function GetXmlHttpObject(){ var xmlHttp=null; try{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e){ //Internet Explorer try{ xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } </script> </head> <body> <form id="frmLogin" name="frm_Login"> <div id="div0" style="display: block;"> <table id="tab0" align="center" width="800" border="0" cellSpacing="0" cellPadding="0" style="background-color: antiquewhite;"> <tr> <td align="right"> <div id="div1"style="display: block;"></div> <div id="div2"style="display: block;"><a id="div2_0" href="javascript:toggle();">Log in</a></div> <hr style="margin-top: 0; margin-bottom: 0"> </td> </tr> </table> </div> <div id="div3" align="center" style="display: block;"> <table id="tab1" width="800" border="0" cellSpacing="0" cellPadding="0"> <tr> <td> <img alt="login" src="images/PAK362.jpg"> </td> </tr> </table> </div> <div id="div4" align="center" style="display: none;"> <table id="tab2" width="800" border="0" cellSpacing="0" cellPadding="0" style="background-color:#92d993"> <tr> <td width="534"> <table id="tab1_0" border="0"> <tr> <td> <img alt="Login" src="images/login.jpg"> </td> </tr> </table> </td> <td width="266"> <table id="tab1_1" border="0" cellSpacing="0" cellPadding="0"> <tr> <td colspan="2" align="right"> <font style="font-size: xx-large; font-style: inherit;">Log in</font> </td> </tr> <tr> <td> User Name </td> <td> <input type="text" id="txtUname" name="txt_Uname"> </td> </tr> <tr> <td> Password </td> <td> <input type="password" id="txtPwd" name="txt_Pwd"> </td> </tr> <tr> <td colspan="2" align="right"> <input type="submit" id="btnSubmit" name="btn_Submit" value="Log in" onclick="loginMe(frmLogin.txtUname.value, frmLogin.txtPwd.value);"> <input type="reset" id="btnReset" name="btn_Reset" value="Reset"> <input type="submit" id="btnCancel" name="btn_Cancel" value="Cancel"> </td> </tr> </table> </td> </tr> </table> </div> <div id="div5" align="center" style="display: none;">Done</div> <div id="div6" align="center" style="display: block;"> <font style="font-size: smaller"> Copy Right Reserved - ABC Pvt. Ltd. 2010<br> </font> </div> </form> </body> </html> validateUser.JSP (JSP Code) Code: <%@page contentType="text/html" pageEncoding="UTF-8"%> <%@ page import="java.sql.*" %> <% String u_name=request.getParameter("myName"); String u_code=request.getParameter("myCode"); String data=""; Connection conn = null; String url="jdbc:mysql://localhost:3306/"; String dbName="Test"; String driver="com.mysql.jdbc.Driver"; String userName="root"; String password="mahmood"; Statement st; try { Class.forName(driver).newInstance(); conn=DriverManager.getConnection(url+dbName,userName,password); String query="select * from Logins where uname='"+u_name+"'"; st=conn.createStatement(); ResultSet rs=st.executeQuery(query); while(rs.next()){ if(rs.getString("uname").equalsIgnoreCase(u_name) && rs.getString("ucode").equalsIgnoreCase(u_code) ){ data="Success"; out.println(data); break; } else{ data="Fail"; out.println(data); break; } } } catch (Exception e){ e.printStackTrace(); } %> I am using NetBeansIDE 6.9. You have to create a table "Logins" in mySQL with uname and ucode columns of type varchar(25)
AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and Java Script.
