getElementById not returning proper value (maybe syntax issue?)

I am using XSL to write this page, and when I hit a checkbox it sends the information to my javascript function. This all works in IE, but Chrome it does not. The problem is, after I hit the checkbox, the field comes back as "undefined" like so

<div id="Part1" value="0-SER-MN">undefined</div>

Where it is initially like

<div id="Part1" value="0-SER-MN">0-SER-MN</div>

My guess would be that the value being returned is "null" but I don't know why? Can anyone help? Thanks.

        <td colspan="2">
        <div>
            <xsl:attribute name="id">Part<xsl:value-of select="position()"/></xsl:attribute>
            <xsl:attribute name="value"><xsl:value-of select="Part"/></xsl:attribute>
            <xsl:if test="ErrorMessage">
                <input type="hidden" name="partNumber">
                    <xsl:attribute name="value"><xsl:value-of select="Part"/></xsl:attribute>
                </input>
                <input type="hidden" name="TempKey">
                    <xsl:attribute name="value"><xsl:value-of select="TempKey"/></xsl:attribute>
                </input>
            </xsl:if>
            <xsl:value-of select="./Part"></xsl:value-of>
        </div>      
    </td>

SO here is the javascript that is selected with the checkbox

     function turnOnOrder(index, tempKey)
 {
    document.getElementById('Part' + index).innerHTML     = '<input type="hidden" name="partNumber" value="' + document.getElementById('Part' + index).value + '"></input>   <input type="hidden" name="TempKey" value="' + tempKey + '"/>' + document.getElementById('Part' + index).value;
        document.getElementById('Location' + index).innerHTML = '<input type="hidden" name="location" value="' + document.getElementById('Location' + index).value + '"></input> ' + document.getElementById('Location' + index).value;
        document.getElementById('Site' + index).innerHTML     = '<input type="hidden" name="siteCode" value="' + document.getElementById('Site' + index).value + '"></input> ' + document.getElementById('Site' + index).value;
        document.getElementById('PONumber' + index).innerHTML = '<input type="hidden" name="origPO" value="' + document.getElementById('PONumber' + index).value + '"></input><input size="20" maxlength="20" type="text" name="PONumber" value="' + document.getElementById('PONumber' + index).value + '"></input>';
        document.getElementById('Quantity' + index).innerHTML = '<input type="hidden" name="OrderQty" value="' + document.getElementById('Quantity' + index).value + '"></input> ' + document.getElementById('Quantity' + index).value;

        if(document.getElementById('viewPrice') == null)
            document.getElementById('Price' + index).innerHTML    = '<input type="hidden" name="Price" value="' + document.getElementById('Price' + index).value + '"></input> ';   
        else
            document.getElementById('Price' + index).innerHTML    = '<input type="hidden" name="Price" value="' + document.getElementById('Price' + index).value + '"></input> ' + document.getElementById('Price' + index).value;

        document.getElementById('UserId' + index).innerHTML   = '<input type="hidden" name="UserId" value="' + document.getElementById('UserId' + index).value + '"></input> ';
        //document.getElementById('InactiveOverride' + index).innerHTML = '<input type="hidden" name="InactiveOverride" value="' + document.getElementById('InactiveOverride' + index).value + '"/>';
        //document.getElementById('MpqMoqOverride' + index).innerHTML = '<input type="hidden" name="MpqMoqOverride" value="' + document.getElementById('MpqMoqOverride' + index).value + '"/>';
        document.getElementById('Other' + index).innerHTML = '<input type="hidden" name="Supplier" value="' + document.getElementById('Supplier' + index).value + '"></input><input type="hidden" name="ICST" value="' + document.getElementById('ICST' + index).value + '"></input><input type="hidden" name="backflush" value="' + document.getElementById('backflush' + index).value + '"></input><input type="hidden" name="Billing" value="' + document.getElementById('Billing' + index).value + '"></input><input type="hidden" name="InactiveOverride" value="' + document.getElementById('InactiveOverride' + index).value + '"/><input type="hidden" name="MpqMoqOverride" value="' + document.getElementById('MpqMoqOverride' + index).value + '"/>';
 }

Answers


This seems to be an javascript DOM access issue. And has nothing to do with xslt.

The problem is based on the difference between DOM property and html attributes and the different handling in browsers. In most cases using the DOM property (dom-elment.attribute-name) should work. Because the browser synchronize html attribute to DOM property. But this does not happen (in Chrome etc.) for customer attribute (e.g your value attribute at div).

Therefore you should use

document.getElementById('Part' + index).getAttribute('value') 

in replacement for document.getElementById('Part' + index).value

This should work in all reasonable modern browsers (e.g IE > 6)


Need Your Help

Border will not show in WPF Control

c# .net wpf

I'm trying to programmatically set a border in class that is derived from System.Windows.Controls.Control.

Using Amazon TVM instead of a regular AccessKey/SecretKey

android security amazon-s3 amazon-web-services

I am building an Android application that will send reports to a server. These reports are plain JSON files stored on Amazon S3.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.