Row value is not available in javascript

Question

After referring the following two references, I have created a javascript function in XSL template. The javascript is getting called and an alert is appearing. But the value of CountID is coming as empty in the alert though it has value in html.

What change do we need to do to alert the CountID?

Note: This is in an ASP.Net project and I am using Visual Studio 2005 Note: This is an existing project and I am new to XSLT (though I have knowledge on javascript,xml, kendoui, html5, etc.)

REFERENCES

1. How To Include Client-Side Script Functions in an XSL Document

2. Passing parameters to javascript script in xslt

Javascript

    <SCRIPT LANGUAGE="javascript" DEFER="true">

        var myVar = "<xsl:value-of select="CountID"/>";
        <xsl:comment>
            function on_change()
            {
                alert(myVar);
            }
        </xsl:comment>

</SCRIPT>

Source XML

<ROOT>
    <Counts>
        <CountID>34rrgt56</CountID>
        <PlantCD>01</PlantCD>
        <CountType>PI</CountType>
        <StatusCD>OP</StatusCD>
        <EntryCompleteIND>N</EntryCompleteIND>
        <StartedBy>Lijo C</StartedBy>
        <CreatedOnDate>05/09/2014 00:19:04</CreatedOnDate>
    </Counts>
</ROOT>

Note: This XML is passed to a custom control where it does some more additions. However for this question, this xml should be enough.

