Forum Moderators: open
Does anyone out there know where i can find a Javascript that Loads XML info or populates into form fields.... and via URL
or at least just loads XML with Javascript
for example i have the following
<?xml version="1.0" encoding="UTF-8"?>
<fields>
<f1-1>Buck Wheat</f1-1>
<f1-2>Just a Test</f1-2>
<f1-3>Anywhere USA</f1-3>
<f1-4>Buck Wheat City</f1-4>
</fields>
I all i want to do is to load this Info into an HTML form as shown below when the page loads....
<html>
<head>
<title>LOAD XML WITH JAVASCRIPT</title>
</head>
<body>
<form name="myform">
<input name="f1-1" type="text" id="f1-1"><br><br>
<input name="f1-2" type="text" id="f1-2"><br><br>
<input name="f1-3" type="text" id="f1-3"><br><br>
<input name="f1-4" type="text" id="f1-4"><br><br>
<input name="Submit" type="button" value="Submit">
</form>
</body>
</html>
Any HELP here would be Great!
“However”--- i would really like to locate a working example of an XML being loaded into the HTML file populating a few text fields.... I was unsuccessful at manipulating the code to load the server side xml with Javascript, then populate the text fields.
I'll review the examples but i would like to know if someone could help me do this very thing?
onload = function(){ loadXML("data.xml") }function loadXML(xmlFile)
{var form = document.forms["myform"]
var xmlDoc;
var err;
// Use appropriate progID for system/browser
try{xmlDoc = new ActiveXObject("MSXML2.xmldom" )}catch(e){err=e.message}
try{xmlDoc = new ActiveXObject("Microsoft.xmldom")}catch(e){err=e.message}
try{xmlDoc = new ActiveXObject("MSXML.xmldom" )}catch(e){err=e.message}
try{xmlDoc = new ActiveXObject("MSXML3.xmldom" )}catch(e){err=e.message}
if(!xmlDoc){ alert(err); return }
xmlDoc.async="false";
xmlDoc.load(xmlFile);
xmlFields=xmlDoc.documentElement.childNodes;
for(var f=0;f<xmlFields.length;f++)
{
var xField = xmlFields[f]
var tagName = xField.tagName
form[tagName].value = xField.childNodes[0].nodeValue
}
}
This one loops through the XML elements, putting the appropriate value in each box. You could do it the other way, looping through all your boxes, and getting the appropriate value out of the corresponding element. Something like:
box.value = xmlDoc.documentElement.getElementsByTagName(box.id)[0]This might suggest that it could be worth considering using the same tag with different id's, rather than using a different tag for each value.
This would be more reliably done server-side, if appropriate, since you have control of the situation, so your browser support issues go away.
I will try this Script and post the data.xml and the html script with your suggestions
1 QUESTION THOUGH
Would my html Form look like the following if i use this approach?....do i have the syntax correct?
---------------------------
<html>
<head>
<title>LOAD XML WITH JAVASCRIPT</title>
<script>
onload = function(){ loadXML("data.xml") } function loadXML(xmlFile) { var form = document.forms["myform"] var xmlDoc; var err;
// Use appropriate progID for system/browser try{xmlDoc = new ActiveXObject("MSXML2.xmldom" )}catch(e){err=e.message} try{xmlDoc = new ActiveXObject("Microsoft.xmldom")}catch(e){err=e.message} try{xmlDoc = new ActiveXObject("MSXML.xmldom" )}catch(e){err=e.message} try{xmlDoc = new ActiveXObject("MSXML3.xmldom" )}catch(e){err=e.message} if(!xmlDoc){ alert(err); return } xmlDoc.async="false"; xmlDoc.load(xmlFile); xmlFields=xmlDoc.documentElement.childNodes; for(var f=0;f<xmlFields.length;f++) { var xField = xmlFields[f] var tagName = xField.tagName form[tagName].value = xField.childNodes[0].nodeValue } }
</script>
</head>
<body>
<form name="myform">
<input name="f1-1" type="text" id="f1-1" value="xmlDoc.documentElement.getElementsByTagName(box.id)[0]"><br><br>
<input name="f1-2" type="text"
id="f1-2" value="xmlDoc.documentElement.getElementsByTagName(box.id)[1]"><br><br>
<input name="f1-3" type="text"
id="f1-3"value="xmlDoc.documentElement.getElementsByTagName(box.id)[2]"><br><br>
<input name="f1-4" type="text" id="f1-4"value="xmlDoc.documentElement.getElementsByTagName(box.id)[3]"><br><br>
<input name="Submit" type="button" value="Submit">
</form>
</body>
</html>
-------------------------------------
and should the data.xml still look like the following?
<?xml version="1.0" encoding="UTF-8"?>
<fields>
<f1-1>Buck Wheat</f1-1>
<f1-2>Just a Test</f1-2>
<f1-3>Anywhere USA</f1-3>
<f1-4>Buck Wheat City</f1-4>
</fields>
-------------------------------------------
is this correct?.... do you think this will work?
value="xmlDoc.documentElement.getElementsByTagName(box.id)[3]"
There is really no need to try to apply it individually to each box anyway. Take your code (HTML & XML), as per your 1st post, then put the script either inside a script block in the <head>, or an external script, then save the XML file as data.xml . That's it.
I have 2 quick questions though....
1) the code works without using
value="xmlDoc.documentElement.getElementsByTagName(box.id)[3]"I was not clear on where to place it.
2) I also have a situation where i need to populate text fields in the same way but without defining a form tag.... sounds crazy i know but "HOW would i populate those same text boxes via data.xml WITHOUT A FORM NAME?
What would you suggest i alter below?
-------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>LOADING DATA INTO TEXT BOXES WITH XML</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>onload = function(){ loadXML("data.xml") }
function loadXML(xmlFile)
{
var form = document.forms["myform"]
var xmlDoc;
var err;
// Use appropriate progID for system/browser
try{xmlDoc = new ActiveXObject("MSXML2.xmldom" )}catch(e){err=e.message}
try{xmlDoc = new ActiveXObject("Microsoft.xmldom")}catch(e){err=e.message}
try{xmlDoc = new ActiveXObject("MSXML.xmldom" )}catch(e){err=e.message}
try{xmlDoc = new ActiveXObject("MSXML3.xmldom" )}catch(e){err=e.message}
if(!xmlDoc){ alert(err); return }
xmlDoc.async="false";
xmlDoc.load(xmlFile);
xmlFields=xmlDoc.documentElement.childNodes;
for(var f=0;f<xmlFields.length;f++)
{ var xField = xmlFields[f]
var tagName = xField.tagName
form[tagName].value = xField.childNodes[0].nodeValue
}
}
// Not sure where this needs to go value="xmlDoc.documentElement.getElementsByTagName(box.id)[3]"
</script>
</head>
<body>
<input name="f1-1" type="text" id="f1-1"><br><br>
<input name="f1-2" type="text" id="f1-2"><br><br>
<input name="f1-3" type="text" id="f1-3"><br><br>
<input name="f1-4" type="text" id="f1-4"><br><br>
</body>
</html>
-----------------------------------
The original point was that we loop through the child elements in the xml doc, whereas if, for instance, there were extra child elements that carried other information, we might want to loop through the form fields instead, to get our 'keys'. Or, in other words, don't worry about it.
2. There are a few ways of collecting up the elements. Getting a collection, as opposed to an array, is preferable here, as we can access it's members via name. As long as there are no other <input>'s on the page...replace this line:
var form = document.forms["myform"]with
var form = document.getElementsByTagName("input")As it happens, that is all that needs to be done, and it would have worked in the previous code (with the form) too. Of course, it's probably a good idea to replace the var, form, with something more appropriate, like tboxes(I'll stick with the varName, form, for now though).
If there are other inputs on the page, the simplest solution is to wrap the inputs you want in a DIV; give it an id, then collect the inputs:
var form = document.getElementById("_wrap_div_id_").getElementsByTagName("input")If this isn't structurally possible, you can filter out the correct inputs in the loop in the script. Alternatively, you can forget about collecting them, and reference them directly instead.
Replace:
form[tagName].value = xField.childNodes[0].nodeValuewith
document.getElementsByName(tagName)[0] = xField.childNodes[0].nodeValueThat [0] is there because the method used returns a collection (of all the elements with that name).
I tried doing it server-side with ASP / JScript, but, the server I'm working with won't create an object under any of those progID's. It should be simple enough. I reckon it's more a problem with the server than anything else (or it could be me).
"YES" as per your previous post using DIV is structually not possible (man its like you're reading my mind)
I've replaced the code with your suggestions...
it almost works
I'm getting an ERROR on Line 26 that reads
" Object Doesn't Support Property or Method"
my MS Script debugger shows Line 26 as the following line of:
document.getElementsByName(tagName)[0] = xField.childNodes[0].nodeValue For Give me if i missed something "simple" but perhaps you could see what i forgot to alter per your previous suggestions... perhaps in my excitement of the success of the previous posts i've overlooked the obvious.... Once again i seek your GURUship....we're almost there.
:)
------------BERNARD MARX GURU CODE -----------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>LOADING DATA INTO TEXT BOXES WITH XML - the MARX WAY</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>onload = function(){ loadXML("data.xml") }
function loadXML(xmlFile)
{
var form = document.getElementsByTagName("input")
var xmlDoc;
var err;
// Use appropriate progID for system/browser
try{xmlDoc = new ActiveXObject("MSXML2.xmldom" )}catch(e){err=e.message}
try{xmlDoc = new ActiveXObject("Microsoft.xmldom")}catch(e){err=e.message}
try{xmlDoc = new ActiveXObject("MSXML.xmldom" )}catch(e){err=e.message}
try{xmlDoc = new ActiveXObject("MSXML3.xmldom" )}catch(e){err=e.message}
if(!xmlDoc){ alert(err); return }
xmlDoc.async="false";
xmlDoc.load(xmlFile);
xmlFields=xmlDoc.documentElement.childNodes;
for(var f=0;f<xmlFields.length;f++)
{ var xField = xmlFields[f]
var tagName = xField.tagName
document.getElementsByName(tagName)[0] = xField.childNodes[0].nodeValue
}
}
</script>
</head>
<body>
<input name="f1-1" type="text" id="f1-1"><br><br>
<input name="f1-2" type="text" id="f1-2"><br><br>
<input name="f1-3" type="text" id="f1-3"><br><br>
<input name="f1-4" type="text" id="f1-4"><br><br>
</body>
</html>
NOTE: I did not change the data.xml
it stayed the same
document.getElementsByName(tagName)[0].[blue]value[/blue] = xField.childNodes[0].nodeValue
I uploaded the links to my server so that you can see the working example
I also Thank you for your patience.... You knew exactly what i was trying to do.
Here are the links i've uploaded to my website to share with all who ever wanted to Load XML Data into Forms or Text Boxes....
To Populate Form Text Fields with XML Data
http://www.extremefx.net/xmldemo/sampleformXML.htm
Or
Populate Only Text Fields without Form Tag with XML Data
http://www.extremefx.net/xmldemo/textboxonly_noform.htm
Thanks Again to the 10th Power
