Question

I have a button (named Benjamin):

<input type="submit" name="btn_submit" value="Next &rarr;" />

And on a click event it says ‘Loading’ and does cool stuff. However, if there is a problem, I want it to change back to its original text while displaying the error message elsewhere.

$('input[name=btn_submit]').click(function() {
    $(this).val('Loading');

    // Logicy Stuff...

    // Error?
    $(this).val('Next →');

    return false;
});

Somehow, the literal text → is applied to the button, rather than the cool →. How do I fix this?

Answer 1

Html is evaluated with different rules that JavaScript is. Html entities only parsed by the html parser. Either use the unicode literal, like so:

$(this).val('Next \u2192');

Or better, keep track of the original value and then set it back:

var initalButtonValue = $(this).val();
$(this).val('Loading');

// Stuff

$(this).val(initialButtonValue);

Or perhaps even better, use HTML data attributes to store the states.

<input type="submit" name="btn_submit" value="Next &rarr;" data-normal-value='Next &rarr;' data-loading-value='Loading...' />

Then:

// Set to loading
$(this).val($(this).data("loading-value"));

// and back to normal
$(this).val($(this).data("normal-value"));