Complete XSL Stylesheet

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="html" indent="yes"/>
    <xsl:template match="/">

        <SCRIPT LANGUAGE="javascript" DEFER="true">

            var myVar = "<xsl:value-of select="CountID"/>";
            <xsl:comment>
                function on_change()
                {
                    alert(myVar);
                }
            </xsl:comment>

        </SCRIPT>


        <div>

            <TABLE border="0" cellPadding="0" cellSpacing="0" BGCOLOR="#E5DBE2" width="100%">
                <TR>
                    <TD CLASS="Heading3" ALIGN="LEFT" WIDTH="25%">
                        <xsl:value-of select="/ROOT/Labels/PhysicalInventoryIDText/." />
                    </TD>
                    <TD CLASS="Heading3" ALIGN="LEFT" WIDTH="20%">
                        <xsl:value-of select="/ROOT/Labels/DateTimeText/." />
                        <BR/>
                        <xsl:value-of select="ROOT/Labels/StartedText/." />
                    </TD>
                    <TD CLASS="Heading3" ALIGN="LEFT" WIDTH="15%"></TD>
                </TR>
            </TABLE>


            <TABLE style="display:none" name="emailTable"  id="emailTable" width="100%" BGCOLOR="#E5DBE2">
                <TR>
                    <TD width="25%" CLASS="Normal" colspan="1"  ALIGN="RIGHT">
                        <B>
                            <xsl:value-of select="/ROOT/Labels/EmailAddressText/." />
                        </B>
                    </TD>
                    <TD width="75%" ALIGN="LEFT">
                        <img src="../Images/ArrowInvisible.gif" width="15" height="13" name="imgEmail1" />
                        <INPUT id="txtEmail1" name="txtEmail1" runat="server" width="100px" maxlength="100" Required="true" onfocus="document.forms[0].imgEmail1.src='../Images/ArrowVisibleDB.gif';" onblur="document.forms[0].imgEmail1.src='../Images/ArrowInvisible.gif';" />
                    </TD>
                </TR>
                <TR>
                    <TD width="25%" CLASS="Normal" colspan="1" ALIGN="RIGHT">
                        <B>
                            <xsl:value-of select="/ROOT/Labels/EmailAddressText/." />
                        </B>
                    </TD>
                    <TD width="75%" ALIGN="LEFT">
                        <img src="../Images/ArrowInvisible.gif" width="15" height="13" name="imgEmail2" />
                        <INPUT id="txtEmail2" name="txtEmail2" runat="server" width="100px" maxlength="100" Required="true" onfocus="document.forms[0].imgEmail2.src='../Images/ArrowVisibleDB.gif';" onblur="document.forms[0].imgEmail2.src='../Images/ArrowInvisible.gif';" />
                    </TD>
                </TR>
            </TABLE>

            <TABLE border="0" cellPadding="0" cellSpacing="0" BGCOLOR="#E5DBE2" width="100%">
                <xsl:for-each select="ROOT/Counts">
                    <TR>
                        <TD CLASS="Normal" ALIGN="LEFT" width="25%">
                            <xsl:value-of select="CountID"/>
                        </TD>


                        <TD CLASS="Normal" ALIGN="LEFT" width="20%" style="font-size:12">
                            <xsl:value-of select="CreatedOnDate"/>
                        </TD>

                        <TD ALIGN="RIGHT" width="15%">
                            <Input type="button">
                                <xsl:attribute name="id">
                                    <xsl:value-of select="CountID"/>
                                </xsl:attribute>
                                <xsl:attribute name="name">
                                    <xsl:value-of select="CountID"/>
                                </xsl:attribute>

                                <xsl:attribute name="onclick">
                                    <xsl:text>on_change()</xsl:text>
                                </xsl:attribute>

                                <xsl:attribute name="value">Conclude</xsl:attribute>
                            </Input>
                        </TD>

                    </TR>
                    <xsl:if test="LastError!=''">
                        <TR>
                            <TD COLSPAN="3" CLASS="Normal" ALIGN="LEFT" width="100%">
                                Last Error:  <xsl:value-of select="LastError"/>
                            </TD>
                        </TR>
                    </xsl:if>
                    <TR style="display:none">
                        <xsl:attribute name="id">
                            row<xsl:value-of select="CountID" />
                        </xsl:attribute>
                        <TD class="NormalError" colspan="4">
                            <xsl:value-of select="/ROOT/Labels/PIConcludeWarning/." />
                            <Input type="button" >
                                <xsl:attribute name="value">
                                    <xsl:value-of select="/ROOT/Labels/YesText/." />
                                </xsl:attribute>
                                <xsl:attribute name="onclick">
                                    submitForm(this,this.form,'<xsl:value-of select="CountID"/>')
                                </xsl:attribute>
                            </Input>
                            <xsl:text disable-output-escaping="yes">&#160;</xsl:text>
                            <Input type="button" >
                                <xsl:attribute name="value">
                                    <xsl:value-of select="/ROOT/Labels/CancelText/." />
                                </xsl:attribute>
                                <xsl:attribute name="onclick">
                                    window.row<xsl:value-of select="CountID" />.style['display'] = 'none';window.emailTable.style['display'] = 'none';
                                </xsl:attribute>
                            </Input>
                        </TD>
                    </TR>

                    <TR HEIGHT="1">
                        <TD BGCOLOR="#FFFFFF" COLSPAN="6" height="1">
                            <NOBR/>
                        </TD>
                    </TR>
                </xsl:for-each>
            </TABLE>
        </div>
    </xsl:template>
</xsl:stylesheet>

Answer 1

The right approach in terms of XSLT coding in my view is to write templates based XSLT code but as you have a single template doing it all start by replacing

                        <Input type="button">
                            <xsl:attribute name="id">
                                <xsl:value-of select="CountID"/>
                            </xsl:attribute>
                            <xsl:attribute name="name">
                                <xsl:value-of select="CountID"/>
                            </xsl:attribute>

                            <xsl:attribute name="onclick">
                                <xsl:text>on_change()</xsl:text>
                            </xsl:attribute>

                            <xsl:attribute name="value">Conclude</xsl:attribute>
                        </Input>

with

<input type="button" id="{CountID}" name="{CountID}" onclick="on_change(this.id);" value="Conclude"/>

then make the Javascript function take a parameter so instead of

    var myVar = "<xsl:value-of select="CountID"/>";
    <xsl:comment>
        function on_change()
        {
            alert(myVar);
        }
    </xsl:comment>

simply use

<script type="text/javascript">
function on_change(id) {
  alert(id);
}
</script>

That is all that is needed.