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

我试图将通过HTML表单提交的值发送到XML文件，然后检索所述值并让它们出现在初始表单下的表格中。我对使用XML非常陌生，并且我知道xmlhttp请求是前进的方向，但在提交表单时我正在努力更新表。如何使用HTML表单使用XML值更新html表格？

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

}

谢谢

来源

2017-02-26 Jamie Simpson

问题似乎是你在你的表单动作调用两个'returns'：'onsubmit =“return myFunction（this）; return false;”>'。删除'返回false'，这应该工作。 –

@ObsidianAge我刚刚尝试过这一点，页面仍然没有任何改变地重新加载到下面的表格。谢谢你。我认为xmlhttprequest最好，因为我不需要担心页面重新加载。目前正在阅读一些关于它如何工作的文档 –

所以我设法找到解决这个问题的办法现在。它不会将新值保存到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; 
}

来源

2017-02-27 11:46:37

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

回答

相关问题