PDA

View Full Version : Import XML document with JS



guvenck
Aug 16th, 2007, 12:40 PM
Hello,

I have a form with lots of variables. Most of them hold hex color values, select elements of text and numeric values... All these are required to build a theme for an html page.

I am thinking of storing premade themes' (such as sunset, summer, winter) variables values in theme files and am thinking of using XML format for this.

I can handle the uploading part with PHP.

All I need is a drop-down list of xml files (can create this list easily with PHP) and upon choosing one and pressing the Apply button the form values should change automatically.

How can I do this?

Kor
Aug 16th, 2007, 01:52 PM
AJAX (http://en.wikipedia.org/wiki/Ajax_(programming)) is what you may use

guvenck
Aug 16th, 2007, 01:52 PM
Let me give you more information:

The XML file (sunset.xml) looks like this:



<?xml version="1.0" ?>

<theme>

<name>Sunset</name>

<body_backgroundcolor>#00FF00</body_backgroundcolor>

<body_margin>10</body_margin>

<body_padding>10</body_padding>

</theme>


and the form looks like this:



<form action="" name="myForm" method="post">

<input type="text" name="body_backgroundcolor" value=""><br>
<input type="text" name="body_padding" value=""><br>
<input type="text" name="body_margin" value=""><br>

<input type="button" value="Apply XML" onClick="importXML();"><br>

</form>


and the JS code looks like this (till now):




function importXML()
{
if (document.implementation && document.implementation.createDocument)
{
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.onload = applyXML;
}
else if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.onreadystatechange = function () {
if (xmlDoc.readyState == 4) applyXML()
};
}
else
{
alert('Your browser can\'t handle this script');
return;
}
xmlDoc.load("sunset.xml");
}

function applyXML()
{

var x = xmlDoc.getElementsByTagName('theme');

for (j=0;j<x[0].childNodes.length;j++)
{
if (x[0].childNodes[j].nodeType != 1) continue;

var tagname = x[0].childNodes[j].tagName;
var tagvalue = x[0].childNodes[j].firstChild.nodeValue;

// am almost there

}
}



What I want is, when Apply XML button is pressed, the sunset.xml file should load and form variables (with same name of nodes in xml file) should get the values in XML file.