Question

我尝试将通过HTML表单提交的值发送到XML文件，然后检索所述值并将它们显示在初始表单下面的表格中。我是使用XML的新手，我知道xmlhttp请求是前进的方法，但在提交表单时我很难更新表。

这是我的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>

这是我的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;

}

谢谢

Answer 1

所以我现在已经设法找到解决这个问题的方法。它不会将新值保存到xml文件中，这对于现在来说不是问题，而是为我目前需要它做的工作。我的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 个答案: