Forum:

HTML Pages with CSS and JavaScript

Ajax code getting null value

Ranch Hand

Posts: 40

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi All,

I write JSP and Servlet in order to register user and onkeyup I am calling my ajax code which is validating whether userID is already register or not. My problem is that ajax code always getting null value for valid tag value and because of that it's showing always valid user ID. Please find my code as follow:

1. register.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Create Profile</title>
        
        
        <link href="../CSS/structure.css" rel="stylesheet">
        <link href="../CSS/form.css" rel="stylesheet">
        <script src="../JavaScript/validateUserId.js" type="text/javascript"></script>
        
    </head>
    <body id="public">
        <div>
            <br/>
            <a id="href" href="../Home.jsp">Home</a><br/>
            <img src="../Images/TitleLogo.jpg" id="logo" >
        </div>        
        
        <div id="container" class="ltr">

<header id="header" class="info">
                    <h2>Create Profile</h2>
                </header>

<ul>
                    <li id="foli0" class="notranslate      ">
                        
                        
                        <label class="desc" id="title0" for="Field0" >User Name
                            <span id="req_1" class="req">*</span>
                        </label>
                        <span>
                            <input id="username" name="username" type="text" class="field text un" value="" maxlength="12"  
                                   tabindex="1" onkeyup="validateUserId()"/>                                                      
                        </span><div id="validateUsername"></div>
                    </li>
                    <li id="foli1" class="notranslate      ">
                        <label class="desc" id="title1" for="Field1">Password
                            <span id="req_2" class="req">*</span>
                        </label>
                        
                        <span>
                            <input id="password" name="password" type="password" class="field text pw" value="" maxlength="12" 
                                   tabindex="2" />                            
                        </span>
                    </li>
                    <li id="foli2" class="notranslate      ">
                        <label class="desc" id="title2" for="Field2">Name
                            <span id="req_3" class="req">*</span>
                        </label>
                        <span>
                            <input id="fname" name="fname" type="text" class="field text fn" value="" size="12" tabindex="3" 
                                   required/>
                            <label for="Field2">First Name</label>
                        </span>
                        <span>
                            <input id="lname" name="lname" type="text" class="field text ln" value="" size="12" tabindex="4" 
                                   required/>
                            <label for="Field3">Last Name</label>
                        </span>
                    </li>
                    <%  String user = request.getParameter("username");
                        session.setAttribute("username",user);
                    %>
                    <li id="foli3" class="complex notranslate      ">
                        <label class="desc" id="title3" for="Field4">Address
                            <span id="req_4" class="req">*</span>
                        </label>
                        <div>
                            <span class="full addr1">
                                <input id="add1" name="add1" type="text" class="field text addr" value="" tabindex="5" 
                                       required />
                                <label for="Field5">Street Address</label>
                            </span>
                            <span class="full addr2">
                                <input id="add2" name="add2" type="text" class="field text addr" value="" tabindex="6" />
                                <label for="Field6">Address Line 2</label>
                            </span>
                            <span class="left city">
                                <input id="city" name="city" type="text" class="field text addr" value="" tabindex="7" 
                                       required />
                                <label for="Field7">City</label>
                            </span>
                            <span class="right state">
                                <input id="pro" name="pro" type="text" class="field text addr" value="" tabindex="8" 
                                       required />
                                <label for="Field8">State / Province / Region</label>
                            </span>
                            <span class="left zip">
                                <input id="postal" name="postal" type="text" class="field text addr" value="" maxlength="6" tabindex="9" required />
                                <label for="Field8">Postal / Zip Code</label>
                            </span>
                            </div>
                        </li>
                        <li id="foli8" class="phone notranslate leftHalf     ">
                            <label class="desc" id="title10" for="Field10">Phone
                                <span id="req_8" class="req">*</span>
                            </label>
                             <span>
                                <input id="phone1" name="phone1" type="tel" class="field text" value="" size="3" 
                                       maxlength="3" tabindex="11" />
                                <label for="Field10">###</label>
                            </span>
                            <span class="symbol">-</span>
                            <span>
                                <input id="phone2" name="phone2" type="tel" class="field text" value="" size="3" 
                                       maxlength="3" tabindex="12" />
                                <label for="Field10-1">###</label>
                            </span>
                            <span class="symbol">-</span>
                            <span>
                                <input id="phone3" name="phone3" type="tel" class="field text" value="" size="4" 
                                       maxlength="4" tabindex="13" />
                                <label for="Field10-2">####</label>
                            </span>
                        </li>
                        <li id="foli11" class="notranslate rightHalf     ">
                            <label class="desc" id="title11" for="Field11">
                                Email
                                <span id="req_9" class="req">*</span>
                            </label>
                            <div>
                                <input id="email" name="email" type="email" spellcheck="false" class="field text medium" 
                                       value="" maxlength="255" tabindex="14" required onkeyup="validateUserId()"/> 
                                <div id="validateEmail"></div>
                            </div>
                        </li>
                        <li id="foli14" class="date notranslate leftHalf     ">
                            <label class="desc" id="title14" for="Field14">Birth Date</label>
                            <span>
                                <input id="dd" name="dd" type="text" class="field text" value="" size="2" 
                                       maxlength="2" tabindex="15" />
                                <label for="Field14-1">DD</label>
                            </span> 
                            <span class="symbol">/</span>
                            <span>
                                <input id="mm" name="mm" type="text" class="field text" value="" size="2" 
                                       maxlength="2" tabindex="16" />
                                <label for="Field14-2">MM</label>
                            </span>
                            <span class="symbol">/</span>
                            <span>
                                <input id="yyyy" name="yyyy" type="text" class="field text" value="" size="4" 
                                       maxlength="4" tabindex="17" />
                                <label for="Field14">YYYY</label>
                            </span>
                            <span id="cal14">
                                <img id="pick14" class="datepicker" src="../Images/calendar.png" alt="Pick a date." />
                            </span>
                        </li>                        
                        <li id="foli15" class="notranslate      ">
                            <label class="desc" id="title15" for="Field15">Skill</label>

