HTML表单输入字段，用于读写XML文件

Question

I am currently trying to build an HTML form with input fields to read an XML file and write back with changes. 我目前正在尝试使用输入字段构建HTML表单，以读取XML文件并写回更改。 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. 我知道XML可以顺利通过，因为siteCollection范围项目有效，但输入字段无效。

Any help would be much appreciated. 任何帮助将非常感激。

Thank you. 谢谢。

Answer 1

Maybe if you use jQuery you can do it as following 也许如果您使用jQuery，可以按照以下步骤进行操作

http://codepen.io/Daethe/pen/dXWjJo 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 我找到了将XML文件读入HTML输入字段形式的解决方案

for the javascript... 对于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表单输入字段，用于读写XML文件

问题描述

3 个解决方案

解决方案1
0 已采纳 2016-07-01 16:31:28

解决方案2
0 2016-07-03 01:29:43

解决方案3
0 2018-12-17 06:02:57

HTML表单输入字段，用于读写XML文件

问题描述

3 个解决方案

解决方案1 0 已采纳 2016-07-01 16:31:28

解决方案2 0 2016-07-03 01:29:43

解决方案3 0 2018-12-17 06:02:57

解决方案1
0 已采纳 2016-07-01 16:31:28

解决方案2
0 2016-07-03 01:29:43

解决方案3
0 2018-12-17 06:02:57