如何使用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表格？

回答

相關問題