Automatically change a value in a form field

Question

I have a webpage where people enter information (name, job title, address, etc.) and it auto creates a business card for them. I currently have some jQuery that uses .change and looks at a field when a user changes it.

It looks for issues with what they enter, because some things must be in a certain format (ex- They enter the word "Avenue" and it won't let them add the item to their cart until they change it to Ave.)

I am trying to find some way to do this on the fly automatically with JS/jQuery, but I'm not sure what to do. What I would like is for the field to update itself, so if the user puts in "Avenue" it would auto update to "Ave." after the user tabs / exits the field.

Any idea on what JS and/or jQuery can be used to do this?

Here is my current code:

 var x = "Clean";
 var xD = " ";
 $('#cartText4046').change(function () {
        if ($(this).val().indexOf("Avenue") > -1) {
            x = "Please use Ave. instead of Avenue.";
        } else if ($(this).val().indexOf("avenue") > -1) {
            x = "Please use Ave. instead of Avenue.";
        ... Additional rules here, omitted for space.
        } else {
           x = "Clean";
        }


    if (x != "Clean") {
        $('#cartText4046').addClass("invalid");
        xD = x;
     } else if (x == "Clean") {
        $('#cartText4046').removeClass("invalid");
        xD = " ";
    }

     if (x != "Clean") {
        $('.betabutton').html('<span id="addToBaskettext">To add this to the Basket, 
         please fix the following issue(s):<br><br>&nbsp;' +xD'</span>');
        $('.betabutton').addClass("invalidBtn");
     } else if (x == "Clean") {
        $('.betabutton').html('<a id="addToBasket" href="#" onclick="actionPageSubmit();return false;"><span id="addToBaskettext">Add to Basket</span></a>');
        $('.betabutton').removeClass("invalidBtn");
    }

Answer 1

If you really wanted it to do it after the user has finished making changes ("after the user tabs / exits the field.") you might want to bind to blur (fires when focus is lost/shifted to some other element)...

$('#cartText4046').on( "blur", function() {
$(this).val(function(index, value) {
    value = value.replace('Avenue', 'Ave.');
    // keep going ... value = value.replace('Street', 'St.') ..
    return value;
});

Answer 2

EDIT: I reread the question, and now see that you wanted the correction to happen after the user exits the field. This answer provides inline autocorrection while the user types. I will leave it in case you find it useful after all.

You can lift the code from the jQuery Autocorrect Plugin: jsfiddle.

$("#textbox").autocorrect({
    corrections: {
        Avenue: "Ave.",
        "...": "someWord"
    }
});

Answer 3

Here is a working sample of what you may be looking for.

$("#textbox").on("change", function() {
    $(this).val(function(index, value) {
        return value.replace('Avenue', 'Ave.');
    });
});

http://jsfiddle.net/decx8sw9/