title: How to retrieve value from xml to html?
body: <p>This is my html file which accepts <strong>userid</strong> and <strong>password</strong> but does not match with the xml file:</p>
  
  <pre><code>&lt;html&gt;
   &lt;head&gt;
    &lt;title&gt;Employee Info&lt;/title&gt;
    &lt;script language="javascript" type="text/javascript" src="validation.js"&gt;
      var xmlDoc = 0;
      var xmlObj = 0;
  
      function loadEmployees(){
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");  
        xmlDoc.async = "false";
        xmlDoc.onreadystatechange = displayEmployee;
        xmlDoc.load("http://localhost/login.xml");
      }
  
      function displayEmployee(){
        if(xmlDoc.readyState == 4){
      xmlObj = xmlDoc.documentElement;
     var len = xmlObj.childNodes.length;
     for(i = 0; i &lt; len; i++){
       var nodeElement = xmlObj.childNodes[i];
       if (nodeElement.childNodes[0].value=document.forms[0].txtName.value &amp;&amp; nodeElement.childNodes[1].value=document.forms[0].txtPwd.value)
      {
       alert("Login Successful"); 
      }
       else
      {
       alert("Login Failed"); 
      }
  
     &lt;!--for(j = 0; j &lt; nodeElement.childNodes.length; j++){
         document.write(" " + nodeElement.childNodes[j].firstChild.nodeValue);
       }--&gt;
  
       document.write("&lt;br/&gt;");
     }
        }
      } 
    &lt;/script&gt;
   &lt;/head&gt;
  
  &lt;body background="bg.jpg"&gt;
  &lt;div id="main"&gt;
  &lt;form name="frmLogin" method="post"&gt;
  
  &lt;!--&lt;div style="height:0px"&gt;
  &lt;marquee behavior="alternate" direction="right"&gt; 
  &lt;h1&gt;&lt;font size="14" color="white" align-text="right"&gt;ADIDAS&lt;/font&gt;&lt;/h1&gt; 
  &lt;/div&gt;--&gt;
  
  &lt;div style="position:absolute;right:3px;top:6px"&gt;
   &lt;img src="logo.jpg"&gt;&lt;/img&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
  &lt;img src="1696.jpg" align="left" height="580" width="210"&gt;&lt;/img&gt;
  
  &lt;div style="position:absolute;left:240px;top:180px"&gt;&lt;font size="5" color="white"&gt;USER LOGIN&lt;/font&gt;&lt;/div&gt;
  &lt;div style="position:absolute;left:315px;top:232px"&gt;&lt;font size="5" color="white"&gt;User ID :&lt;/font&gt;&lt;/div&gt;
  &lt;div style="position:absolute;left:303px;top:289px"&gt;&lt;font size="5" color="white"&gt;Password :&lt;/font&gt;&lt;/div&gt;
  &lt;div style="position:absolute;left:415px;top:236px"&gt;&lt;input type="text" name="txtName" onBlur="validateName(this)"&gt;&lt;/div&gt;
  &lt;div style="position:absolute;left:415px;top:293px"&gt;&lt;input type="password" name="txtPwd" onBlur="validatePwd(this)"&gt;&lt;/div&gt;
  
  &lt;div class="logIn" style="position:absolute;left:450px;top:360px"&gt;&lt;input type="submit" value="Login" onClick="loadEmployees()"&gt;
  &lt;/div&gt; 
  &lt;/div&gt;
  
  
  &lt;/form&gt;  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is my xml file:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;Employees&gt;
   &lt;Employee&gt;
    &lt;id&gt;AD101&lt;/id&gt;
    &lt;pwd&gt;PWD101&lt;/pwd&gt;
   &lt;/Employee&gt;
   &lt;Employee&gt;
    &lt;id&gt;AD102&lt;/id&gt;
    &lt;pwd&gt;PWD102&lt;/pwd&gt;
   &lt;/Employee&gt;
   &lt;Employee&gt;
    &lt;id&gt;AD103&lt;/id&gt;
    &lt;pwd&gt;PWD103&lt;/pwd&gt;
   &lt;/Employee&gt;
   &lt;Employee&gt;
    &lt;id&gt;AD104&lt;/id&gt;
    &lt;pwd&gt;PWD104&lt;/pwd&gt;
   &lt;/Employee&gt;
  &lt;/Employees&gt;
  </code></pre>
  
  <p>The <strong>UserId</strong> and <strong>Password</strong> should match with xml data and display only particular user which is entered in text box. And also password should not be visible to the user. So how to retrieve the xml data to html file?  </p>