XSLT jquery classname and ASP.net

Question

So I have an XSLT form that gets data from an XML form and display it to me.I want to get the value of the elements via class name but it keeps returning undefined. Here is a snippet of the XSLTcode

<!-- generic input template -->
<xsl:template match="DataField" priority="0">
<td colspan="{DisplayOptions/@ColSpan}" location="{DisplayOptions/@Column}">
  <xsl:value-of select="FieldOptions/@DisplayName"/>
  <br/>
  <input type="{@ControlType}" name="{@Name}" onchange="textBlur(event)" />

  <xsl:apply-templates select="SubDataFields"/>
</td>

</xsl:template>

The two ways that I have tried is jquery and using document

function textBlur(e) {
//this gives me the value and works
var personInfo = e.target.value;
var personField = e.target.name;

//these two return undefined
var elements = document.getElementsByClassName("personField");
console.log($(elements).val());

console.log($("."+personField).val());
}

What am I doing wrong here? personField is the name of the element that I want. Since the XSLT generate the class name for me. So what I did was use the event to get the element's name and value to confirm that I am using the right name and is getting a value, then I try to get the value of the elements again using jquery and the name.

Answer 1

It looks like you're trying to grab the value whenever any of the text in any of the input boxes changes. In the textBlur function, you are passing the "event" object, so event.target is already the element you want to find.

However, if you want to do it by class name, it seems you don't have a class name set on the input tag yet. You should likely change this to:

<input class="personField" type="{@ControlType}" name="{@Name}" onchange="textBlur(event)" />

Also, your jQuery code was using the value of the name attribute of the field (i.e. personField = e.target.name), rather than a fixed string name for the class name. In other words, I think you want to use this:

console.log($(".personField").val());

Hope this helps!