val() is showing empty string when it actually contains a value

Question

My generated code looks like this in chrome's developer tools:

<tbody>
    <tr>
        <td>
            <span class="LiveAgentStatusField" value="Online" >
                Online
            </span>
        </td>
    </tr>
</tbody>

Please note that this html code is generated by salesforce and I don't have much control over this except the span.

My jQuery code:

$(".LiveAgentStatusField").each(function(index) {
    if ($(this).val() === 'online' || $(this).val() === 'Online') {
        $(this).css("color", "#0EBE5E");
    } else if ($(this).val() === 'offline' || $(this).val() === 'Offline') {
        $(this).css("color", "#ccc");
    }
});

There are two wield things happening to me:

1. When I am using .LiveAgentStatusField , it works pretty fine. But when I was using span.LiveAgentStatusField , it doesn't even go into the if code during debugging.

2. Although the value of the span tag should have a value of 'Online' , $(this).val() is actually "" during debugging. I added a line under this to catch the val() === "" branch and made sure this is pointing to the right element.

Actually, I have already resolved my code issue with using .html() . But I am quite keen to find out why it is acting strange.

Answer 1

The .val() method only works with form elements. If you want to get the value of the value attribute on a non-form element, use:

$(this).attr('value');

However, as others have noted, it is preferable to use a data- prefix (eg data-value ), as this is standards compliant. The value attribute is only valid on certain elements and it is certainly not valid on span s.

If use a data-value attribute, you can access it using .data('value') and then your code becomes:

$(".LiveAgentStatusField").each(function(index) {
    var value = $(this).data("value").toLowerCase();

    if (value === 'online') {
        $(this).css("color", "#0EBE5E");
    } else if (value === 'offline') {
        $(this).css("color", "#ccc");
    }
});

Answer 2

Actually value is invalid attribute here. Commonly It is used for inputs in form. In your case .html() is enough

EDIT: jQuery has trim() function for removing trailing whitespaces

var spanVal = $(this).html().toLowerCase(); // you don't need to call html() each time
spanVal = $.trim(spanVal);
if (spanVal === 'online') ... // do all the stuff

Yes, you can use data-value attribute and get it with data('value') function, but in your case more obvious solution is to use class you already have:

  <span class="LiveAgentStatusField online">
                                        Online
            </span>

then all jquery code will look like

$(".LiveAgentStatusField.online").css("color", "#0EBE5E");
$(".LiveAgentStatusField.offline").css("color", "#ccc");

jQuery will do each loop and all other stuff for you. Also I don't know why you are making it deferred, but if you want to make it at once - just use css

.LiveAgentStatusField.online { color: #0EBE5E; }

Answer 3

I would use data attributes instead

HTML

<span class="LiveAgentStatusField" data-value="Online" >

JS

$(this).data("value")

FIDDLE