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 = "&nbsp;";
 $('#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 = "&nbsp;";
    }

     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");
    }

@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 03 '14 at 19:33
http://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 03 '14 at 19:35
So you do not know how to use `val("new value")` and replace the text in a textbox? — epascarello, Nov 03 '14 at 19:47
@epascarello I don't know how to use `val()` to replace just the one incorrect string of text while leaving the rest intact. I'm not the greatest with JS — Brett, Nov 03 '14 at 19:50
[MDN `replace()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace) — epascarello, Nov 03 '14 at 19:53
@epascarello I think this will work, thank you for helping me. — Brett, Nov 03 '14 at 19:59

White · Accepted Answer · 2014-11-03T20:34:27.527

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/

edited Nov 03 '14 at 20:34

answered Nov 03 '14 at 19:36

White

34
4

this works great and even accepts periods unlike the js.autocorrect I have been trying to set up. Thanks for this! – Brett Nov 04 '14 at 15:50

score 1 · Answer 2 · answered Nov 04 '14 at 16:29

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;
});

answered Nov 04 '14 at 16:29

Tom

2,249
1
11
7

thanks for the suggestion but this isn't really any different than the accepted answer except for the event handler difference. – Brett Nov 04 '14 at 19:06

mtl · Answer 3 · 2014-11-04T16:16:44.487

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"
    }
});

edited Nov 04 '14 at 16:16

answered Nov 03 '14 at 20:08

mtl

7,529
2
20
22

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 04 '14 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 04 '14 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 04 '14 at 17:19
Oh, okay, I think you mean spaces? The example with periods works in the fiddle. – mtl Nov 04 '14 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 04 '14 at 19:03
Correct, the autocorrect function uses the spacebar key to start correction, and uses the space character to split the entered text into words to be tested. Therefore you would have to change the function significantly in order to test for keys which include spaces. I think you have better options. – mtl Nov 04 '14 at 19:34

Automatically change a value in a form field

3 Answers3

Linked