M
MaggotChild
Hi, I'm trying to transform the values entered into a form:
HTML:
<div id="container">
<div id="bs">
<input id="name" type="text"/>
<p>PPPPP</p>
<a href="#" onclick="return transform()">Do it!</a>
</div>
</div>
XSLT:
<xsl:template match="/">
<strong><xsl:value-of select="//input[@type='text']/@value"/></
strong>
--><xsl:value-of select="//p/text()"/>
</xsl:template>
Java Script:
function transform() {
....
xmlDoc = document.implementation.createDocument("", "", null);
xmlRef = document.getElementById('bs');
var clone = xmlDoc.importNode(xmlRef,true);
xmlDoc.appendChild(clone);
var fragment = xsltProcessor.transformToFragment(xmlDoc, document);
document.getElementById("container").innerHTML = "";
document.getElementById("container").appendChild(fragment);
....
}
The <p> element gets transformed, but not the input element.
..
Now, I understand that I can pull the values out of the form with Java
Script and simply change the XPath expression to a XSLT param, but why
can't the transformation pull the values directly?
<input type="text" value="grr!"/> will transform. Is the tree
structure for these two different? Humm, now that I think about it
document.getElementById('name').value
returns the value, whereas
document.getElementById('name').getAttribute('value')
returns null
Any explanations? Is it not possible to transform user supplied values
for input elements without passing the values into the style sheet as
parameters?
HTML:
<div id="container">
<div id="bs">
<input id="name" type="text"/>
<p>PPPPP</p>
<a href="#" onclick="return transform()">Do it!</a>
</div>
</div>
XSLT:
<xsl:template match="/">
<strong><xsl:value-of select="//input[@type='text']/@value"/></
strong>
--><xsl:value-of select="//p/text()"/>
</xsl:template>
Java Script:
function transform() {
....
xmlDoc = document.implementation.createDocument("", "", null);
xmlRef = document.getElementById('bs');
var clone = xmlDoc.importNode(xmlRef,true);
xmlDoc.appendChild(clone);
var fragment = xsltProcessor.transformToFragment(xmlDoc, document);
document.getElementById("container").innerHTML = "";
document.getElementById("container").appendChild(fragment);
....
}
The <p> element gets transformed, but not the input element.
..
Now, I understand that I can pull the values out of the form with Java
Script and simply change the XPath expression to a XSLT param, but why
can't the transformation pull the values directly?
<input type="text" value="grr!"/> will transform. Is the tree
structure for these two different? Humm, now that I think about it
document.getElementById('name').value
returns the value, whereas
document.getElementById('name').getAttribute('value')
returns null
Any explanations? Is it not possible to transform user supplied values
for input elements without passing the values into the style sheet as
parameters?