</div>
                        </li> 
                        <li class="buttons ">
                            <div>
                            <input id="submitForm" name="submitForm" class="btTxt submit" type="submit" value="Submit" /></div>
                        </li>

</ul>
                </form>

</div>
    </body>
</html>

2. FormValidation.java

package ServletSource;

import java.io.*;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import JavaSource.*;
import java.sql.*;
import java.util.logging.Level;
import java.util.logging.Logger;
import java.util.regex.*;
import javax.naming.*;
import javax.servlet.http.HttpSession;

public class FormValidation extends HttpServlet {

static Connection conn = null;
    static ResultSet rs = null; 
    
    
    // <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code.">
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();     
        //preparing some objects for connection 
            Statement stmt = null;  
            
        try 
        {
            String username = request.getParameter("username");
            //String email = request.getParameter("email");
            
            String searchQuery = "select * from UserInfo where UserID='"+username+ "'";
            
            //connect to DB 
            conn = ConnectionManager.getConnection();
            stmt = conn.createStatement();
            rs = stmt.executeQuery(searchQuery);
           // boolean more = rs.next();
            response.setContentType("text/xml");
            response.setHeader("Cache-Control", "no-cache");
            
            //If result set is empty set valid element to true
            if (rs.next()) 
            {                
                out.println("<userinfo>" + "<valid>false</valid>" + "<fname>" +
                rs.getString(2) + "</fname>" + "<lanme>" +
                rs.getString(3) + "</lname>" + "<email>" +
                rs.getString(4) + "</email>" + "<password>" +
                rs.getString(5) + "</password>" + "<dob>" +
                rs.getString(6) + "</dob>" + "<add1>" + 
                rs.getString(7) + "</add1>" + "<add2>" +
                rs.getString(8) + "</add2>" + "<city>" +
                rs.getString(9) + "</city>" + "<pro>" +
                rs.getString(10) + "</pro>" + "<postal>" +
                rs.getString(11) + "</postal>" +  "<phone>" +        
                rs.getString(12) + "</phone>" + "<skill>" +
                rs.getString(13) + "</skill>" + "</userinfo>");                
            }
            else
            {
                out.println("<valid>true</valid>");
            }            
        } 
        catch (SQLException e) 
        {
            response.sendRedirect("JSPSource/error.jsp");
        }
        catch (Throwable theException) 	    
        {
            System.out.println(theException); 
        }
        finally 
        {  
            if (rs != null)	
            {
                try 
                {
                    rs.close();
                } 
                catch (Exception e) {}
                rs = null;
            }

if (stmt != null) 
            {
                try 
                {
                    stmt.close();
                } 
                catch (Exception e) {}
                stmt = null;
            }

if (conn != null) 
            {
                try 
                {
                    conn.close();
                } 
                catch (Exception e) {}

conn = null;
            }
            out.close();
        }
    }

@Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //preparing some objects for connection 
        Statement stmt = null;  
        
        String username = request.getParameter("username");
        String fname = request.getParameter("fname");
        String lname = request.getParameter("lname");
        String email = request.getParameter("email");
        String pass = request.getParameter("password");
        String dob = request.getParameter("yyyy") +"-"+request.getParameter("mm")+"-"+request.getParameter("dd");
        String add1 = request.getParameter("add1");
        String add2 = request.getParameter("add2");
        String city = request.getParameter("city");
        String pro = request.getParameter("pro");
        String postal = request.getParameter("postal");
        String phone = request.getParameter("phone1")+request.getParameter("phone2")+request.getParameter("phone3");
        String skill = request.getParameter("skill");

