Importing xml document in javascript and posting it to a url using an html webform

I need to import an xml file in order do a positing to a url. I am using xmlhttp request. The only problem I am having is that I need to create an html page where the user is able to browse the xml file and execute the posting on-click of the "posting" button.

I have imported the file already but I do not know how to link it to the file that the user has browsed and to the click of the button.
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
 
    <title>Untitled Page</title>
    <script type="text/javascript">
        var xmlhttp;
        function loadXMLDoc(url) 
        {
            xmlhttp=null;
            if (window.XMLHttpRequest)// code for IE7, Firefox, Opera, etc.
            {
                xmlhttp=new XMLHttpRequest();
            }
            else if (window.ActiveXObject)// code for IE6, IE5
            {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            if (xmlhttp!=null)
            {
                xmlhttp.onreadystatechange=loadXML();
                xmlhttp.open("POST","http://yoursite.com/sample.xml",FALSE);
                xmlhttp.send();
                alert(xmlhttp.ResponseText);
               
            }
            else
            {
                alert("Your browser does not support XMLHTTP.");
            }
        }
    
        function loadXML()
        {
            var xmlDoc;
            if (window.ActiveXObject)//IE
            {
                xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
            }
            else if (document.implementation.createDocument)//FF
            { 
                xmlDoc=document.implementation.createDocument("","",null);
            }
            else
            {
                alert('Your browser cannot handle this script');
            }
            xmlDoc.async=false;
            xmlDoc.load("xmlorders.xml");
        }
 
      
    </script>
<tittle> <br> Post an Order </br> </tittle>
    
</head>
<body>
    <form id="form1" runat="server">
    <p>
    Please specify a file, or a set of files:<br>
    <input type="file" name="datafile" size="40">
    </p>
    <div>
    </div>
    </form>
</body>
</html>

Open in new window

suarezstAsked:
Who is Participating?
 
Pravin AsarConnect With a Mentor Principal Systems EngineerCommented:
Here is a simple example showing how to load and parse Xml File.

See the code in action at:

http://www.javascriptjournal.com/tutorials/createXmlTable.htm
<html>
<head>
<title>Example of Rendering XML Data into HTML Table -- #Pravin Asar#</title>
<style type="text/css">
Table { background-color: #EEEEFF;}
</style>
</head>
<body onload="importXML();">
<script language="javascript">
var xmlStr ="<?xml version=\"1.0\"?><root>" +
            "<dateTime><mydate>10/10/2007</mydate><mytime>03:56:38</mytime></dateTime>" +       
            "<dateTime><mydate>10/10/2007</mydate><mytime>03:56:38</mytime></dateTime>" + 
            "<dateTime><mydate>10/10/2007</mydate><mytime>03:56:38</mytime></dateTime>" + "</root>";
 
function importXML()
{
     if (document.implementation && document.implementation.createDocument)
     {
          xmlDoc = document.implementation.createDocument("", "", null);
          xmlDoc.onload = createTable;
     }
     else if (window.ActiveXObject)
     {
          xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
          xmlDoc.onreadystatechange = function () {if (xmlDoc.readyState == 4) createTable()};
      }
     else
     {
          alert('Your browser can\'t handle this script');
          return;
     }
     xmlDoc.load("books.xml");
     //xmlDoc.loadXML(xmlStr);
}
 
function DeleteTable() {    
    var table = document.getElementById('XmlTable'); 
    if (!table) { return; }
    if (table.parentNode != null) {
	  pNode = table.parentNode;
	  pNode.removeChild (table);
	  return;
	} 
    if (table != null)
    {  
		//alert ('Hello');
        var rows = table.rows;     
        while(rows.length){ // length=0 -> stop
          	table.deleteRow(rows.length-1); 
        }
    }
}
 
function createTable()
{
     var x = xmlDoc.getElementsByTagName('BOOK');
     //var x = xmlDoc.getElementsByTagName('root/dateTime');
 
    var tbl = document.getElementById('writeroot');
    DeleteTable('XmlTable');
     var newEl = document.createElement('TABLE');
     newEl.setAttribute ('id' , 'XmlTable');
     newEl.setAttribute('cellPadding',5);
     var tmp = document.createElement('TBODY');
     newEl.appendChild(tmp);
     var row = document.createElement('TR');
     for (j=0;j< x[0].childNodes.length;j++)
     {
          if (x[0].childNodes[j].nodeType != 1) continue;
          var container = document.createElement('TH');
          var theData = document.createTextNode(x[0].childNodes[j].nodeName);
          container.appendChild(theData);
          row.appendChild(container);
     }
     tmp.appendChild(row);
     for (i=0;i<x.length;i++)
     {
          var row = document.createElement('TR');
          for (j=0;j<x[i].childNodes.length;j++)
          {
               if (x[i].childNodes[j].nodeType != 1) continue;
               var container = document.createElement('TD');
               var theData = document.createTextNode(x[i].childNodes[j].firstChild.nodeValue);
               container.appendChild(theData);
               row.appendChild(container);
          }
          tmp.appendChild(row);
     }
     document.getElementById('writeroot').appendChild(newEl);
}
function RecreateTable() {
	DeleteTable();
	createTable();  
}
</script>
<a href="#" onclick="DeleteTable(); return false;">Delete Table</a>
<a href="#" onclick="RecreateTable(); return false;">Recreate Table</a>
<div id="writeroot"></div>
<br>
<p>Contents of Books.xml</p>
<textarea rows="30" cols="60" style="font-size: 14px;">
<?xml version="1.0" encoding="UTF-8"?>
<COLLECTION>
  <BOOK>
    <TITLE>Book Title 1</TITLE>
    <AUTHOR>Author Name 1 </AUTHOR>
    <PUBLISHER>Publishing House 1</PUBLISHER>
  </BOOK>
  <BOOK>
    <TITLE>Book Title 2</TITLE>
    <AUTHOR>Author Name 2 </AUTHOR>
    <PUBLISHER>Publishing House 2</PUBLISHER>
  </BOOK>
  <BOOK>
    <TITLE>Book Title 3</TITLE>
    <AUTHOR>Author Name 3 </AUTHOR>
    <PUBLISHER>Publishing House 3</PUBLISHER>
  </BOOK>
  <BOOK>
    <TITLE>Book Title 4</TITLE>
    <AUTHOR>Author Name 4 </AUTHOR>
    <PUBLISHER>Publishing House 4</PUBLISHER>
  </BOOK>
  <BOOK>
    <TITLE>Book Title 5</TITLE>
    <AUTHOR>Author Name 5 </AUTHOR>
    <PUBLISHER>Publishing House 5</PUBLISHER>
  </BOOK>
</COLLECTION>
</textarea>
</pre>
</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.