HTML Form Input Fields to read and write XML file

Question

I am currently trying to build an HTML form with input fields to read an XML file and write back with changes. The first step is retrieving values on page load into the input fields but it doesn't want to work

    <body>
<h1>Config Page</h1>
<div>
    <b>Site URL:</b> <input type="text" id="siteURL" value="site..."/></span><br>
    <b>Site Collection:</b> <span id="siteCollection"></span><br>
</div>

<script>
        var xmlhttp, xmlDoc;
        xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", "/Configuration/config.xml", false);
        xmlhttp.send();
        xmlDoc = xmlhttp.responseXML;
        document.getElement
        document.getElementById("siteURL").value.innerHTML =
        xmlDoc.getElementsByTagName("siteURL")[0].childNodes[0].nodeValue;
        document.getElementById("siteCollection").innerHTML =
        xmlDoc.getElementsByTagName("siteCollection")[0].childNodes[0].nodeValue;
        function myFunction() {
            alert(siteURL + "is the site Url")
    }
</script>
<button onclick="myFunction()">Get message value</button>

I know the XML is pulling through ok because the siteCollection span item works, but the input field does not.

Any help would be much appreciated.

Thank you.

Answer 1

Maybe if you use jQuery you can do it as following

http://codepen.io/Daethe/pen/dXWjJo

<div>
    <b>Site URL:</b> <input type="text" id="siteURL" value="site..."/></span><br>
</div>
<button onclick="myFunction()">Get message value</button>
<script>
  function myFunction() {
  var xmlHttp = jQuery.parseXML('<?xml version="1.0" encoding="utf-8"?><config><siteURL>http://localhost/</siteURL></config>');
  var xmlDoc;
  xmlDoc = xmlHttp.documentElement;
  $("#siteURL").val(xmlDoc.getElementsByTagName("siteURL")[0].childNodes[0].nodeValue);
}
</script>

Answer 2

Thanks to Daethe for putting me on the right track. I found my solution to read an xml file into a HTML input field form

for the javascript...

var xmlpath = "../configuration/test.xml"
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", xmlpath, false);
xmlhttp.setRequestHeader('Content-Type', 'text/xml');
xmlhttp.send("");
xmlDoc = xmlhttp.responseXML;

function loadFunction() {
$("#siteURL").val(xmlDoc.getElementsByTagName("siteURL")[0].childNodes[0].nodeValue);
}

For the page...

    <script src="/Script/form.js"></script>
<link rel="stylesheet"     href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
                <html>
<br>Site URL (EG: http://intranet)</br>
                <input type="text" id="siteURL" name="siteURL" value="blank..." />
<button onclick="loadFunction()">Load Configuration</button>
</html>

Answer 3

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
<title>Please Check Data</title>
<script type="text/javascript">
    function readXMLFile() {
        var i;
        var xml = new XMLHttpRequest();
        xml.open('GET', 'projectRelatedData.xml', false);
        xml.send();
        var xmlData = xml.responseXML;
            xmlData=(new DOMParser()).parseFromString(xml.responseText,'text/xml');
        var projectData=xmlData.getElementsByTagName("project");
        //alert(projectData.length);
        for(i=0;i<projectData.length;i++)
            {
        var name=projectData[i].getElementsByTagName("name")[0].firstChild.data;
        var imageName=projectData[i].getElementsByTagName("imagePath")[0].firstChild.data;
        var pdfName=projectData[i].getElementsByTagName("pdfPath")[0].firstChild.data;
        var description=projectData[i].getElementsByTagName("description")[0].firstChild.data;
        var amount=projectData[i].getElementsByTagName("amount")[0].firstChild.data;
        //alert("number of Project : "+projectData.length);
        document.write(name+'<br>');
        document.write(imageName+'<br>');
        document.write(pdfName+'<br>');
        document.write(description+'<br>');
        document.write(amount+'<br>');
            }
    }
</script>
</head>
<body>
    <button onclick="readXMLFile()">Click</button>
    <p id="ccc"></p>
</body>
</html>



<?xml version="1.0" encoding="UTF-8"?>
<projectWebsite>
    <project>
        <name>CARGO SHIPPING</name>
        <imagePath>CARGOSHIPPING.PNG</imagePath>
        <pdfPath>cargoShipping.pdf</pdfPath>
        <description>
        Cargo shipping is all about booking cargo to move from one place to another. Owner can add new shipsand he can also track ships.User can register for cargo and he can also track ships.Admin has the right to view detailsof owner, to add a new company and also update price of ship. This software hasa very nice GUI to give a very nice presentation of a cargo management system.
        </description>
        <amount>4000</amount>
    </project>
    <project>
        <name>E-BAZZAR</name>
        <imagePath>ebazzar.PNG</imagePath>
        <pdfPath>eBazar.pdf</pdfPath>
        <description>
        This project emphasizes on taking bookings of pat ient in a web portal system.Patient can search for the doctor and book for appointment . Doctor can check and confirm appointment so patient can visit accordingly.Also admin is provided to add doctors in the portal,moreover customer list can be seen as well.
        </description>
        <amount>4000</amount>
    </project>
</projectWebsite>

HTML Form Input Fields to read and write XML file

Question

3 answers

solution1
0 ACCPTED 2016-07-01 16:31:28

solution2
0 2016-07-03 01:29:43

solution3
0 2018-12-17 06:02:57

HTML Form Input Fields to read and write XML file

Question

3 answers

solution1 0 ACCPTED 2016-07-01 16:31:28

solution2 0 2016-07-03 01:29:43

solution3 0 2018-12-17 06:02:57

solution1
0 ACCPTED 2016-07-01 16:31:28

solution2
0 2016-07-03 01:29:43

solution3
0 2018-12-17 06:02:57