使用JavaScript将值从HTML传递到XSLT

时间:2014-10-14 19:42:28

标签: javascript html xml xslt

我有一个XML,其中包含字段ID,名称,数量和价格的订单。 我正在尝试创建一个页面,将ID作为用户的输入并在其中搜索 XML并显示所需的值。已经在我的XML中添加了这个,但它不允许我在“”

下面

我的XML:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="Order.xsl"?>
<orders>
       <order>
             <id>1</id>
             <name>A</name>
             <qty>5</qty>
             <rate>10</rate>
       </order>
</orders>

XSLT:

<?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">
        function searchAcct()
          {
            AcctNum = document.getElementById("textbox1").value;

          }
     </script>
  <body>
     <form>
       Enter Account Num# : <input type="text" name="textbox1" id="textbox1"></input>
       <input type="submit" name="Submit" id="Submit" onclick="searchAcct()"></input>
     </form>    
     <xsl:for-each select="orders/order">
        <xsl:if test="id = AcctNum">
            <xsl:value-of select="name"></xsl:value-of>
            <xsl:value-of select="price"></xsl:value-of>
        </xsl:if>
     </xsl:for-each>
  </body>
  </html>
</xsl:template>  
</xsl:stylesheet>

我是XML和XSLT的新手,所以可能编写了错误的代码......请纠正我。

1 个答案:

答案 0 :(得分:0)

正如评论中所提到的,JavaScript无法以您展示的方式与XSLT交互。一旦HTML由XSLT生成,XSLT就会被遗忘,浏览器将处理HTML,如果在文本编辑器中手动输入,则不会有任何不同。

如果您使用XML中的xml-stylesheet指令对其进行转换,您可以采取的一种方法是将所有订单项呈现为DIV标记,其id属性基于订单ID,但具有样式属性设置为隐藏它们。然后使用javascript根据他们在文本框中输入的id显示相关的div。

作为首发,试试这个

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" doctype-public="XSLT-compat" omit-xml-declaration="yes" encoding="UTF-8" indent="yes" />

    <xsl:template match="/">
    <html>
        <script type="text/javascript">
        function showAcct()
          {
            var id = document.getElementById("textbox1").value;
            document.getElementById("orderDiv_" + id).style.display = "block";
          }
        </script>
        <body>
            <form>
            Enter Account Num# : <input type="text" name="textbox1" id="textbox1" />
            <input type="button" name="Submit" id="Submit" value="Show" onclick="showAcct()" />
            </form>    
            <xsl:for-each select="orders/order">
                <div id="orderDiv_{id}" style="display:none">
                    <xsl:value-of select="name" />
                    <br />
                    <xsl:value-of select="price" />
                </div>
            </xsl:for-each>
        </body>
    </html>
    </xsl:template>  
</xsl:stylesheet>

但这远未完成。它不会隐藏它显示的任何先前订单。它也没有验证在实际存在的文本框中输入的值,但它可能会给你一个开始。