1

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");
    }
8
  • 1
    Please post the code you have.
    – j08691
    Nov 3, 2014 at 19:30
  • @j08691 I don't have any, I'm looking for suggestions on what to use. I can post the code that looks at the field to see if something is entered incorrectly, but I'm trying to move away from that to something does it automatically, so I don't think it's relevant to the question.
    – Brett
    Nov 3, 2014 at 19:33
  • stackoverflow.com/tour "This site is all about getting answers. It's not a discussion forum. There's no chit-chat." You'll get better responses if you try something and post your results.
    – Matt
    Nov 3, 2014 at 19:35
  • 1
    @mkaatman thanks, I'll be sure to read up on that link!
    – Brett
    Nov 3, 2014 at 19:46
  • 1
    MDN replace() Nov 3, 2014 at 19:53

3 Answers 3

1

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/

1
  • this works great and even accepts periods unlike the js.autocorrect I have been trying to set up. Thanks for this!
    – Brett
    Nov 4, 2014 at 15:50
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;
});
1
  • thanks for the suggestion but this isn't really any different than the accepted answer except for the event handler difference.
    – Brett
    Nov 4, 2014 at 19:06
0

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"
    }
});
6
  • This is super helpful. Thank you. It does exactly what I need, but with one issue (the word to be corrected doesn't accept periods, but I am trying to find a way to make it accept them)
    – Brett
    Nov 4, 2014 at 15:10
  • It will accept periods if you put the key (word to be corrected) in quotes. I've edited the answer to reflect this.
    – mtl
    Nov 4, 2014 at 16:03
  • I couldn't get a string of text to work in it, for example "Pharm D" needs to go to "PharmD"
    – Brett
    Nov 4, 2014 at 17:19
  • Oh, okay, I think you mean spaces? The example with periods works in the fiddle.
    – mtl
    Nov 4, 2014 at 17:23
  • yep a string of text with spaces. The periods do work in the fiddle, so that was one issue solved, but I need to be able to also do text with spaces which doesn't work when put in quotes.
    – Brett
    Nov 4, 2014 at 19:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.