2

I have a web page with a form on it. The "submit" button is supposed to remain deactivated until the user fills in all the necessary fields. When they fill in a field, a checkmark appears next to it. When all the checkmarks are there, we're good to go.

A checkmark might be set by code like this:

if (whatever) checkLocation.innerHTML = CHECKMARK;

Here's the code I'm using to do the final check. It just loops through all the locations where there may be checkmarks. If it finds a location without a mark, it disables the submit button and leaves. If it gets through them all, it activates the button and returns true.

function checkSubmitButton() {
    var button = document.getElementById(SUBMIT_BUTTON);
    for (var i=0; i<CHECK_LOCATIONS.length; i++) { // should be for-each, but JS support is wonky
        var element = document.getElementById(CHECK_LOCATIONS[i]);
        console.log(CHECK_LOCATIONS[i] +": " +element.innerHTML);

        // if found unchecked box, deactivate & leave
        if (element.innerHTML != CHECKMARK) {
            button.disabled = true;
            return false;
        }
    }

    // all true--activate!
    console.log("ACTIVATING BUTTON!");
    button.disabled = false;
    return true;
}

Here's the problem: this works so long as the const CHECKMARK contains something simple, like "X". But specs call for a special HTML character to be used: in this case &#x2713;, or ✓. When I do the comparison (in the if line) it ends up comparing the string "✓" to the string "&#x2713;". Since these two are not equal, it doesn't recognize a valid checkmark and the button never activates. How can I compare the contents of the HTML element my constant? (And hopefully make the code work even if down the road somebody replaces the checkmark with something else.)

Thanks.

Adam Smith
  • 449
  • 9
  • 23

3 Answers3

2

There is no problem with the check character and it behaves exactly like the X character. The problem is, that your html have the checkmark character stored as html entity in hex string. If you compare checkmark to checkmark it works just fine: https://jsfiddle.net/m7yoh026/

What you can do in your case is to make sure the CHECKMARK variable is the actuall checkmark character, not the html entity.

Other option is to decode the html entity: https://jsfiddle.net/m7yoh026/3/

var CHECKMARK = '&#x2713;'

var decoded_checkmark = $('<textarea />').html(CHECKMARK).text();

console.log($('div')[0].innerHTML)
if ($('div')[0].innerHTML == decoded_checkmark) {
    $('body').append('checkmark recognized<br>')
}
Martin Gottweis
  • 2,721
  • 13
  • 27
  • I see what you're doing, but I'm extremely reluctant to add dependencies to jQuery. It just seems like another possible point of failure for something as small as this. Thanks. – Adam Smith Nov 21 '16 at 19:38
  • No worries, there is a ton of ways to decode html entities with javascript without jquery. Check them out here: http://stackoverflow.com/questions/5796718/html-entity-decode – Martin Gottweis Nov 21 '16 at 21:58
1

You can convert a character to its HTML entity equivalent like so:

var encoded = raw.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
   return '&#'+i.charCodeAt(0)+';';
});
Joe
  • 2,500
  • 1
  • 14
  • 12
0

Well, here's what I ended up doing: I made a function called encodeHtml() that takes a character or string, writes it to a brand new div, and then returns what's contained in that div:

function encodeHtml(character) {
    var element = document.createElement("div");
    element.innerHTML = character;
    return element.innerHTML;
}

Then I can compare to what it returns, since it automatically changes "&#x2713;" to "✓", and will work with any unforeseen changes to that character. It's a bit of a kludge, but it works. (It's still not clear to me why JavaScript does this automatic conversion...but there are many design choices in which JavaScript mystifies me, so there you go.)

Thanks all for the help.

Adam Smith
  • 449
  • 9
  • 23