my xsl transform is outputting malformed input tags

Question

I am working on a transform that inputs an XML file and outputs an html form for ordering groceries. I'm using the linux xmlstarlet utility (which uses libxml2 and libxslt1.1) transform the data.

the xmlfile loks like this:

<?xml-stylesheet type="text/xsl" href="GroceryList.xslt"?>
<!DOCTYPE list SYSTEM "GroceryList.dtd">
<list>
    <item class="Beverage">6 pack Soda</item>
    <item class="Beverage">Apple Cider mix</item>
    <item class="Cans">corn</item>
    <item class="Cans">Cranberry Sauce</item>
    <item class="Cleaners">trash bags</item>
    <item class="Cleaners">windex</item>
    <item class="Condiments">ketchup</item>
</list>

and the xslt is:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.1" >
    <xsl:output method="html"/>
    <xsl:param name="lc"/>
    <xsl:template match="/">
<html>
  <head>
    <title>Grocery List</title>
    <link rel="stylesheet" type="text/css" href="GroceryList.css"></link>
  </head>
  <body>
    <table>
      <tr><th colspan="3">Grocery List</th></tr>
      <tr><th colspan="3"><hr/></th></tr> 
      <xsl:variable name="lc" select="1" />
      <xsl:apply-templates/>
      <xsl:variable name="ti" select="count(./item)"/>
      <tr><th colspan="3"><button onclick="go();">GO!</button></th></tr>
    </table>
    <script type="text/javascript" source="./GroceryList.js">
    </script>
  </body>
</html> 
</xsl:template>

<xsl:template match="/list/item" >
  <xsl:variable name="lc" select="count(.|preceding-sibling::item)+1"></xsl:variable>
    <tr id="l{$lc}">
    <td><input  id="i{$lc}" type="number"/>
</td><td><xsl:value-of select="."/></td><td><xsl:value-of select="@class"/></td></tr>
</xsl:template>
  </xsl:stylesheet>

And the html output is:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Grocery List</title>
<link rel="stylesheet" type="text/css" href="GroceryList.css">
</head>
<body>
<table>
<tr><th colspan="3">Grocery List</th></tr>
<tr><th colspan="3"><hr></th></tr>
    <tr id="l2">
<td><input id="i2" type="number"></td>
<td>6 pack Soda</td>
<td>Beverage</td>
</tr>
    <tr id="l3">
<td><input id="i3" type="number"></td>
<td>Apple Cider mix</td>
<td>Beverage</td>
</tr>
    <tr id="l4">
<td><input id="i4" type="number"></td>
<td>corn</td>
<td>Cans</td>
</tr>
    <tr id="l5">
<td><input id="i5" type="number"></td>
<td>Cranberry Sauce</td>
<td>Cans</td>
</tr>
    <tr id="l6">
<td><input id="i6" type="number"></td>
<td>trash bags</td>
<td>Cleaners</td>
</tr>
    <tr id="l7">
<td><input id="i7" type="number"></td>
<td>windex</td>
<td>Cleaners</td>
</tr>
    <tr id="l8">
<td><input id="i8" type="number"></td>
<td>ketchup</td>
<td>Condiments</td>
</tr>
<tr><th colspan="3"><button onclick="go();">GO!</button></th></tr>
</table>
<script type="text/javascript" source="./GroceryList.js"></script>
</body>
</html>

while the form displays okay the html input tags are open e.g. <input id="i8" type="number"> should be <input id="i8" type="number"/>

this small difference breaks the javascript processing

Any suggestions?

As HTML syntax, that format is fine and normally it would be XML syntax breaking JavaScript. So please show details of what breaks. — Martin Honnen, Jul 05 '20 at 04:41
Your processor is correct - see https://stackoverflow.com/questions/13232121/closing-html-input-tag-issue and https://stackoverflow.com/questions/3558119/are-non-void-self-closing-tags-valid-in-html5. If you want self-closing tags, change your output method to XML - but then you risk getting invalid HTML. — michael.hor257k, Jul 05 '20 at 06:18

my xsl transform is outputting malformed input tags

0 Answers0