如何使用HTML表单使用XML值更新html表？

Question

I'm trying to send values submitted via an HTML form to an XML file and then retrieve said values and have them appear on a table underneath the initial form. 我试图将通过HTML表单提交的值发送到XML文件，然后检索所述值并使它们出现在初始表单下方的表中。 I'm very new to using XML and I know that an xmlhttp request is the way forward but am struggling to update the table when submitting the form. 我是使用XML的新手，我知道xmlhttp请求是前进的方式，但是在提交表单时正努力更新表。

Here is my xsl file 这是我的xsl文件

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
  <html>
    <script type="text/javascript" src="MainPageJS.js">&#160;</script>
    <body>
        <h2>Give As You Earn</h2>
        <form action="/MainPageXML.xml" onsubmit="return myFunction(this); return false;">
          <p><xsl:value-of select="data/options/selectionText"/><input name="Flex Model Cost" id="donationAmount" type="number" min="1" max="11666.67" value="12"></input>Donation</p>
          <p><xsl:value-of select="data/options/additionalSelectionText"/><input name="Chosen Charity" type="text" id="charityChoice"></input></p>
          <input type="submit" value="Save Choice" id="saveChoice"></input>
        </form>
        <button>Return to Summary</button>
        <h3>Current Selection</h3>
        <table>
          <tr>
            <td>Scheme Name</td>
            <td>Give As You Earn</td>
          </tr>
          <tr>
            <td>Provider</td>
            <td>Charities Aid Foundation</td>
          </tr>
          <tr>
            <td>Your Selection</td>
            <td></td>
          </tr>
          <tr>
            <td>Chosen Charity</td>
            <td id="chosenCharity"></td>
          </tr>
          <tr>
            <td>Cost of your selection</td>
            <td id="annualSelectionCost"></td>
          </tr>
          <tr>
            <td>Periodic Cost of your selection</td>
            <td id="periodicSelectionCost"></td>
          </tr>
        </table>
    </body>
  </html>

</xsl:template>

</xsl:stylesheet>

and here is my js file 这是我的js文件

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    console.log('js Loaded!');
    myFunction(this);
  }
};
xmlhttp.open('GET', 'MainPageXML.xml' , true);
xmlhttp.send();

function myFunction(xml) {
  var x, xx, yy, y, xmlDoc, charChoice, donAmount, txt, nmbr, prdNmbr;
  xmlDoc = xml.responseXML;
  donAmount = document.getElementById('donationAmount').value;
  console.log(donAmount);
  charChoice = document.getElementById('charityChoice').value;
  console.log(charChoice);

  txt = '';
  x = xmlDoc.getElementsByTagName('property')[4];
  y = x.getElementsByTagName('format')[0];
  txt = y.getAttribute('answer');
  console.log(x);
  console.log(y);
  console.log(txt);
  txt = charChoice;
  console.log(txt);

  nmbr = 0;
  xx = xmlDoc.getElementsByTagName('property')[6];
  yy = xx.getElementsByTagName('format')[0];
  nmbr = yy.getAttribute('answer');
  console.log(xx);
  console.log(yy);
  console.log(nmbr);
  nmbr = donAmount;
  console.log(nmbr);

  prdNmbr = 0;

  document.getElementById('chosenCharity').innerHTML = txt;
  document.getElementById('annualSelectionCost').innerHTML = nmbr;
  parseFloat(nmbr);
  prdNmbr = nmbr / 12;
  console.log(prdNmbr);
  document.getElementById('periodicSelectionCost').innerHTML = prdNmbr;

}

Thank you 谢谢

Answer 1

So I have managed to find a way around this problem for now. 因此，我现在设法找到了解决此问题的方法。 It does not save the new values to the xml file which is not a problem for now but work for what I need it to do at the moment. 它不会将新值保存到xml文件中，这现在不是问题，但可以满足我目前需要的工作。 My javascript now loos like this: 我的JavaScript现在像这样：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'MainPageXML.xml', true);

xhr.responseType = 'document';

xhr.overrideMimeType('text/xml');

xhr.onload = function () {
  if (xhr.readyState === xhr.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.response);
      console.log(xhr.responseXML);
      myFunction();

    }
  }
};

xhr.send(null);

function myFunction() {
  var x, xx, yy, y, xmlDoc, charChoice, donAmount, txt, nmbr, prdNmbr;
  xmlDoc = xhr.responseXML;
  donAmount = document.getElementById('donationAmount').value;
  console.log(donAmount);
  charChoice = document.getElementById('charityChoice').value;
  console.log(charChoice);

  txt = '';
  x = xmlDoc.getElementsByTagName('property')[4];
  console.log(x);
  y = x.getElementsByTagName('format')[0];
  console.log(y);
  y.setAttribute('answer', charChoice);
  txt = y.getAttribute('answer');
  console.log(txt);
  document.getElementById('chosenCharity').innerHTML = txt;

  nmbr = 0;
  xx = xmlDoc.getElementsByTagName('property')[6];
  console.log(xx);
  yy = xx.getElementsByTagName('format')[0];
  console.log(yy);
  yy.setAttribute('answer', donAmount);
  nmbr = yy.getAttribute('answer');
  console.log(nmbr);
  document.getElementById('annualSelectionCost').innerHTML = nmbr;

  prdNmbr = 0;
  parseFloat(nmbr);
  prdNmbr = nmbr / 12;
  console.log(prdNmbr);
  document.getElementById('periodicSelectionCost').innerHTML = prdNmbr;

  return false;
}

如何使用HTML表单使用XML值更新html表？

问题描述

1 个解决方案

解决方案1
0 2017-02-27 11:46:37

如何使用HTML表单使用XML值更新html表？

问题描述

1 个解决方案

解决方案1 0 2017-02-27 11:46:37

解决方案1
0 2017-02-27 11:46:37