String insertQuery = "INSERT INTO UserInfo VALUES(" + "\'" + username + "\'" + "," + "\'" + fname + "\'" + 
                                "," + "\'" + lname + "\'" + "," + "\'" + email + "\'" + "," + "\'" + pass + "\'" +
                                "," + "\'" + dob + "\'" + "," + "\'" + add1 + "\'" + "," + "\'" + add2 + "\'" +
                                "," + "\'" + city + "\'" + "," + "\'" + pro + "\'" + "," + "\'" + postal + "\'" +
                                 + "\'" + phone + "\'" +"," + "\'" + skill + "\'" + ")";

HttpSession session = request.getSession(true);
        session.setAttribute("username", username);
        try
        {
            response.setContentType("text/html");
            response.setHeader("Cache-Control", "no-cache");
            
            conn = ConnectionManager.getConnection();
            stmt = conn.createStatement();
            stmt.execute(insertQuery);
            response.sendRedirect("JSPSource/welcome.jsp");
            stmt.close();
            conn.close();
        }   
        catch (InstantiationException ex) 
        {
            Logger.getLogger(FormValidation.class.getName()).log(Level.SEVERE, null, ex);
        }
        catch (IllegalAccessException ex) 
        {
            Logger.getLogger(FormValidation.class.getName()).log(Level.SEVERE, null, ex);
        }
        catch (SQLException e) 
        {
            session.setAttribute("sqlError",username);
            response.sendRedirect("JSPSource/error.jsp");
        }
    }

/**
     * Returns a short description of the servlet.
     *
     * @return a String containing servlet description
     */
    @Override
    public String getServletInfo() {
        return "Short description";
    }// </editor-fold>
}

3. validateUserId.js

var uname=document.getElementById("username");

xmlHttpRequest.open("GET","../ValidateForm?username="+ encodeURIComponent(uname.value), true);
    xmlHttpRequest.onreadystatechange=processRequest;
    xmlHttpRequest.send('');

function processRequest()
    {
        if(xmlHttpRequest.readyState==4)
        {
            if(xmlHttpRequest.status>=200 && xmlHttpRequest.status<=300)
            {
                processResponse();
            }
        }
    }

function processResponse()
    {    
        var xmlMessage=xmlHttpRequest.responseXML;
        [i][b][color=red]var valid=xmlMessage.getElementsByTagName("valid")[0].firstChild.nodeValue;[/color][/b][/i]
        
        if(valid=="true")
        {        
            var validateUsername=document.getElementById("validateUsername");
            validateUsername.innerHTML = "<font color='green'><b>User Name is Valid!</b></font>";
            
            document.getElementById("submitForm").disabled =false;

var fnameElement=document.getElementById("fanme");
            fnameElement.value = '';

var lnameElement=document.getElementById("lname");
            lnameElement.value = '';

var emailElement=document.getElementById("email");
            emailElement.value = '';

var passElement=document.getElementById("password");
            passElement.value = "";

var dobElement=document.getElementById("yyyy")+"-"+document.getElementById("mm")+"-"+document.getElementById("dd");
            dobElement.value = "";
            
            var add1Element=document.getElementById("add1");
            add1Element.value = "";
            var add2Element=document.getElementById("add2");
            add2Element.value = "";
            
            var cityElement=document.getElementById("city");
            cityElement.value = "";
            
            var proElement=document.getElementById("pro");
            proElement.value = "";
            
            var postalElement=document.getElementById("postal");
            postalElement.value = "";
            
            var phoneElement=document.getElementById("phone1")+document.getElementById("phone2")+
                                document.getElementById("phone3");
            phoneElement.value = "";
            
            var skillElement=document.getElementById("skill");
            skillElement.value = "";
        }

if(valid=="false")
        {
            var validateUsername=document.getElementById("validateUsername");
            validateUsername.innerHTML = "<font color='red'><b>User Name is already registered!</b></font>";
            
            document.getElementById("submitForm").disabled =true;

var fname=xmlMessage.getElementsByTagName("fname")[0].firstChild.nodeValue;
            var lname=xmlMessage.getElementsByTagName("lname")[0].firstChild.nodeValue;
            var email=xmlMessage.getElementsByTagName("email")[0].firstChild.nodeValue;
            var password=xmlMessage.getElementsByTagName("password")[0].firstChild.nodeValue;
            var dob=xmlMessage.getElementsByTagName("dd")[0].firstChild.nodeValue +
                    xmlMessage.getElementsByTagName("mm")[0].firstChild.nodeValue +
                    xmlMessage.getElementsByTagName("yyyy")[0].firstChild.nodeValue;
            var add1=xmlMessage.getElementsByTagName("add1")[0].firstChild.nodeValue;
            var city=xmlMessage.getElementsByTagName("city")[0].firstChild.nodeValue;
            var pro=xmlMessage.getElementsByTagName("pro")[0].firstChild.nodeValue;
            var postal=xmlMessage.getElementsByTagName("postal")[0].firstChild.nodeValue;
            var phone=xmlMessage.getElementsByTagName("phone1")[0].firstChild.nodeValue +
                    xmlMessage.getElementsByTagName("phone2")[0].firstChild.nodeValue +
                    xmlMessage.getElementsByTagName("phone3")[0].firstChild.nodeValue;
            var skill=xmlMessage.getElementsByTagName("skill")[0].firstChild.nodeValue;
            
            var fnameElement=document.getElementById("fanme");
            fnameElement.value = fname;

var lnameElement=document.getElementById("lname");
            lnameElement.value = lname;

var emailElement=document.getElementById("email");
            emailElement.value = email;

var passElement=document.getElementById("password");
            passElement.value = password;

var dobElement=document.getElementById("dd")+"-"+document.getElementById("mm")+"-"+document.getElementById("yyyy");
            dobElement.value = dob;
                       
            var add1Element=document.getElementById("add1");
            add1Element.value = add1;
            var add2Element=document.getElementById("add2");
            add2Element.value = add2;
            
            var cityElement=document.getElementById("city");
            cityElement.value = city;
            
            var proElement=document.getElementById("pro");
            proElement.value = pro;
            
            var postalElement=document.getElementById("postal");
            postalElement.value = postal;
            
            var phoneElement=document.getElementById("phone1")+document.getElementById("phone2")+
                                document.getElementById("phone3");
            phoneElement.value = phone;
            
            var skillElement=document.getElementById("skill");
            skillElement.value = skill;
            
        }
    }
}

Can anyone help me? I had mark ajax code in red color where I am getting error.

Thanking You,

Eric Pascarello

author

Posts: 15385

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Have you debugged what is coming from the server? Use a tool such as Fiddler or Firebug to watch the http requests. Is it sending the right data? Is it returning the right data?

Eric

Kasparov Patel

Ranch Hand

Posts: 40

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

My servlet code firing query is ok. But I don't know why valid tag showing undefined. I have debug using crome developer tool.

Eric Pascarello

author

Posts: 15385

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

well the responseXML should be read off the root

You also have to be carefule of using firstChild since whitepspace is known to cause issue with browsers.

Eric

Kasparov Patel

Ranch Hand

Posts: 40

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I tried what you have suggested but getting same following error

Unable to get value of the property 'getElementsByTagName': object is null or undefined

Eric Pascarello

author

Posts: 15385

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

what does xmlMessage show?

If it is null, that means your xml is not valid.

Eric

Kasparov Patel

Ranch Hand

Posts: 40

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Getting following error

SCRIPT5007: Unable to set value of the property 'value': object is null or undefined
validateUserId.js, line 54 character 13
LOG: [object]
SCRIPT5007: Unable to set value of the property 'value': object is null or undefined
validateUserId.js, line 54 character 13
LOG: [object]
SCRIPT5007: Unable to set value of the property 'value': object is null or undefined
validateUserId.js, line 54 character 13
LOG: [object]
SCRIPT5007: Unable to set value of the property 'value': object is null or undefined
validateUserId.js, line 54 character 13
LOG: [object]
SCRIPT5007: Unable to set value of the property 'value': object is null or undefined
validateUserId.js, line 54 character 13
LOG: [object]
SCRIPT5007: Unable to set value of the property 'value': object is null or undefined
validateUserId.js, line 54 character 13
LOG: [object]
SCRIPT5007: Unable to set value of the property 'value': object is null or undefined
validateUserId.js, line 54 character 13
LOG: [object]
SCRIPT5007: Unable to set value of the property 'value': object is null or undefined
validateUserId.js, line 54 character 13
SCRIPT5007: Unable to get value of the property 'firstChild': object is null or undefined
validateUserId.js, line 44 character 9

Eric Pascarello

author

Posts: 15385

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Looks like you have more than one bug.

fanme

Eric

Kasparov Patel

Ranch Hand

Posts: 40

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I had corrected that typo error. Thanks for your help. Now it's working.

this llama doesn't want your drama, he just wants this tiny ad for his mama

Low Tech Laboratory

https://www.kickstarter.com/projects/paulwheaton/low-tech-0